如何存儲繪製矩形座標百分比Fabricjs

Question

在我的項目，我動態工作區的創建和刪除對特定建築的樓層。要做到這一點，將使用Raphealjs，使用rapheal我可以在地板上創建區域。我將高度，寬度，startx和stary存儲到數據庫。

但問題是，這是個門店像素座標。當我縮小屏幕時，該區域離開了我的地板。解決方案，我需要存儲的百分比座標。

有沒有辦法做到這一點，請大家幫我走出來。

下面是我的圖片則顯示清晰的畫面。

當小屏幕：

請給我的解決方案，在此先感謝..

Answer 1

你嘗試，只要你正在你的屏幕更小，以縮小/你的面料的對象？我的建議是要存儲一個邏輯點。例如，畫布大小是500x600像素，你必須在位置x = 100的矩形，Y = 100，寬度= 50，和高度= 50。邏輯座標將是您的實際座標（以像素爲單位）除以畫布的尺寸。換句話說，即使您將使用不同於之前會話的畫布大小加載您的應用程序，您也將擁有動態座標。這種情況下，您將擁有動態座標。無論何時，當您調整畫布大小時，應重新計算您的物理點並重新渲染所有畫布。您可以將邏輯座標反對你fabricjs對象：

var rect1 = new fabric.Rect({ 
    left: 100, 
    top: 100, 
    fill: 'green', 
    width: 50, 
    height: 50, 
    id : someid, 
    logicalCoords: {x: 0.2, 
        y: 0.16666666666666, 
        width: 0.1, 
        height: 0.833333} 
    }); 

重新計算物理點會很容易，你應該通過所有fabricjs對象循環和邏輯點乘以你的畫布尺寸：

canvas.forEachObject(function(o){ 
    o.x = logicalCoords.x * canvas.width; 
    o.x = logicalCoords.y * canvas.height; 
    o.x = logicalCoords.width * canvas.width; 
    o.x = logicalCoords.height * canvas.height; 
}); 
canvas.renderAll(); 

警告：它不是工作代碼，它只是一個想法如何解決你的問題。

UPDATE 1： Fabricjs需要用於繪製形狀的像素數據。你可以這樣做：

var rect1 = new fabric.Rect({ 
     left: toPixels(percentValueLeftFromDB), 
     top: toPixels(percentValueTopFromDB), 
     fill: 'green', 
     width: toPixels(percentValueWidthFromDB), 
     height: toPixels(percentValueHeightFromDB), 
     }); 
function toPixels(value){ 
//do conversion here.. 
//you should take care of left and top coordinates 
pixelValue = canvas.width * value/100; //calculates only width and top 
return pixelValue; 

沒有像百分比這樣的自動化。你必須自己做你的轉換。我向你展示了2個變化邏輯點到物理點，或百分點到物理點。所有你需要將物理點指向Fabricjs。在我看來，邏輯分數比百分比更準確。

更新2：

爲什麼邏輯點將響應，因爲它需要所有的時間觀衆的大小。例如，正如您在評論不同物理屏幕尺寸（英寸）時所提到的，您將擁有不同的屏幕分辨率。理想情況下，您將擁有每個分辨率的動態畫布大小，可以隨時計算或在CSS中設置爲百分比。假設您爲canvas設置width = 75％和height = 60％。如果您將在不同的屏幕或設備上打開此畫布，則以像素爲單位的畫布物理寬度和高度將有所不同。在這種情況下logicalPoint將在每個設備上的相同點，因爲您將需要使用畫布尺寸將它們轉換爲physicalPoint。 假設您的畫布的尺寸爲1000x500像素，您的矩形具有邏輯（頂部，左側）座標（0.5,0.5），和寬度= 0.5，和高度= 0.5。物理結果將是矩形在與寬度= 500和高度= 250位置（500250）如果將相同的邏輯座標通過嘗試將它們顯示在小畫布這將是矩形的相同的位置。

請檢查協調了2幅油畫這種簡單fiddle這表明邏輯。

注意：這種邏輯只會工作，如果你將讓你畫布大小以相同的縱橫比。如果您將畫布寬度調整爲50％，則還必須將高度調整爲50％。

此外，小提琴代碼是在這裏：

HTML：

<canvas id="canvas1" width="200" height="150" style="border:1px solid #ccc"></canvas> 
<canvas id="canvas2" width="400" height="350" style="border:1px solid #ccc"></canvas> 

的JavaScript：

(function() { 
    var canvas1 = this.__canvas = new fabric.Canvas('canvas1'); 
    var canvas2 = this.__canvas = new fabric.Canvas('canvas2'); 

    var rect = new fabric.Rect({ 
     left: logicalToPhysical(0.5, canvas1.width), 
     top: logicalToPhysical(0.5, canvas1.height), 
     width: logicalToPhysical(0.5, canvas1.width), 
     height: logicalToPhysical(0.5, canvas1.height), 
     fill: 'rgba(255,127,39,1)' 
    }); 
    canvas1.add(rect); 
    canvas1.renderAll(); 

    var rect = new fabric.Rect({ 
     left: logicalToPhysical(0.5, canvas2.width), 
     top: logicalToPhysical(0.5, canvas2.height), 
     width: logicalToPhysical(0.5, canvas2.width), 
     height: logicalToPhysical(0.5, canvas2.height), 
     fill: 'rgba(255,127,39,1)' 
    }); 
    canvas2.add(rect); 
    canvas2.renderAll(); 
})(); 

function logicalToPhysical(value, dimension){ 
    return value * dimension; 
}