2

我看过这篇文章并尝试仅使用 X 缩放来完成我自己的功能。

fabric.Object.prototype.transform = function (ctx){
      var m;
      if (this.group && !this.group._transformDone) {
        m = this.calcTransformMatrix();
        ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
        return;
      }
      else {
        m = this.calcOwnMatrix();
        //code I've wrote
        if (this.my && this.my.ignoreZoom != undefined && this.my.ignoreZoom){
            var scaleX = 1.0 / this.canvas.viewportTransform[0];
            ctx.transform(scaleX, 0, 0, 1, m[4] - 0.5, 0);
            ctx.transform(m[0], m[1], m[2], m[3], 1, m[5]);
        }
        //end of custom code
        else{
          ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
        }
      }
}

唯一的问题是对象变换是从中心开始的。这意味着如果我有一个正方形10 * 10 pixels和缩放left = 0，top = 0我不会有任何问题，zoom = 1但是当我增加缩放时让我们说 2。我的对象仍然从 0 开始，但我的对象出现在我的20 * 10选择中间。

fabric.Object.prototype.transform = function (ctx){
          var m;
          if (this.group && !this.group._transformDone) {
            m = this.calcTransformMatrix();
            ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
            return;
          }
          else {
            m = this.calcOwnMatrix();
            if (this.ignoreZoom){
                var zoomX = 1.0 / this.canvas.viewportTransform[0];
                ctx.transform(zoomX, 0, 0, 1, m[4] - 0.5, 0);
                ctx.transform(m[0], m[1], m[2], m[3], 1, m[5]);
            }
            else if (this.ignoreZoomHLine){
                var zoomX = 1.0 / this.canvas.viewportTransform[0];
                ctx.transform(zoomX, 0, 0, 1, m[4], 0);
                ctx.transform(m[0], m[1], m[2], m[3], 1, m[5]);
            }
            else{
              ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
            }
          }
}
var canvas = new fabric.Canvas('c') ;

var line1 = new fabric.Line([0, 5, 20, 15],{
  strokeWidth: 1,
  stroke: 'black',
  ignoreZoomHLine: true
});

var line2 = new fabric.Line([0, 0, 0, 50],{
  strokeWidth: 1,
  stroke: 'black',
  ignoreZoom: true
});

canvas.add(line1, line2) ;
$('#zoomIn').click(function(){
        var vpt = canvas.viewportTransform;
        var scaleX = vpt[0] + 1;
        canvas.setViewportTransform([scaleX, 0, 0, 1, 0, 0]);
    }) ;
    
$('#zoomOut').click(function(){
        var vpt = canvas.viewportTransform;
        var scaleX = (vpt[0] - 1) < 1 ? 1 : vpt[0] - 1; 
        canvas.setViewportTransform([scaleX, 0, 0, 1, 0, 0]) ;
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js" integrity="sha256-tzYSKRkV1Ga9YrVBiNHG44eEQyRcwtNrqOMh2+CTlec=" crossorigin="anonymous"></script>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
<div id="canvasContainer">
    <canvas id="c" width="400" height="400"></canvas>
</div>

这个片段不言自明。一开始所有的行都连接在一起。但变换后对象被分离。

任何帮助是极大的赞赏

4

0 回答 0