如何在fabricJS中更改圆的边框半径答案

【问题标题】：how to change the border-radius of the circle in fabricJS如何在fabricJS中更改圆的边框半径
【发布时间】：2016-08-03 09:57:26
【问题描述】：

我想在缩放对象时更改圆的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？

【问题讨论】：

html 元素使用边框半径属性本身制成圆形/圆形。那么为什么你需要一个圆的边界半径呢？
边界半径是什么意思？你的意思是当你缩放对象时你想要一个更细的边框？
@AdityaParab 我想稍微改变一下圆圈。现在边界半径是 50%.. 所以当我缩放时，它会是 10px...
@AndreaBogazzi 我希望缩放时的边框半径更小……现在边框是 50%……我希望它是 45%……或 10px……
@Moran - 您要查找的属性是 border-width 而不是 border-radius。设置border-width:10px;，你应该很好。

标签： jquery frontend fabricjs web-frontend

【解决方案1】：

请检查 sn-p 看看这是否是你要找的。 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>

【讨论】：

【解决方案2】：

相信你不能，我认为边界是由Canvas的selectionLineWidth控制的：

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

【讨论】：