Question

我正在使用Fabric.JS来创建布局构建器。但是，一旦对象显示在画布上，我就无法像矩形那样更新对象的rx和ry属性。我有一个使用滑块字段，用户使用滑块更新对象上的rx和ry的值。

此外，当我查看对象时，它已被更新，但画布未使用rx和ry的新值更新。

以下是我使用的代码段：

$('#slider').slider()
                .on('slideStop', function (ev) {

                    var val = $('#slider').slider('getValue').val();
                    var activeObject = canvas.getActiveObject();
                    if (activeObject) {
                        console.log('Inside active object');
                        activeObject.set({'rx': val, 'ry': val});
                        canvas.renderAll();
                    } 
        });

Answer 1

<强>样本

var canvas = new fabric.Canvas('canvas');

$("#slider").slider({
    orientation: "horizontal",
    range: "min",
    max: 50,
    slide: refreshSwatch,
    change: refreshSwatch
});

canvas.add(new fabric.Rect({
    left: 25,
    top: 50,
    width: 150,
    height: 150
}));
canvas.add(new fabric.Rect({
    left: 225,
    top: 50,
    width: 150,
    height: 150,
    fill: 'rgba(100,100,200,0.5)'
}));
canvas.renderAll();
canvas.on('object:selected',function(){
 $("#slider").slider('value',canvas.getActiveObject().rx);
})

function refreshSwatch() {
    var val = $("#slider").slider("value");
    var activeObject = canvas.getActiveObject();
    if (activeObject) {
        activeObject.set({
            'rx': val,
            'ry': val
        });
        canvas.renderAll();
    }
}

canvas {
  border: 2px dotted blue;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="slider"></div><br>
<canvas id="canvas" width="400" height="400"></canvas>

可能我没有得到你的实际问题，但我添加了一个演示并从jQuery滑块值，它更新rect rx，ry值。

Fabric JS为对象更新rx和ry？

1 个答案: