canvas基于鼠标坐标点缩放怎么实现呢？

张仪ranck

4102663

发布于
2021-11-11

canvas基于鼠标坐标点缩放怎么实现呢？
canvas的自带缩放api，但是这个是基于坐标原点的缩放，
如果需要缩放基于鼠标点，有什么好的思路呢

javascript canvas

阅读 4.9k

3 个回答

参考fabric基于点缩放的一些实现（static_canvas.prototype.zoomToPoint），可以参考下.
point就是你的缩放中心点，value就是缩放值，viewportTransform就是对应canvas的transform的值

/**
     * Sets zoom level of this canvas instance, zoom centered around point
     * @param {fabric.Point} point to zoom with respect to
     * @param {Number} value to set zoom to, less than 1 zooms out
     * @return {fabric.Canvas} instance
     * @chainable true
     */
    zoomToPoint: function (point, value) {
      // TODO: just change the scale, preserve other transformations
      var before = point, vpt = this.viewportTransform.slice(0);
      point = transformPoint(point, invertTransform(this.viewportTransform));
      vpt[0] = value;
      vpt[3] = value;
      var after = transformPoint(point, vpt);
      vpt[4] += before.x - after.x;
      vpt[5] += before.y - after.y;
      return this.setViewportTransform(vpt);
    }