Fabricjs objectCaching：画像の境界線を維持して画像の境界線を維持する

Question

fabricjsで画像の拡大を実装しようとしています。私の要件：境界線のサイズを変更することなく画像の内容を拡大します（拡大縮小画像ではありません）。

これは私のコードです：jsfiddle.net/63twbox/11/

は、私がfalseに矩形のobjectCachingを設定する必要があり、このように従ってください。しかし、動画を再生するとパフォーマンスが低下します。だから、ズームモードではobjectCachingをfalseに設定し、他のモードではtrueに設定します。次に、画像をズームした後、objectCachingをtrueとfalseの間で変更すると、画像の内容が変更されるという別の問題が発生しました。

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>