Konva.js自定义形状和变换器

Question

Konva.js自定义形状和变换器

3

我想要实现的目标是展示变压器在自定义形状周围。我直接从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();
})

在这个示例中，您可以看到如果点击对象，变换器会出现在角落里。您仍然可以使用它来操作对象，但它不在对象周围。

任何帮助都将不胜感激！提前致谢。

- 0x33ccff

你好 - 到目前为止写得很好。我尝试了链接的jsfiddle，但是我只看到形状 - 在当前的Chrome浏览器上没有看到任何角落。 - Vanquished Wombat

1

感谢您提出这个好问题。我会尝试在Konva网站上添加一个演示。 - lavrton

1

@VanquishedWombat 你说得对，我应该改变位置，这样角落就会显示在画布上。目前它在页面外，但如果你点击并拖动对象靠近中心，你就会看到变形器。 - 0x33ccff

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lavrton · Accepted Answer

Konva无法检测自定义形状的边界框。但我们可以简单地帮助它。我们只需要定义一个方法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

这是一个关于IT技术的内容。