You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/04/28 13:01:13 UTC
[GitHub] [echarts] weimanzhou opened a new issue, #16960: [Bug] 使用series[type='graph']时，line绘制错位
weimanzhou opened a new issue, #16960:
URL: https://github.com/apache/echarts/issues/16960
### Version
5.3.2
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
```js
var datagj = [
{ name: 'b', x: 1.0126060652291597, y: 1.54027634354167202 },
{ name: 'c', x: 1.026060652291597, y: 3.64027634354167202 }
];
var links = datagj.map(function (item, i) {
return {
source: i,
target: i + 1
};
});
links.pop();
option = {
series: [
{
type: 'graph',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: 10,
data: datagj,
links: links,
lineStyle: {
normal: {
color: 'red',
width: 9
}
},
animationDelay: function (idx) {
return idx * 1000;
}
}
]
};
```
### Current Behavior
### Expected Behavior
当设置 `option.series.lineStyle.normal.width` 为偶数时，效果正确，当设置 `option.series.lineStyle.normal.width` 为奇数时，效果错误
### Environment
```markdown
使用的环境是`echarts`示例：https://echarts.apache.org/examples/zh/editor.html?c=line-simple&version=5.3.2
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] linghaoSu commented on issue #16960: [Bug] 使用series[type='graph']时，line绘制错位
Posted by GitBox <gi...@apache.org>.
linghaoSu commented on issue #16960:
URL: https://github.com/apache/echarts/issues/16960#issuecomment-1114250330
你所有的点的 x y 坐标都 * 100 就好了，也无需担心尺寸超出边界，反正都是自适应撑满整个绘图空间的。
<details>
<summary>这个问题是 `subPixelOptimize` 与 graph 图表的自适应共同引发的。</summary>
<p>
由于你的 边 的两点的坐标十分接近，同时由于 graph 图表的特殊性，它会将图内的节点尽可能的展示到屏幕上，同时又设置了 边与点 免于缩放，如果只是这样倒是没什么问题。
但由于 echarts 在该图中产生的 line 实例默认开启了 子像素渲染优化 的特性（并且我没找到配置能关掉的方法）。
子像素优化的逻辑如下
`(1.01, 1.54), (1.02, 3.64)`
当 lineWidth 为 奇数 时，逻辑如下（以 11 为例）：
```
doubleP = Math.round(1.2 * 2); // 2
lineWidth = Math.round(11); // 11
(doubleP+ lineWidth) % 2 === 0? doubleP / 2 : (doubleP + 1) / 2; // 1.5
```
所以 你的连线的起止坐标点就变成了 `(1.5, 1.54) (1.5, 3.64)`;
现在与原本的 1.02 的位置差了带盖 0.48 个像素，但是由于缩放适应到整个屏幕，也就出现了缩放倍数，假设你的显示的区域时 800*800 的尺寸，那缩放的倍数就到了 300 左右，也就是这 0.48 像素的偏差，就变成了 144 像素的偏差。
（PS：你以为的 偶数正常其实不太正常，偶数的时候是变成了 `(1, 1.54),(1, 3.64)` , 也有 0.02 像素的偏差，在 300 倍的比例下，恰好是 6 个像素，看起来不那么明显，但也会有些错位，但比起 144 来说又显得正常了许多
</p>
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] weimanzhou closed issue #16960: [Bug] 使用series[type='graph']时，line绘制错位
Posted by GitBox <gi...@apache.org>.
weimanzhou closed issue #16960: [Bug] 使用series[type='graph']时，line绘制错位
URL: https://github.com/apache/echarts/issues/16960
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] linghaoSu commented on issue #16960: [Bug] 使用series[type='graph']时，line绘制错位
Posted by GitBox <gi...@apache.org>.
linghaoSu commented on issue #16960:
URL: https://github.com/apache/echarts/issues/16960#issuecomment-1114371810
> 这块代码中，`1.2`是从哪里得出的呢？没看出来是如何计算的，还是说固定的呢？
不是。。。这是我一开始随便写的例子`(1.2, 1),(1, 3)`，后来换成了你的示例中的点的位置，但是代码那块忘记换了 🤪，数据的来源是坐标
具体的代码在[这里](https://github.com/ecomfe/zrender/blob/master/src/graphic/helper/subPixelOptimize.ts#L32)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #16960: [Bug] 使用series[type='graph']时，line绘制错位
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #16960:
URL: https://github.com/apache/echarts/issues/16960#issuecomment-1112174853
@weimanzhou It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Bug] When using series[type='graph'], the line drawing is dislocated
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] weimanzhou commented on issue #16960: [Bug] 使用series[type='graph']时，line绘制错位
Posted by GitBox <gi...@apache.org>.
weimanzhou commented on issue #16960:
URL: https://github.com/apache/echarts/issues/16960#issuecomment-1114443702
>
懂了。去阅读了一下代码，逻辑更加清晰了，再次感谢你的回答。
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] weimanzhou commented on issue #16960: [Bug] 使用series[type='graph']时，line绘制错位
Posted by GitBox <gi...@apache.org>.
weimanzhou commented on issue #16960:
URL: https://github.com/apache/echarts/issues/16960#issuecomment-1114266965
> 你所有的点的 x y 坐标都 * 100 就好了，也无需担心尺寸超出边界，反正都是自适应撑满整个绘图空间的。
>
> 这个问题是 `subPixelOptimize` 与 graph 图表的自适应共同引发的。
> 由于你的 边 的两点的坐标十分接近，同时由于 graph 图表的特殊性，它会将图内的节点尽可能的展示到屏幕上，同时又设置了 边与点 免于缩放，如果只是这样倒是没什么问题。
>
> 但由于 echarts 在该图中产生的 line 实例默认开启了 子像素渲染优化 的特性（并且我没找到配置能关掉的方法）。
>
> 子像素优化的逻辑如下 `(1.01, 1.54), (1.02, 3.64)`
>
> 当 lineWidth 为 奇数 时，逻辑如下（以 11 为例）：
>
> ```
> doubleP = Math.round(1.2 * 2); // 2
> lineWidth = Math.round(11); // 11
> (doubleP+ lineWidth) % 2 === 0? doubleP / 2 : (doubleP + 1) / 2; // 1.5
> ```
>
> 所以 你的连线的起止坐标点就变成了 `(1.5, 1.54) (1.5, 3.64)`;
>
> 现在与原本的 1.02 的位置差了带盖 0.48 个像素，但是由于缩放适应到整个屏幕，也就出现了缩放倍数，假设你的显示的区域时 800*800 的尺寸，那缩放的倍数就到了 300 左右，也就是这 0.48 像素的偏差，就变成了 144 像素的偏差。
>
> （PS：你以为的 偶数正常其实不太正常，偶数的时候是变成了 `(1, 1.54),(1, 3.64)` , 也有 0.02 像素的偏差，在 300 倍的比例下，恰好是 6 个像素，看起来不那么明显，但也会有些错位，但比起 144 来说又显得正常了许多
确实偶数的时候绘制的线也没有跟起始，终止形状对齐（PS：由于奇数情况造成的视觉效果，忽略了偶数情况下的错误），现在理解了。按照你的提示，刚刚修改了一下数据（将数据都改为之前的100倍，效果看起来就好了），感谢你的回答！！！
不过还没有理解的就是在
> ```
> doubleP = Math.round(1.2 * 2); // 2
> lineWidth = Math.round(11); // 11
> (doubleP+ lineWidth) % 2 === 0? doubleP / 2 : (doubleP + 1) / 2; // 1.5
> ```
这块代码中，`1.2`是从哪里得出的呢？没看出来是如何计算的，还是说固定的呢？
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org