Question

我使用zoomtopoint和zoom来对象。但不使用背景。我想放大对象和背景。我怎么能够？

示例：对象大小：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。

背景图片

谢谢

对不起，我说英语不好。

Answer 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()运行时对象不会落后于后台。制造＆＃34;重复＆＃34;将背景图像合并为一个图像，因此可以使用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

1 个答案: