Fabric.js对象缓存:缩放图像内容，保持图像边框 [英] Fabricjs objectCaching: zoom image content, keep image border

问题描述

我尝试使用fabricjs实现图像缩放.我的要求:在不更改边框大小的情况下缩放图像的内容(不缩放图像).

I try to implement image zooming with fabricjs. My requirement: zooming content of image without changing border size (not scaling image).

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

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

Follow this way I need to set objectCaching of rect to false. But It cause the heavy performance problem when moving image. So I set objectCaching to false in zoom mode and true in other modes. Then I got another problem that after zooming image, change objectCaching between true and false make the content of image changed.

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

How to keep image content same when changing objectCaching ?

推荐答案

您选择以缩放方式显示图像的方式非常繁琐.有更快的方法不需要所有这些图纸.

The way you chose to display the image as zoomed is very heavy. There are faster way that do not require all this drawings.

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

You solution involves create a pattern on a new canvas. Canvas creation draw image on the canvas pattern creation draw rect with cache

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

This is a simpler solution that does not involve patterns or caching.

它包括重写fabric.Image渲染方法，以使用自定义zoomLevel属性和ctx.drawImage()的完整签名来改变行为

It consist in rewriting the fabric.Image render method to behave differently using a custom zoomLevel property and the full signature of 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>

这篇关于Fabric.js对象缓存:缩放图像内容，保持图像边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！