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

Question

我尝试使用fabricjs实现图像缩放。我的要求：在不改变边框尺寸的情况下缩放图像的内容（不缩放图像）。

这是我的代码：jsfiddle.net/63twbox/11/

按照这种方式，我需要矩形的objectCaching设置为false。但是它在移动图像时会导致严重的性能问题。所以我在缩放模式下将objectCaching设置为false，在其他模式下设置为true。然后我得到另一个问题，在缩放图像后，将true和false之间的objectCaching更改为图像内容。

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

Answer 1

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

您的解决方案涉及在新画布上创建一个模式。与缓存

画布 模式创造 平局矩形 画布创作 平局图像这是一个简单的解决方案，不涉及图案或缓存。

它包括在重写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>