Javascript fabric.js如何在旋转矩形旁边添加矩形_Javascript_Jquery_Html

Javascript fabric.js如何在旋转矩形旁边添加矩形

javascript jquery html

Javascript fabric.js如何在旋转矩形旁边添加矩形,javascript,jquery,html,Javascript,Jquery,Html,我正在努力将代表太阳能电池板的矩形放置在给定房屋的屋顶上。用户可以旋转矩形使其与屋顶对齐。在添加相邻矩形而不旋转所选面板之前，代码工作正常。但是，在正确计算与旋转矩形相邻的新矩形的位置时，我面临着一个问题。代码如下： <!DOCTYPE html> <html> <head> <title>Panel Positioner</title> <meta charset="UTF-8">

我正在努力将代表太阳能电池板的矩形放置在给定房屋的屋顶上。用户可以旋转矩形使其与屋顶对齐。在添加相邻矩形而不旋转所选面板之前，代码工作正常。但是，在正确计算与旋转矩形相邻的新矩形的位置时，我面临着一个问题。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Panel Positioner</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>  
        <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var solar_panel = {"width": 57, "height": 94}; // Default pixles on 5M zoom
                var offset = 58;
                var rads = 0;
                var position = {};
                var id = 1;
                $('#add-panel').click(function() {
                    addPanel();
                });
                function addPanel() {
                    if (id === 1) {
                        canvas = new fabric.Canvas('c1');
                        canvas.on("after:render", function() {
                        canvas.calcOffset();
                        });
                        canvas.on('object:moving', function(e) {
                            var activeObject = e.target;
                            position.x = activeObject.get('left');
                            position.y = activeObject.get('top');
                        });
                        canvas.on('object:rotating', function(e) {
                            var activeObject = e.target;
                            var angle = activeObject.get('angle');
                            rads = (activeObject.get('angle') * Math.PI / 180.0);
                        });
                    }
                    var markerPt2 = position;
                    markerPt2.x += offset * Math.cos(-rads);
                    markerPt2.y -= offset * Math.sin(-rads);
                    rect = new fabric.Rect({
                        id: id,
                        left: markerPt2.x,
                        top: markerPt2.y,
                        fill: 'grey',
                        width: solar_panel.width,
                        height: solar_panel.height,
                        borderColor: 'black',
                        stroke: '#000',
                        lockScalingX: true,
                        lockScalingY: true,
                        hasRotatingPoint: true,
                    });
                    rect.set('angle', rads * 180.0 / Math.PI);
                    id++;
                    canvas.add(rect);
                    canvas.renderAll();
                }
            });
        </script>
    </head>
    <body>
        <canvas id="c1" width="800" height="600" style="z-index:1000; border: 2px solid black;" ></canvas>
        <input type="button" id="add-panel" name="add-panel" value="Add Panel" />
    </body>
</html>


面板定位器
$（文档）.ready（函数（）{
var太阳能电池板={“宽度”：57，“高度”：94}；//5M缩放时的默认像素
var偏移=58；
var-rads=0；
var位置={}；
var-id=1；
$（“#添加面板”）。单击（函数（）{
addPanel（）；
});
函数addPanel（）{
如果（id==1）{
canvas=新的fabric.canvas（'c1'）；
on（“after:render”，function（））{
canvas.calcOffset（）；
});
canvas.on（'object:moving'，function（e）{
var activeObject=e.target；
position.x=activeObject.get（'left'）；
position.y=activeObject.get（'top'）；
});
canvas.on（'对象：旋转'，函数（e）{
var activeObject=e.target；
var angle=activeObject.get（'angle'）；
rads=（activeObject.get（'angle'）*Math.PI/180.0）；
});
}
var-markerPt2=位置；
markerPt2.x+=偏移量*数学cos（-rads）；
markerPt2.y-=偏移量*数学sin（-rads）；
rect=新结构。rect({
id:id，
左：markerPt2.x，
上图：markerPt2.y，
填充：“灰色”，
宽度：太阳能电池板。宽度，
高度：太阳能电池板高度，
边框颜色：“黑色”，
笔划：“#000”，
lockScalingX：对，
lockScalingY：是的，
hasRotatingPoint：对，
});
矩形集（'角度'，rads*180.0/Math.PI）；
id++；
canvas.add（rect）；
canvas.renderAll（）；
}
});

好的，经过一番努力，我发现我自己的脚本出了什么问题。这涉及到两件重要的事情：

旋转对象时，只有弧度发生变化（不是x、y位置）。所以，在旋转一个物体后，我们只需要计算它的弧度就可以找到下一个相邻物体的位置。所以，在我的代码中，我做错的是，在对象移动或旋转之后，我重新计算新对象的x，y坐标。因此，需要做的是一个布尔标志，它将决定对象是否旋转。如果是，则不要重新计算新相邻对象的x、y位置。只需重新计算弧度（已在“对象：旋转”块中实现）。因此，代码应该如下所示：

if(rotated == false) {
    markerPt2.x += offset * Math.cos(-rads);
    markerPt2.y -= offset * Math.sin(-rads);
} else {
    rotated = false;
}

此外，另一个让我恼火的事实是，当对象在Fabric.js中渲染或移动时，其x，y位置是周围矩形的左上角，但当对象旋转时，Fabric.js会返回对象的中心点作为其x，y位置。因此，在本例中，当对象旋转时，Fabric.js转换点跳到矩形的中心点。因此，在实现“对象：旋转”时，只应使用最后记录的（旋转前）x，y