Re: [I] [Bug] The legend is blurry in svg rendering mode [echarts]
yukiyukixing commented on issue #19583: URL: https://github.com/apache/echarts/issues/19583#issuecomment-1963857036 是的，我认为zrender中的那个地方应该四舍五入，整数不会导致模糊，也就不存在抗锯齿了。 Yes, I think there should be rounding at that point in zrender, integers don't cause blurring and there is no anti-aliasing. -- 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-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org - To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
Re: [I] [Bug] The legend is blurry in svg rendering mode [echarts]
Ovilia commented on issue #19583: URL: https://github.com/apache/echarts/issues/19583#issuecomment-1963506905 Do you mean we should round values into integers? I think the blurring maybe serve as anti-aliasing in this case. -- 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-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org - To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
Re: [I] [Bug] The legend is blurry in svg rendering mode [echarts]
Ovilia commented on issue #19583: URL: https://github.com/apache/echarts/issues/19583#issuecomment-1926378455 Does this only happen on `translate`? I'm not sure whether we could round this because some elements may be expected to display using decimals, e.g., if we want to display accurate height for bar series. -- 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-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org - To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
Re: [I] [Bug] The legend is blurry in svg rendering mode [echarts]
yukiyukixing commented on issue #19583: URL: https://github.com/apache/echarts/issues/19583#issuecomment-1925657059  If you look carefully at this legend, you will find that the edges of the legend icon in the vertical direction are blurred, both on the upper and lower edges. The upper edge can be seen more clearly. If you look carefully, you should be able to find that the reason for the blur is as I mentioned above, because the decimal reason. The image below is the correct one, with clear edges. Comparing it should help you notice the difference:  -- 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-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org - To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
Re: [I] [Bug] The legend is blurry in svg rendering mode [echarts]
Ovilia commented on issue #19583: URL: https://github.com/apache/echarts/issues/19583#issuecomment-1925589057 Can you provide a screenshot where legend is clearly to be blurry? Because I don't find it so with SVG renderer. -- 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-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org - To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
Re: [I] [Bug] The legend is blurry in svg rendering mode [echarts]
yukiyukixing commented on issue #19583:
URL: https://github.com/apache/echarts/issues/19583#issuecomment-1922778138
The current temporary solution is to listen to the `rendered` event and
change the translate value in the path tag to an integer. It seems that there
is no problem in temporary use:
function dealPath() {
// 获取所有path元素
const paths = document.querySelectorAll("path");
// 遍历每个path元素
paths.forEach(function (path) {
// 获取当前元素的transform属性
const transform = path.getAttribute("transform");
// 检查transform属性是否包含translate函数
if (transform && transform.includes("translate")) {
// 使用正则表达式提取translate中的数字
const matches = transform.match(/translate\(([^)]+)\)/);
if (matches && matches[1]) {
// 将提取的值分割成数组，并进行四舍五入
const values = matches[1].split(" ").map(function (value) {
return Math.round(parseFloat(value));
});
// 构造新的translate函数，并更新transform属性
const newTransform = "translate(" + values.join(" ") + ")";
path.setAttribute("transform", newTransform);
}
}
});
}
myChart.off('rendered');
myChart.on('rendered', function (event) {
dealPath();
});
--
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-unsubscr...@echarts.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
[I] [Bug] The legend is blurry in svg rendering mode [echarts]
yukiyukixing opened a new issue, #19583:
URL: https://github.com/apache/echarts/issues/19583
### Version
5.4.3
### Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?c=bar-simple=svg=PYBwLglsB2AEC8sDeAoW7YCIDGwA2wATpgFywDaaG1mAxAKwCMAggGwCirmANFdenXYAOegBEAnADFMfWAF1eNMMHyQQpZLOoBnABbAA7mQBmAQzzaAprIC-ijJjyWA5pegATDan4OARsDBlAFsNAAZ7H0wIXGgNTEJgAFcPACVLbDAeLQcIMEsggHUIdzBdDUYAFgj-KLyggAlLCGddTLJK6ppc_IBxU3UyACYq22rMZ0Jir2yBZQHYcJmsf0DgELIAZkWfASdjNthGQc6HSZaD4ZOBGLBTCGgAGVNfSzwNMEJE62o7WUwAD2Y_wg2mmOywYAAniBLHEAG7mL5ZH5jSFAkFgnaYKEwuLYUx5ZxESHIrHuAmmDSUcE0QCeGYA7t0YpJpWAZg2Z_Dkoz-VkmllBZGpO28LKw0FMQVhZEwgHBjQDgFoxFUqmVcajipctTMRVTRtLdsABrOLKW5vHUOPDPV6Y0UOPSGDRmCzfUW_W2YXxaoolMrtVjmgTk25UpbgkW2yLiyVxBkq0OizAIvBIsihAB09AA7KF6PGfG6I-hw4WHFGNZg2RyS1gkymFmmKkI8_wbM2ueCCz5i-DMGW4vL2QGIdDy57tc3MHrTIbjQFzFWsZaXm8yN2E_aDI7zFZm52aR6vcVSuV_ROg5TBc3qGvC72JeXYwvb7WNemKoNxLnq3vbTeI3fo2lSshx7F8wgzQYrwwVtbXbHYYIwLkbCAA
### Steps to Reproduce
option = {
"color": [
"#51A6E6",
"#E85D9F"
],
"tooltip": {
show: false
},
"legend": {
"bottom": 0,
"icon": "roundRect",
"itemWidth": 14,
"itemHeight": 14,
"itemGap": 24,
},
"grid": {
"top": 0,
"bottom": 30,
"left": 12,
"right": 24,
"containLabel": true
},
"xAxis": {
"type": "value",
},
"yAxis": {
"type": "category",
"data": [
"项目1",
"项目2",
]
},
"series": [
{
"name": "指标111",
"type": "bar",
"stack": "total",
"label": {
"show": false
},
"barWidth": 16,
"data": [
{
"name": "项目1",
"value": 0.5705
},
{
"name": "项目2",
"value": 0.48
}
]
},
{
"name": "指标2",
"type": "bar",
"stack": "total",
"label": {
"show": false
},
"barWidth": 16,
"data": [
{
"name": "项目1",
"value": 0.4295
},
{
"name": "项目2",
"value": 0.52
}
]
}
]
}
### Current Behavior
When the legend renders the path tag with transform="translate(x y)", if x
or y is not an integer, it will be blurred in the corresponding direction. The
reason for the blur is: when there are decimals, part of the graphic may be
located in one pixel. in the middle, causing the browser to anti-alias these
boundaries, resulting in blurring. The reason why this value is a decimal is
that when rendering in zrender, the entire data is not placed in the round()
method.
Should this code be: `translate(${round(m[4] * mul / mul)} ${round(m[5] *
mul / mul)})` Put the entire `m[4] * mul / mul` into the round() method
### Expected Behavior
The desired behavior is that these legends are clear and not blurry.
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
Should that part of the zrender source code be modified? If it cannot be
modified, what is the reason?
--
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-unsubscr...@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
