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

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

1 个答案: