fix the blur of the line when use canvas

README_he .md

@@ -0,0 +1,26 @@
+## 更改内容
+
+[jsmind.graph.js](src\jsmind.graph.js)
+
+```js
+    set_size(w, h) {
+        let dpr = this.getPixelRatio();
+
+        // 设置实际的canvas尺寸
+        this.e_canvas.width = w * dpr;
+        this.e_canvas.height = h * dpr;
+
+        // 设置canvas的样式尺寸为逻辑像素
+        this.e_canvas.style.width = w + 'px';
+        this.e_canvas.style.height = h + 'px';
+
+        // 更新内部尺寸记录
+        this.size.w = w;
+        this.size.h = h;
+
+        // 由于设置canvas尺寸会重置上下文，因此需要重新调用scale
+        this.canvas_ctx.scale(dpr, dpr); // 设置缩放比例
+    }
+```
+
+> 修复高分辨率的设备下，canvas 线条模糊的问题

example/2_features_cn.html

@@ -197,10 +197,7 @@
                 <input class="file" type="file" id="image-chooser" accept="image/*" />
             </div>
         </div>
-        <script
-            type="text/javascript"
-            src="//jsd.onmicrosoft.cn/npm/[email protected]/es6/jsmind.js"
-        ></script>
+        <script type="text/javascript" src="../es6/jsmind.js"></script>
         <script
             type="text/javascript"
             src="//jsd.onmicrosoft.cn/npm/[email protected]/es6/jsmind.draggable-node.js"

package.json

@@ -16,7 +16,7 @@
     "scripts": {
         "server": "http-server",
         "build": "rollup -c .config/rollup.config.js",
-        "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+        "test": " NODE_OPTIONS=--experimental-vm-modules jest",
         "test-legacy": "jest tests/legacy",
         "test-es6": "NODE_OPTIONS=--experimental-vm-modules jest tests/unit",
         "format": "prettier --config .config/prettierrc.json --ignore-path .config/prettierignore --write .",

src/jsmind.graph.js

@@ -123,6 +123,9 @@ class CanvasGraph {
         };
         this.init_line_render();
     }
+    getPixelRatio() {
+        return window.devicePixelRatio || 1;
+    }
     init_line_render() {
         if (typeof this.opts.custom_line_render === 'function') {
             this.drawing = (ctx, x1, y1, x2, y2) => {
@@ -144,11 +147,24 @@ class CanvasGraph {
         return this.e_canvas;
     }
     set_size(w, h) {
+        let dpr = this.getPixelRatio();
+
         this.size.w = w;
         this.size.h = h;
-        this.e_canvas.width = w;
-        this.e_canvas.height = h;
+        if (this.e_canvas.width && this.e_canvas.height && this.canvas_ctx.scale) {
+            this.e_canvas.width = w * dpr;
+            this.e_canvas.height = h * dpr;
+
+            this.e_canvas.style.width = w + 'px';
+            this.e_canvas.style.height = h + 'px';
+
+            this.canvas_ctx.scale(dpr, dpr);
+        } else {
+            this.e_canvas.width = w;
+            this.e_canvas.height = h;
+        }
     }
+
     clear() {
         this.canvas_ctx.clearRect(0, 0, this.size.w, this.size.h);
     }