[GitHub] [incubator-echarts] zhanfang commented on issue #11369: 太长的图表,使用折线图显示不完整

[GitBox <gi...@apache.org>]

zhanfang commented on issue #11369: 太长的图表,使用折线图显示不完整
URL: https://github.com/apache/incubator-echarts/issues/11369#issuecomment-596338173
 
 
   @Archieeeeee 此问题看起来是一个 chrome 浏览器的 bug，以下有一段代码，在 chrome 和 safari 表现情况不一样，理论上最后连线应该与矩形边框相交，但在 chrome 下会被截断
   ```html
           <canvas id="canvas" width="19602" height="1378" style="position: absolute; left: 0px; top: 0px; width: 9801px; height: 689px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
           <script>
               var points = [[980,0],[8820,274]];
               var canvas = document.getElementById("canvas");
               var context = canvas.getContext("2d");//得到绘图的上下文环境
               context.beginPath();
               context.setTransform(2, 0, 0, 2, 0, 0);
               context.rect(980.1, 0, 7839.9, 274);
               // 以下代码打开即为正常
               // context.rect(980, 0, 7840, 274);
               context.clip();
               context.moveTo(points[0][0], points[0][1]);
               for (let i = 1; i < points.length; i++) {
                   const element = points[i];
                   context.lineTo(element[0], element[1]);
               }
               context.strokeStyle = "black";
               context.stroke();
           </script>
   ```

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org