Как увеличить / уменьшить радиус только одного угла? - PullRequest
Новая
       5

Как увеличить / уменьшить радиус только одного угла?

0 голосов
/ 07 октября 2019

Я пытаюсь увеличить угловой радиус только одного угла, примерно так (только TopLeft) 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/

Любые предложения будут полезны. Спасибо

1 Ответ

0 голосов
/ 09 октября 2019

Как насчет грубого обходного пути с сгруппированными линиями и кругами? 

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>
...