使用KineticJS在canvas中添加动态图片并实现旋转、缩放及悬停提示的方法

KineticJS 内置了Transformer组件，可以直接实现可视化缩放控制，不需要自行开发锚点拖拽逻辑：

• 初始化全局Transformer实例，配置缩放行为参数，关闭不需要的旋转能力避免和你已有的旋转功能冲突
• 给所有图片节点绑定选中事件，选中时将Transformer绑定到当前选中的图片节点即可
• 如果是动态克隆生成的新图片，创建完成后统一绑定选中逻辑即可生效
  示例代码：

// 初始化全局缩放控制器
const transformer = new Kinetic.Transformer({
  enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
  rotateEnabled: false,
  keepRatio: true, // 开启则缩放保持宽高比，关闭可自由拉伸
  borderStroke: '#2385bb',
  anchorFill: '#fff',
  anchorStroke: '#2385bb'
});
layer.add(transformer);

// 图片节点绑定选中事件
image.on('click tap', function() {
  transformer.nodes([this]);
  layer.draw();
});

// 点击空白区域取消选中
stage.on('click tap', function(e) {
  if (e.target === stage) {
    transformer.nodes([]);
    layer.draw();
  }
});

通过监听图片节点的鼠标事件，配合全局复用的tooltip节点实现：

• 提前创建全局隐藏的tooltip文本节点，挂载到当前图层
• 给所有图片节点绑定mouseenter、mousemove、mouseleave三个事件，控制tooltip的显示、位置更新和隐藏
• 动态生成的克隆图片在创建时统一绑定上述事件即可
  示例代码：

// 初始化全局tooltip
const tooltip = new Kinetic.Text({
  visible: false,
  fontSize: 12,
  fill: '#fff',
  background: 'rgba(0,0,0,0.7)',
  padding: 6,
  cornerRadius: 4
});
layer.add(tooltip);

// 图片绑定悬停事件
function bindImageHover(img) {
  img.on('mouseenter', function(e) {
    // 可在创建图片时自定义tooltipText属性存储提示内容
    tooltip.text(this.attrs.tooltipText || '自定义图片');
    tooltip.position({
      x: e.evt.offsetX + 12,
      y: e.evt.offsetY + 12
    });
    tooltip.show();
    stage.container().style.cursor = 'pointer';
    layer.draw();
  });
  
  img.on('mousemove', function(e) {
    tooltip.position({
      x: e.evt.offsetX + 12,
      y: e.evt.offsetY + 12
    });
    layer.draw();
  });
  
  img.on('mouseleave', function() {
    tooltip.hide();
    stage.container().style.cursor = 'default';
    layer.draw();
  });
}

// 动态生成新图片后调用绑定即可
bindImageHover(newClonedImage);

内容的提问来源于stack exchange，提问作者david.adam