放大多邊形而不fabricjs

我有其中最初加載的SVG，然後爲SVG的每個路徑applyed的方式在dynamic pattern demo類似於一個顯示背景圖像的頁縮放。放大多邊形而不fabricjs

同時，我想放大的加載SVG屏幕大小。我在所有SVG的元素上都使用了setScaleX()方法，但背景圖像顯得失真，可能是因爲縮放比例。

所以我試圖用setWidth()方法，調用它乘以我比元素的原始值。該解決方案適用於僅由「Rect」組成的SVG，但當內部存在某些多邊形時，它們不會放大，只會更新包含的框。

我可以理解這一點，設置一多邊形的寬度必然意味着更新其點的座標，但是這是我想要得到該效果。

所以，有一種方法來擴大在fabricjs多邊形，而無需使用setScaleX()方法？

來源

2015-06-23 Duma

規模和*在縮放多邊形重新申請*背景圖像？ –

實際上，我在所有元素和'canvas.renderAll（）'調用'setScaleX（）'或'setWidth（）'後設置了背景，所以當我調用'setFill（）'方法時，元素已經縮放。 – Duma

我創建了一個jsfiddle，如果有幫助：[jsfiddle]（https://jsfiddle.net/Lhesfabo/） – Duma

經過很長時間，我找到了解決這個問題的辦法。您可以在this github issue中找到並解釋FabricJS行爲。

我發現在FabricJS中放大多邊形而不縮放的方式是移動多邊形的每個點，並將其乘以所需的縮放比例。

有我正在使用的代碼。

var paths = canvas.getObjects(); 
var ratio = 2; 
for (var c=0; c<paths.length; c++) { 
    var p = paths[c]; 
    p.setWidth(p.getWidth() * ratio); 
    p.setHeight(p.getHeight() * ratio); 
    if (p.points) { 
     for(var j=0;j< p.points.length; j++) { 
      p.points[j].x *= ratio; 
      p.points[j].y *= ratio; 
     } 
    } 
    p.setLeft(p.getLeft() * ratio); 
    p.setTop(p.getTop() * ratio); 
    p.setCoords(); 
} 
canvas.renderAll();

來源

2015-08-01 09:40:30 Duma

放大多邊形而不fabricjs

回答

相關問題