Konva.js 用文本在 Img 元素周围虚线描边

【问题标题】：Konva.js dotted stroke around Img element with textKonva.js 用文本在 Img 元素周围虚线描边
【发布时间】：2019-11-03 17:29:25
【问题描述】：

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

任何想法如何在 Konva.js 中做到这一点？谢谢！

【问题讨论】：

标签： javascript canvas konvajs react-konva

【解决方案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

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

【讨论】：