FabricJS - ZoomToPoint 不适用于 backgroundImage答案

【问题标题】：FabricJS - ZoomToPoint not working with backgroundImageFabricJS - ZoomToPoint 不适用于 backgroundImage
【发布时间】：2017-07-18 03:57:45
【问题描述】：

我使用 zoomtopoint 并缩放到对象。但不适用于背景。我想放大对象和背景。我怎样才能？

示例：对象大小：100x100 不缩放。缩放后对象尺寸：100x100

缩放后网格保持不变。

缩放事件

document.addEventListener('wheel', function(event) {
        var evt = window.event || event;
        var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
        var curZoom = canvas.getZoom();
        var newZoom = curZoom + delta / 4000;
        var x = event.offsetX;
        var y = event.offsetY;
        canvas.zoomToPoint({ x: x, y: y }, newZoom);
        if(event != null)event.preventDefault();
        return false;
        canvas.calcOffset();
    }, false);

网格代码：

canvas.setBackgroundColor({source: src, repeat: 'repeat'}, canvas.renderAll.bind(canvas), function () {
        canvas.renderAll();
        proceed();
    });

编辑

#canvas-background { display: inline-block; position: absolute; top: 0; right: 0; }

但我不使用 css。

背景图片

谢谢

对不起，我英语说得不好。

【问题讨论】：

如果您指的是 canvas.style.background，那么它不是 canvas 2D API 的一部分，需要 DOM/CSS 转换。不是fabricJS所做的。您需要将背景作为对象添加到织物中，以便将其包含在缩放中
我认为您是在谈论将背景图像添加为图像对象。
是的。我不知道织物是否会让您将图像设置为可重复的，但 2D API 允许您通过位图设置图案。如果织物允许您创建图案，请使用背景位图创建图案。这样你就可以让它重复。
我试试这个代码：canvas.backgroundColor = new fabric.Pattern({source: image}) 但没有改变:(
现在我使用 setBackgroundImage()，但是现在，我不能重复 x-y 轴。

标签： javascript canvas zooming fabricjs

【解决方案1】：

相关代码如下（其余代码在 JSFiddle 中），注意画布大小和用于允许缩小的 CSS 容器技巧。

示例：对象大小：100x100 不缩放。

缩放后对象大小：100x100

缩放后和网格不再一样了。

fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) {
  var patternSourceCanvas = new fabric.StaticCanvas();
  patternSourceCanvas.add(img);
  var pattern = new fabric.Pattern({
    source: function() {
      patternSourceCanvas.setDimensions({
        width: img.getWidth(),
        height: img.getHeight()
      });
      return patternSourceCanvas.getElement();
    },
    repeat: 'repeat'
  });
  var background = new fabric.Rect({
    width: canvas.getWidth(),
    height: canvas.getHeight(),
    fill: pattern,
    selectable: false
  });
  canvas.add(background, rectangle);
  canvas.renderAll();
});

这是一个有效的 JSFiddle，https://jsfiddle.net/rekrah/86t2b8bs/。

希望这会有所帮助。

更新：

@forguta 还希望确保在运行sendToBack() 时对象不会在后台运行。将“重复”的背景图像制作成一张图像，以便可以使用setBackgroundImage()（图像大小仅增加到 64K，我确信可以进一步压缩）。

更简单的代码：

canvas.setBackgroundImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACcQAAAnECAIAAAChEWJqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMDDwYflNda9wAAIABJREFUeNrs2TGO67qWhlHSotSFm7z5z+4NoQsoXJbFs8HObYoGbJxmslYk4JfgD053/u9///............', canvas.renderAll.bind(canvas), {
  // Needed to position backgroundImage at 0/0
  originX: 'left',
  originY: 'top'
});

这是一个更新的工作 JSFiddle，https://jsfiddle.net/rekrah/u0srdsdr/。

【讨论】：

是的，我也试过了。但是我不希望后台进来getObjects()。当我使用 sendtoBack () 将我创建的对象发送到后面时，这些对象就会消失。如果您对此有意见，我可以使用它。再次感谢您的帮助，@TimHarker。 :)
@forguta 我在上面更新了我的答案。我相信这是您最简单的选择。还有一个我一直在使用的选项，它使用 CSS 作为背景图像，但需要一些工作才能使其缩放和缩放不同步。随着画布的缩放 (canvas.zoomToPoint()) - 但我相信这是可行的。