Konva.js 带文本的 Img 元素周围的虚线描边

Question

我是 Konva.js lib 的新手，我在 canvas 元素内实现了 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

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