zrender放大后画图求原坐标

原创于 2018-10-16 20:30:00 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

本文探讨了使用ZRender库进行图形缩放与点击事件处理的技术细节。具体讲解了如何在缩放后准确获取点击位置的原始坐标，并在再次缩放时保持点击点的位置不变。通过代码实例展示了如何实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//zoom  放大倍数
zr.on("click", function (e) {
原X坐标 = e.offsetX/zoom + (Math.abs(e.target.transform[4])/zoom);
原Y坐标 = e.offsetY/zoom + (Math.abs(e.target.transform[5])/zoom);
 e.offsetX = e.offsetX/zoomx;
 e.offsetY =  e.offsetY/zoomx;
 var circle = new zrender.Circle({
         shape: {
                  cx: e.offsetX,
                  cy:  e.offsetY,
                  r: 3
                },
        xy:[原X坐标,原Y坐标],
        scale:[zoom,zoom],
    });
     circleGroup.add(circle);
     zr.add(circleGroup);
  zr.on("mousewheel", function (e) {
        zoom++;
        circleGroup.eachChild(function (circle) {
             circle.attr({
                    scale: [zoomx, zoomx],
                    origin: [e.offsetX, e.offsetY],
                    shape:{
                        cx:circle.xy[0],
                        cy:circle.xy[1],
                        r:3
                    }
                })
            
        })
    })
})

以上代码并不是完整的。

zrender通过scale放大后，再点点需要先算出原坐标存起来，然后点的点的坐标是除以放大倍数后的坐标，再放大缩小的时候把原坐标覆盖当时点的坐标。