如何在fabricJS中更改圆的边界半径

时间:2016-04-12 16:35:03

标签: jquery frontend fabricjs web-frontend

我希望在缩放对象(border-radius)时更改圆圈的if scaleX/scaleY>1 ...

这是我在fabricJS中的圈子对象:

function makeStation(left, top, stationID) {
    var c = new fabric.Circle({
        radius: 2,
        fill: '#5afffa',
        stroke: '#666',
        selectable: true,
        hasRotatingPoint: false,
        borderColor: 'black',
        cornerColor: 'black',

    });
    c.left1 = left;
    c.top1 = top;
    c.hasControls = c.hasBorders= true;

    c.stationID = stationID;
    c.stationName = stations[stationID].name;
    c.description = stations[stationID].desc;
    c.image = stations[stationID].image;

    return c;
}

如何更改border radius

2 个答案:

答案 0 :(得分:0)

我相信你不能,我认为边界是由画布的selectionLineWidth控制的:

http://fabricjs.com/docs/fabric.Canvas.html#selectionLineWidth

答案 1 :(得分:0)

请检查代码段,看看这是不是您要找的内容。 StrokeWidth在缩放时保持恒定。



var canvas = new fabric.Canvas("c");

canvas.add(new fabric.Circle({radius: 50, fill: 'red', stroke: 'black', strokeWidth:2}));

canvas.on("object:scaling", function(opt){
  var t = opt.target;
  
  t.strokeWidth = 2/Math.min(t.scaleX, t.scaleY);
});

<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>
&#13;
&#13;
&#13;