You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/11/16 07:47:42 UTC

[GitHub] hcgit9527 commented on issue #9417: 请问echarts滚轮缩放时,如何同时缩放背景图片呢?求解答

hcgit9527 commented on issue #9417: 请问echarts滚轮缩放时,如何同时缩放背景图片呢?求解答
URL: https://github.com/apache/incubator-echarts/issues/9417#issuecomment-439309479
 
 
   > ```
   >     //添加背景
   >     var img = new Image();
   >     var canvas = document.createElement('canvas');
   >     var ctx = canvas.getContext('2d');
   >     canvas.width = myChart.getWidth() * window.devicePixelRatio;
   >     canvas.height = myChart.getHeight() * window.devicePixelRatio;
   > 
   >     //背景
   >     var fullImage = new Image();
   >     var scale = 4.8;//初始缩放比例
   > 
   >     img.onload = function () {
   >         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   >         
   >         /////网格背景
   >         ctx.clearRect(0, 0, canvas.width, canvas.height);
   >         ctx.scale(scale, scale);
   >         ctx.strokeStyle = "#333";
   >         ctx.lineWidth = 0.1;
   >         ctx.translate(17, 25);
   >         var startx = -2 * scale;
   >         var starty = -2 * scale;
   >         var endcanvas = canvas.width + startx;
   >         var endheight = canvas.height + starty;
   >         for (var x = startx; x < endcanvas; x += 2 * scale) {
   >             for (var y = starty; y < endheight; y += 2 * scale) {
   >                 ctx.beginPath();
   >                 ctx.moveTo(x - 0.15 * scale, y);
   >                 ctx.lineTo(x + 0.15 * scale, y);
   >                 ctx.moveTo(x, y - 0.15 * scale);
   >                 ctx.lineTo(x, y + 0.15 * scale);
   >                 ctx.closePath();
   >                 ctx.stroke();
   >             }
   >         }
   > 
   >         fullImage.src = canvas.toDataURL();
   >         setTimeout(function () {
   >             myChart.resize();
   >         }, 100)
   >     };
   >     img.src = "jz.svg";
   > ```
   > 为图表画了网格背景 ,如何滚轮缩放数据层的时候 背景也缩放
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on 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: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org