Question

我尝试使用fabricjs实现图像缩放。我的要求：缩放图像内容而不改变边框大小（不缩放图像）。

按照这种方式我需要将rect的objectCaching设置为false。但它在运动图像时会导致严重的性能问题。所以我在缩放模式下将objectCaching设置为false，在其他模式下设置为true。然后我又遇到了另一个问题，即在缩放图像后，在true和false之间更改objectCaching会使图像内容发生变化。

如何在更改objectCaching时保持图像内容相同？

Answer 1

您选择将图像显示为缩放的方式非常繁重。有更快的方法不需要所有这些图纸。

您的解决方案涉及在新画布上创建模式。画布创作在画布上绘制图像模式创作用缓存绘制rect

这是一个更简单的解决方案，不涉及模式或缓存。

它包括重写fabric.Image渲染方法，使用自定义zoomLevel属性和ctx.drawImage（）的完整签名来表现不同

fabric.Image.prototype._render = function(ctx) {
  var fwidth = this._element.width / (this.zoomLevel + 1);
  var fheight = this._element.height / (this.zoomLevel + 1);
  var wdiff = (fwidth - this._element.width) / 2;
  var hdiff = (fheight - this._element.height) / 2;
  ctx.drawImage(this._element, -wdiff, -hdiff, fwidth, fheight, -this.width/2, - this.height/2, this.width, this.height);
}
      var canvas = this.__canvas = new fabric.Canvas('c');
      fabric.Image.fromURL("https://images2.alphacoders.com/147/147320.png", function(img) {
        var zoomLevel = 0;
        var zoomLevelMin = 0;
        var zoomLevelMax = 3;
        img.zoomLevel = 0
        img.scale(0.1);

        canvas.add(img);
        
        img.zoomIn = function() {
          if (zoomLevel < zoomLevelMax) {
            zoomLevel += 0.1;
            img.zoomLevel = zoomLevel;
          }
        };


        img.zoomOut = function() {
          zoomLevel -= 0.1;
          if (zoomLevel < 0) zoomLevel = 0;
          if (zoomLevel >= zoomLevelMin) {
            img.zoomLevel = zoomLevel;
          }
        };

      });

      canvas.on('mouse:wheel', function(option) {
        var imgObj = canvas.getActiveObject();
        if (!imgObj) return;
        option.e.preventDefault();
        if (option.e.deltaY > 0) {
          imgObj.zoomOut();
        } else {
          imgObj.zoomIn();
        }
        canvas.renderAll();
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.js"></script>
<h1> FabricJS imageHelper</h1>
<div id="canvasContainer">
  <canvas id="c" width="1920" height="600"></canvas>
</div>
<br>

Fabricjs objectCaching：缩放图像内容，保持图像边框

1 个答案: