FabricJS - ZoomToPoint不與背景圖片

我使用zoomtopoint和縮放到對象。但不適用於背景。我想放大對象和背景。我怎麼能夠？FabricJS - ZoomToPoint不與背景圖片

示例：對象大小：100x100不縮放。變焦對象大小後：100×100

變焦和網格後保持不變。

變焦事件

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。

背景圖像

謝謝

對不起，我不能說好英語。

來源

2017-02-27 forguta

如果它是您指的canvas.style.background，那麼它不是畫布2D API的一部分，並且需要DOM/CSS轉換。不是織物的功能。您需要將背景作爲對象添加到結構中，以便它可以將其包含在變焦中 – Blindman67

我認爲您正在討論將背景圖像添加爲圖像對象。 – forguta

是的。我不知道fabric是否會讓您將圖片設置爲可重複，但2D API可讓您通過位圖設置圖案。如果結構允許您創建模式，請使用背景位圖創建模式。這樣你可以重複它。 – Blindman67

相關代碼如下（其餘部分位於JSFiddle中），請注意畫布大小和用於允許縮小的CSS容器技巧。

示例：對象大小：100x100不縮放。

變焦對象大小後：100×100

變焦和網格後不再相同。

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/。

希望這會有所幫助。

UPDATE：

@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/。

來源

2017-03-03 01:34:34

是的，我也試過。但我不想讓背景進入getObjects（）。當我使用sendtoBack（）將創建的對象發送到後面時，對象消失。如果您對此有看法，我可以使用它。再次感謝您的幫助，@TimHarker。 :) – forguta

@forguta我更新了我的答案。我相信這是你最簡單的選擇。還有另一個選項，我一直在使用CSS作爲背景圖片，但需要一些工作來縮放和縮放異步。用畫布的縮放和縮放（'canvas.zoomToPoint（）'） - 但我相信這是可行的。 –

我很感謝你。其作品：） – forguta

FabricJS - ZoomToPoint不與背景圖片

回答

相關問題