Fabricjs objectCaching：缩放图片内容，保持图片边框答案

【问题标题】：Fabricjs objectCaching: zoom image content, keep image borderFabricjs objectCaching：缩放图片内容，保持图片边框
【发布时间】：2018-01-26 03:52:40
【问题描述】：

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

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

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

改变objectCaching时如何保持图片内容不变？

【问题讨论】：

标签： javascript image zooming fabricjs

【解决方案1】：

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

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

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

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

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>

【讨论】：

它不能解决我的问题。但它比我的实现更简单、更快。伟大的！非常感谢@AndreaBogazzi。
所以我可能没有得到你的问题。你能解释得更好吗？
谢谢，我发现这非常有用。只是想问一下，放大后是否可以平移图像。任何想法。如何。特别是使用 shift 或中键。这将使其非常适合快速构图。
我认为使用最新的面料，您可以使用应该做到这一点的裁剪功能。允许您选择图像的一部分。