Отрегулируйте положение обводки формы на квадратах / треугольниках - PullRequest
0 голосов
/ 22 мая 2019

Мне нужно установить положение обводки для квадратов (класс Rect) и треугольников (класс Line), как это было сделано для кругов здесь: Проблема GitHub с примером

Я хочу использовать первое решение, используя sceneFunc. Мне очень трудно понять, как сделать то же самое для квадратов и треугольников.

Есть идеи?

Заранее спасибо.

1 Ответ

1 голос
/ 22 мая 2019
const square = new Konva.Shape({
  x: 50,
  y: 30,
  stroke: 'rgba(0,0,0,0.5)',
  strokeWidth: 20,
  fill: 'green',
  draggable: true,
  width: 100,
  height: 100,
  sceneFunc: (ctx, shape) => {
    ctx.rect(0, 0, shape.width(), shape.height());
    // first stroke
    ctx.strokeShape(shape);
    // then fill
    ctx.fillShape(shape);
  }
});
layer.add(square);

const triangle = new Konva.Shape({
  x: 250,
  y: 30,
  stroke: 'rgba(0,0,0,0.5)',
  strokeWidth: 20,
  fill: 'green',
  draggable: true,
  sceneFunc: (ctx, shape) => {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(50, 100);
    ctx.lineTo(-50, 100);
    ctx.closePath();
    // first stroke
    ctx.strokeShape(shape);
    // then fill
    ctx.fillShape(shape);
  }
});
layer.add(triangle);

Демо: https://jsbin.com/fumacupoku/edit?html,js,output

...