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

// 创建Stage对象
var stage = new Konva.Stage({
  container: 'container', // 容器的ID
  width: 800, // 宽度
  height: 600 // 高度
});

// 创建Layer对象
var layer = new Konva.Layer();

// 创建文本对象
var text = new Konva.Text({
  x: 50, // x坐标
  y: 50, // y坐标
  text: 'Hello', // 文本内容
  fontSize: 20, // 字体大小
  fill: 'black' // 字体颜色
});

// 创建图片对象
var image = new Konva.Image({
  x: 100, // x坐标
  y: 100, // y坐标
  image: imgElement, // 图片元素
  width: 200, // 图片宽度
  height: 200 // 图片高度
});

// 创建矩形对象
var rect = new Konva.Rect({
  x: 90, // x坐标
  y: 90, // y坐标
  width: 220, // 矩形宽度
  height: 220, // 矩形高度
  fill: 'transparent', // 填充颜色
  stroke: 'red', // 边框颜色
  strokeWidth: 5 // 边框宽度
});

// 将文本、图片和矩形对象添加到Layer中
layer.add(text);
layer.add(image);
layer.add(rect);

// 将Layer添加到Stage中
stage.add(layer);

// 渲染所有的Konva元素
stage.draw();