Konva.js点缀在带有文本的Img元素周围的笔画

Question

我是Konva.js库的新手，我在画布元素内实现了img的拖放，我想向用户指出img是可拖动的，所以我想做这样的事情->

任何想法如何在Konva.js中执行此操作？谢谢！

Answer 1

您可以将stroke与dash属性的组合使用以制作点划线

Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  img.setAttrs({
    x: 50,
    y: 50,
    scaleX: 0.5,
    scaleY: 0.5,
    stroke: 'red',
    strokeWidth: 10,
    dash: [10, 10],
    draggable: true
  });
  layer.add(img);
  layer.draw();
});

演示：https://jsbin.com/xoporixura/1/edit?html,js,output

如果需要笔划的填充，则可以在图像顶部添加一个较大尺寸的矩形。