如何存储绘制矩形坐标百分比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; 
}