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/09/20 10:54:02 UTC

[GitHub] [echarts] JinJianQi opened a new issue, #17676: [Bug] The width (graphic text).getBoundingRect(). is not correct.

JinJianQi opened a new issue, #17676:
URL: https://github.com/apache/echarts/issues/17676

   ### Version
   
   5.3.3
   
   ### Link to Minimal Reproduction
   
   _No response_
   
   ### Steps to Reproduce
   
   - Use this to get a Text graphic:
   ```
   new echarts.graphic.Text({
       style: api.style({
         overflow: 'truncate',
         backgroundColor: 'red',
         text: 'some text here',
         textFill: '#fff',
         fontWeight,
         fontSize,
         textAlign: 'left'
       })
     }
   ```
   <img width="138" alt="image" src="https://user-images.githubusercontent.com/33452468/191239718-fb4c1250-d180-44fb-9986-d8d8426f4b3c.png">
   
   
   - Change the attribute text to another value, such as: `----------------` or `1111111111111111111111`.
   
   - Then you can find the background color is not cover all of the node.
   
   For `----------------`:
   <img width="182" alt="image" src="https://user-images.githubusercontent.com/33452468/191239485-742e37a3-4d22-4d8e-96cb-9505de58e36b.png">
   
   For `1111111111111111111111`:
   
   <img width="249" alt="image" src="https://user-images.githubusercontent.com/33452468/191239610-a51c9082-ad79-459b-9606-d15bdcd146e7.png">
   
   
   
   
   ### Current Behavior
   
   The red background is not covered all of the Text graphic.
   
   ### Expected Behavior
   
   The red background can cover all of the Text graphic.
   
   ### Environment
   
   ```markdown
   - OS:
   - Browser:
   - Framework:
   ```
   
   
   ### 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] JinJianQi commented on issue #17676: [Bug] The width (graphic text).getBoundingRect(). is not correct.

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17676:
URL: https://github.com/apache/echarts/issues/17676#issuecomment-1252198552

   In addition, I found that in the english version, it just work fine !! So, I guess there maybe something wrong with the Chinese version?


-- 
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] JinJianQi commented on issue #17676: [Bug] The width (graphic text).getBoundingRect(). is not correct.

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17676:
URL: https://github.com/apache/echarts/issues/17676#issuecomment-1252199332

   Chinese version:
   <img width="1441" alt="image" src="https://user-images.githubusercontent.com/33452468/191243066-8c43bf6d-75f9-4c16-8ccc-59bbef201714.png">
   
   
   English version:
   
   <img width="1433" alt="image" src="https://user-images.githubusercontent.com/33452468/191243135-f1a29857-8a33-4650-b096-adb758cecc23.png">
   


-- 
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] plainheart commented on issue #17676: [Bug] The width (graphic text).getBoundingRect(). is not correct.

Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #17676:
URL: https://github.com/apache/echarts/issues/17676#issuecomment-1252256234

   I can't reproduce this behavior on my side, no matter what the language is.


-- 
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] JinJianQi commented on issue #17676: [Bug] The width (graphic text).getBoundingRect(). is not correct.

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17676:
URL: https://github.com/apache/echarts/issues/17676#issuecomment-1253490580

   I just can't reproduce on another computer. It's weird... @plainheart 


-- 
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] JinJianQi commented on issue #17676: [Bug] The width (graphic text).getBoundingRect(). is not correct.

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17676:
URL: https://github.com/apache/echarts/issues/17676#issuecomment-1252193292

   I found a quick way to reproduce.
   option:
   ```
   
   
   option = {
     title: {
       text: 'Weather Statistics'
     },
     grid: {
       left: 500
     },
     xAxis: {
     },
     yAxis: {
       type: 'category',
       inverse: true,
       data: ['Sunny', 'Cloudy', 'Showers'],
       axisLabel: {
         formatter: function (value) {
           return '{value|' + value + '-------------}';
         },
         margin: 20,
         backgroundColor: 'red',
         rich: {
           value: {
             lineHeight: 30,
             align: 'center'
           }
         }
       }
     },
     series: [
     ]
   };
   ```
   Set the option above to the Echarts web editor, such as: https://echarts.apache.org/examples/zh/editor.html?c=bar-rich-text
   
   <img width="1223" alt="image" src="https://user-images.githubusercontent.com/33452468/191241187-ffae9f39-f6c5-428f-b38b-8c418e484e60.png">
   
   
   


-- 
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] JinJianQi commented on issue #17676: [Bug] The width (graphic text).getBoundingRect(). is not correct.

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17676:
URL: https://github.com/apache/echarts/issues/17676#issuecomment-1252279749

   Could you take a screen shot please? Case I just find that there are some differences between those two examples. Such as the length of `-` is different.
   English:
   <img width="350" alt="image" src="https://user-images.githubusercontent.com/33452468/191256841-4531c0d8-c42a-4c86-95cf-50ceeb9354f2.png">
   
   Chinese:
   <img width="418" alt="image" src="https://user-images.githubusercontent.com/33452468/191256905-9c9a3596-15b9-4fa4-9e25-e18fd9e5b3b9.png">
   
   


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