Конвайс нестандартные формы и трансформеры - PullRequest
Новая
       9

Конвайс нестандартные формы и трансформеры

0 голосов
/ 28 мая 2018

То, чего я пытаюсь достичь, это показать трансформатор вокруг самой пользовательской формы.Я взял код непосредственно из документации API для создания пользовательской фигуры и добавления преобразователя.Преобразователь отлично работает с прямоугольниками, кругами и т. Д., Но для пользовательских фигур он не выглядит должным образом.

Вот ссылка на демонстрационное приложение с проблемой с пользовательскими формами и преобразователем: https://jsfiddle.net/5zpua740/

var stage = new Konva.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight
    });

var layer = new Konva.Layer();

/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
var triangle = new Konva.Shape({
  sceneFunc: function (context) {
    context.beginPath();
    context.moveTo(120, 150);
    context.lineTo(320, 180);
    context.quadraticCurveTo(250, 200, 360, 270);
    context.closePath();

    // Konva specific method
    context.fillStrokeShape(this);
  },
  fill: '#00D2FF',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

// add the triangle shape to the layer
layer.add(triangle);

// add the layer to the stage
stage.add(layer);

stage.on('click', function (e) {
  // if click on empty area - remove all transformers
  if (e.target === stage) {
    stage.find('Transformer').destroy();
    layer.draw();
    return;
  }

  // remove old transformers
  // TODO: we can skip it if current rect is already selected
  stage.find('Transformer').destroy();

  // create new transformer
  var tr = new Konva.Transformer();
  layer.add(tr);
  tr.attachTo(e.target);
  layer.draw();
})

В этом примере вы можете видеть, что если вы щелкнете по объекту, трансформатор появится в углу.Вы все еще можете использовать его для манипулирования объектом, но он не находится вокруг самого объекта.

Любая помощь приветствуется!Заранее спасибо.

1 Ответ

0 голосов
/ 29 мая 2018

Конва не может обнаружить ограничивающую рамку произвольной формы.Но мы можем просто помочь.Нам просто нужно определить метод getSelfRect.

Метод должен возвращать ограничивающую рамку фигуры без применения преобразования (например, фигура не имеет вращения, не масштабируется и помещается в x = 0, y = 0).

Мы можем сделать это, просто посмотрев на sceneFunc: 

triangle.getSelfRect = function() {
  return {
    // sceneFunc started from moving to 120, 150 point
    // so it is our top left point
    x: 120, 
    y: 150,
    // the bottom right point finished with quadraticCurveTo
    // I will use the coordinates to calculate size of the shape
    width: 360 - 120,
    height: 270 - 150
  };
}

Демо: http://jsbin.com/lazuhowezi/2/edit?js,output

...