html - 将 DOM 元素绑定到 Kineticjs 拖放形状

Question

我一直在玩 Kineticjs 库。我已经成功添加了画布，创建了一个形状并将其拖放。

我希望将页面中的 html 内容绑定到或包装在形状中，以便能够以相同的方式使其可拖动，但仍保留 html/css/jquery 中的交互功能（因此不将 html 缓存为位图，我想过）。

我看不出该怎么做，也许以某种方式使用 id 选择器？

我是不是走错了，也许有更简单的方法可以达到相同的结果？

欣赏任何提示、建议或解决方案。

Answer 1

好吧，在玩了一会儿之后，我放弃了寻找使用 DOM 的方法，而是使用 kineticjs 中的内置文本和图像对象来重新创建我最初使用 html/css 创建的东西。有点啰嗦，有兴趣看看是否有更短的方法。

// Create the Stage

var stage = new Kinetic.Stage({
    container: 'container-kinetic',
    width: 1024,
    height: 768
  });

// Start Steve  

// Create the layer
  var layer = new Kinetic.Layer();
  // var rectX = stage.getWidth() / 2 - 50;
  // var rectY = stage.getHeight() / 2 - 25;

 // create the group
var group = new Kinetic.Group({
    x: -365,
    y: -275,
    draggable: true
   });

// circle border for object
  var circ = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 43,
    fill: '#fff',
    stroke: '#cccccc',
    strokeWidth: 1,
  });

   // this isn't doing anything - remove in cleanup
    var steve = new Kinetic.Image({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      image: steve,
      width: 81,
      height: 81,
    });

 // add the object title 
   var titleText = new Kinetic.Text({
    x: stage.getWidth() / 2 - 70,
    y: stage.getHeight() / 2 + 55,
    text: 'Steve Schofield - Founder',
    fontSize: 10,
    fontFamily: 'Maven Pro',
    textFill: '#252525'
  });

// add the object image
   var imageObj = new Image();
  imageObj.onload = function() {
    var yoda = new Kinetic.Image({
     x: stage.getWidth() / 2 - 41,
    y: stage.getHeight() / 2 - 41,
      image: imageObj,
      width: 81,
      height: 81
    });

    // add the shape to the layer
    group.add(yoda);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObj.src = 'img/team_1_p3.png';

 // add the facebook icon
 var imageObjfb = new Image();
  imageObjfb.onload = function() {
    var fbIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 - 26,
    y: stage.getHeight() / 2 + 82,
      image: imageObjfb,
      width: 8,
      height: 12
    });

    // add the shape to the layer
    group.add(fbIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjfb.src = 'img/facebook_icon_small.png';

   // add the twitter icon
 var imageObjtwitter = new Image();
  imageObjtwitter.onload = function() {
    var twitterIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 - 12,
    y: stage.getHeight() / 2 + 84,
      image: imageObjtwitter,
      width: 12,
      height: 10
    });

    // add the shape to the layer
    group.add(twitterIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjtwitter.src = 'img/twitter_icon_small.png';

   // add the linkedin icon
 var imageObjli = new Image();
  imageObjli.onload = function() {
    var liIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 - -4,
    y: stage.getHeight() / 2 + 82,
      image: imageObjli,
      width: 11,
      height: 12
    });

    // add the shape to the layer
    group.add(liIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjli.src = 'img/linkedin_icon_small.png';

  // add the rss icon
 var imageObjrss = new Image();
  imageObjrss.onload = function() {
    var rssIcon = new Kinetic.Image({
     x: stage.getWidth() / 2 + 20,
    y: stage.getHeight() / 2 + 83,
      image: imageObjrss,
      width: 12,
      height: 11
    });

    // add the shape to the layer
    group.add(rssIcon);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObjrss.src = 'img/rss_icon_small.png';

  // add cursor styling
  group.on('mouseover', function() {
    document.body.style.cursor = 'pointer';
  });
 group.on('mouseout', function() {
    document.body.style.cursor = 'default';
  });

  // add the shape to the layer
  group.add(circ);
  group.add(steve);
  group.add(titleText);
  layer.add(group);

  // add the layer to the stage
  stage.add(layer);

  steve.src = 'http://braindu.studiophp.net/investors.braindu/img/team_1_p3.png';  // end Steve