increase/decrease 怎么只有一个角的圆角半径？

Question

我正在尝试仅增加一个角的角半径（仅左上角）https://www.imagefu.com/create/button

我已尝试使用 rx 和 ry 修改拐角半径，但由于它适用于水平和垂直拐角半径，因此应用于所有边

var canvas = new fabric.Canvas('ctest');
canvas.add(new fabric.Rect({
    left: 100,
    top: 30,
    width: 50,
    height: 50,
    originX: 'left',
    originY: 'top',
    rx: 12,
    ry: 12
}));

http://jsfiddle.net/xm1os7jg/

任何建议都会有所帮助。谢谢

Answer 1

使用分组的线条和圆圈的粗略变通方法如何？

var canvas = new fabric.Canvas('ctest');

var box = new fabric.Rect({
  left: 0,
  top: 0,
  fill: false,
  stroke: "red",
  width: 50,
  height: 50,
});

var circle = {
  fill: 'transparent',
  strokeWidth: 1,
  stroke: false,
  radius: 12,
  clipTo: function(ctx) {
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, 300, 3.14159, 4.71239);
  },
};

var circle1 = new fabric.Circle(circle);

var line1 = new fabric.Line([12, 0, 50, 0], {
  stroke: "red",
});

var line2 = new fabric.Line([0, 12, 0, 50], {
  stroke: "red",
});

var line3 = new fabric.Line([50, 0, 50, 50], {
  stroke: "red",

});

var line4 = new fabric.Line([0, 50, 51, 50], {
  stroke: "red",
});

var group = new fabric.Group([box, circle1, line1, line2, line3, line4], {
  left: 50,
  top: 50,
  transparentCorners: false,
  cornerSize: 10,
});

group.cornerStyle = 'circle';
canvas.add(group);

$("#corner").click(function() {
  circle1.set("stroke", "red");
  box.set("stroke", false);
  canvas.renderAll();
});

canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>

<button id="corner">Corner</button>

<canvas id="ctest" width="600" height="600"></canvas>

increase/decrease 怎么只有一个角的圆角半径？

How do increase/decrease the corner radius of only one corner?

fabricjs