javascript - FabricJS - ZoomToPoint 不适用于 backgroundImage

Question

我使用 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();
    });

EDİT

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

但我不使用 css。

背景图片

谢谢

对不起，我不会说英语。

Answer 1

相关代码如下(其余代码在 JSFiddle 中)，请注意用于允许缩小的 Canvas 大小和 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/ .