He mind #611

hingq · 2024-06-07T13:51:37Z

调整使用canvas绘制出现线条模糊的情况
fix the blur of line when using canvas

hizzgdev

感谢 @hingq 的支持，你能否帖两个截图做对比，好更直观的看到这个 PR 的效果？

hizzgdev · 2024-06-08T00:59:37Z

src/jsmind.graph.js

@@ -123,6 +123,9 @@ class CanvasGraph {
        };
        this.init_line_render();
    }
+    getPixelRatio() {
+        return window.devicePixelRatio || 1;


关于 dpr 的选项是否需要放在 option 里，默认值可以是 window.devicePixelRatio || 1 ？这样或许用户还能自定义缩放比例?

window.devicePixelRatio || 1 会获取像素比，不同的设备像素比不尽相同，为了保证兼容性，后面返回1。不会影响自定义缩放比列。个人认为，可以不用放在option

hizzgdev · 2024-06-08T00:59:53Z

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",


这个修改没有必要，可以撤销掉

hizzgdev · 2024-06-08T01:00:15Z

es6/README-en.md

@@ -1,37 +0,0 @@
-# jsMind ES6 Version


es6里的文件应该不影响这个PR，是否可以保留？

hizzgdev · 2024-06-08T01:00:52Z

src/package-lock.json

@@ -0,0 +1,6 @@
+{


这个是否也可以删除？

可以的，json文件里的是我自己的node环境没法运行，不小心改掉的

hingq · 2024-06-08T01:13:46Z

hizzgdev · 2024-06-08T01:33:54Z

我也在本地测试了一下，效果非常好！不过好像会影响到截图插件的功能。截图插件用的也是 canvas （无论 engine 是 canvas 还是 svg）, 我想它可能也需要使用相同的 dpr 逻辑。

当 engine 为默认值 canvas 时，截图里的线条是 dpr * 的状态
当 engine 为 svg 时，截图里的线条是模糊的。

使用下面的 option 可以测试 svg 或 canvas 不同 engine.

var options = {
    ......
    view: {
        engine: 'canvas', // svg
        draggable: true,
    },
    plugin: {
        screenshot: {
            background: '#ffffff'
        }
    }
};

不知你能否方便一起处理一下，不方便的话等这个 PR 合并后我来弄也 OK。谢谢！

hingq · 2024-06-08T01:56:11Z

我尝试处理一下。还有一个很奇怪的问题，当我使用vue3时，只能显示线条，无法显示对应的节点，这个问题在react里面和html的demo里面却没有遇到

modified: src/plugins/jsmind.screenshot.js modified: tests/unit/jsmind.graph.test.js

hizzgdev · 2024-06-09T07:13:45Z

测试了一下最后的这个版本，canvas engin 下截图正常了，不过截图的质量好像并没有改善，我有空再细看一下。

另外我想到 canvas 在各浏览器上是有最大尺寸限制的，在搜索引擎上可以搜到这个问题，之前有用户也提过如果一个脑图非常大的时候，导致线条显示不完整的问题（解决方案是换成 svg），我不确定使用 width * dpr 的方法会不会让实际的 max size 变得更小了，后面可以再测试一下。如果它真的对 max size 有影响的话，我觉得还是可以设置一个类似 high_dpi_enabled 这样的参数，设置为 true 时再获取 dpr, 否则保持 drp=1.

再次感谢你的贡献，我会在稍后的几天里尽快完成验证，可能会做出一些必要的修改。谢谢！

hizzgdev · 2024-06-09T07:15:26Z

我尝试处理一下。还有一个很奇怪的问题，当我使用vue3时，只能显示线条，无法显示对应的节点，这个问题在react里面和html的demo里面却没有遇到

你是说截图的时候吗？我也不是很清楚，怀疑是与异步 dom 渲染有关？或者 dom2Image 不兼容 vue3 生成的dom 的某些属性？

hingq · 2024-06-09T07:55:51Z

关于图片质量的问题，我在本地测试没有发现太大的图片质量问题，由于只优化了线条，且因为画布放大的问题，导致最后的想要把图放进去，视角看起来抬高了，有可能是这个引起的。关于最大尺寸限制的问题，dpr*width实际就是对画布有放缩，它会改变画布本身的宽高，但css属性的宽高不做变化。可以肯定的是，maxSize的值不会因为放缩改变，我觉得可以把dpr作为一种可选配置，它更多的是给予美观。

…

________________________________ From: ***@***.*** ***@***.***> on behalf of Zhigang Zhang ***@***.***> Sent: Sunday, June 9, 2024 00:14 To: hizzgdev/jsmind ***@***.***> Cc: hingq ***@***.***>; Mention ***@***.***> Subject: Re: [hizzgdev/jsmind] He mind (PR #611) 测试了一下最后的这个版本，canvas engin 下截图正常了，不过截图的质量好像并没有改善，我有空再细看一下。另外我想到 canvas 在各浏览器上是有最大尺寸限制的，在搜索引擎上可以搜到这个问题，之前有用户也提过如果一个脑图非常大的时候，导致线条显示不完整的问题（解决方案是换成 svg），我不确定使用 width * dpr 的方法会不会让实际的 max size 变得更小了，后面可以再测试一下。如果它真的对 max size 有影响的话，我觉得还是可以设置一个类似 high_dpi_enabled 这样的参数，设置为 true 时再获取 dpr, 否则保持 drp=1. 再次感谢你的贡献，我会在稍后的几天里尽快完成验证，可能会做出一些必要的修改。谢谢！ ― Reply to this email directly, view it on GitHub<#611 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AXKKCMWONLG3K5WRFUI6Q3TZGP6EBAVCNFSM6AAAAABI6W2A22VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJWGM3DANZZGI>. You are receiving this because you were mentioned.

hizzgdev · 2024-06-11T15:39:18Z

Hi @hingq 我写了段简单的html验证了一下，如果不使用 hdr, 则在 chrome 浏览器下，可将 canvas 的 width/height 设置到 16000/16000, 如果使用了 hdr (dpr=2)，width/height 到 9000 时 canvas 就画不出来了。

这是测试代码（点击展开）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas test</title>
</head>
<body>

<div style="position: fixed; top:0; left:0;">
<label for="canvasWidth">Canvas size: </label>
<input type="number" id="canvasWidth" value="9000"> * <input type="number" id="canvasHeight" value="9000">
HDR enabled: <input type="checkbox" id="hdr" value="1">
<button id="drawButton">Test</button>
</div>
<div id="canvasContainer" style="margin-top: 40px;"></div>

<script>
function testCanvas(){
    var canvasContainer = document.getElementById('canvasContainer');

    var cw = parseInt(document.getElementById('canvasWidth').value, 10);
    var ch = parseInt(document.getElementById('canvasHeight').value, 10);
    var hdr = document.getElementById('hdr').checked;
    var dpr = hdr?window.devicePixelRatio:1;
    drawPoint(canvasContainer, cw, ch, dpr)
}

function drawPoint(container, cw, ch, dpr){
    container.innerHTML = '';
    var canvas = document.createElement('canvas');
    canvas.width = cw * dpr;
    canvas.height = ch * dpr;
    canvas.style.width = cw+'px';
    canvas.style.height = ch+'px';
    canvasContainer.appendChild(canvas);

    var ctx = canvas.getContext('2d');
    if(dpr!=1){
        ctx.scale(dpr, dpr)
    }

    for (var i = 0; i < cw; i+=100) {
        for (var j = 0; j < ch; j+=100) {
            ctx.fillStyle = 'black';
            ctx.fillRect(i, j, 5, 5);
            ctx.font = '12px Arial';
            ctx.fillText('(' + i + ',' + j + ')', i + 10, j + 10);
        }
    }
}

document.getElementById('drawButton').addEventListener('click', testCanvas);

</script>

</body>
</html>

hizzgdev · 2024-06-11T15:43:06Z

基于这个情况，我会添加一个 option 用于启用 devicePixelRatio，并且默认不开启，以避免对用户的线上产品造成影响（设想用户的脑图非常大，本来还能正常显示脑图，但升级了 jsMind 之后，突然就不能使用了）。

hingq · 2024-06-12T00:40:47Z

不能画出来的原因应该是9000*dpr已经超过了浏览器最大限制。还有一种方法，我认为可以jsmind本身限制最大宽度，或者是当width超过一定值，自动关闭。若一个脑图已经非常大了，那可能这时候美观已经很难兼顾了。

…

________________________________ From: ***@***.*** ***@***.***> on behalf of Zhigang Zhang ***@***.***> Sent: Tuesday, June 11, 2024 08:43 To: hizzgdev/jsmind ***@***.***> Cc: hingq ***@***.***>; Mention ***@***.***> Subject: Re: [hizzgdev/jsmind] He mind (PR #611) 基于这个情况，我会添加一个 option 用于启用 devicePixelRatio，并且默认不开启，以避免对用户的线上产品造成影响（设想用户的脑图非常大，本来还能正常显示脑图，但升级了 jsMind 之后，突然就不能使用了）。 ― Reply to this email directly, view it on GitHub<#611 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AXKKCMRABMVQ67YYLCSDX2DZG4LKBAVCNFSM6AAAAABI6W2A22VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRRGA4DEMRQGY>. You are receiving this because you were mentioned.

hizzgdev · 2024-06-12T16:25:05Z

代码已合并，待完善文档后发布新版本。再次感谢！ @hingq

hingq added 3 commits June 7, 2024 16:25

fix the blur of the line when use canvas

e04f778

fix the blur of ine when using canvas

e09b2b1

fix the blur of line when using canvas

d2a3737

hizzgdev reviewed Jun 8, 2024

View reviewed changes

modified: src/jsmind.graph.js

b6fe6d6

modified: src/plugins/jsmind.screenshot.js modified: tests/unit/jsmind.graph.test.js

hizzgdev merged commit b6fe6d6 into hizzgdev:master Jun 12, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

He mind #611

He mind #611

hingq commented Jun 7, 2024

hizzgdev left a comment

hizzgdev Jun 8, 2024

hingq Jun 8, 2024

hizzgdev Jun 8, 2024

hizzgdev Jun 8, 2024

hingq Jun 8, 2024

hizzgdev Jun 8, 2024

hingq Jun 8, 2024

hingq commented Jun 8, 2024

hizzgdev commented Jun 8, 2024

hingq commented Jun 8, 2024

hizzgdev commented Jun 9, 2024

hizzgdev commented Jun 9, 2024

hingq commented Jun 9, 2024 via email

hizzgdev commented Jun 11, 2024

hizzgdev commented Jun 11, 2024

hingq commented Jun 12, 2024 via email

hizzgdev commented Jun 12, 2024

He mind #611

He mind #611

Conversation

hingq commented Jun 7, 2024

hizzgdev left a comment

Choose a reason for hiding this comment

hizzgdev Jun 8, 2024

Choose a reason for hiding this comment

hingq Jun 8, 2024

Choose a reason for hiding this comment

hizzgdev Jun 8, 2024

Choose a reason for hiding this comment

hizzgdev Jun 8, 2024

Choose a reason for hiding this comment

hingq Jun 8, 2024

Choose a reason for hiding this comment

hizzgdev Jun 8, 2024

Choose a reason for hiding this comment

hingq Jun 8, 2024

Choose a reason for hiding this comment

hingq commented Jun 8, 2024

hizzgdev commented Jun 8, 2024

hingq commented Jun 8, 2024

hizzgdev commented Jun 9, 2024

hizzgdev commented Jun 9, 2024

hingq commented Jun 9, 2024 via email

hizzgdev commented Jun 11, 2024

hizzgdev commented Jun 11, 2024

hingq commented Jun 12, 2024 via email

hizzgdev commented Jun 12, 2024