FabricJS

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() 为运行时对象不会进入背景。将 "repeated" 背景图像合并为一张图像，以便 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/。

FabricJS - ZoomToPoint 不适用于 backgroundImage

FabricJS - ZoomToPoint not working with backgroundImage

javascript

canvas

zooming