將DOM元素綁定到Kineticjs拖放形狀

Question

我一直在玩Kineticjs庫。我已成功添加畫布，創建了一個形狀並將其拖放。

我想從綁定到或包裹在形狀的頁面的HTML內容能夠以相同的方式使其可拖動，但仍保留交互功能在html/css/jquery（所以不緩存html作爲位圖，我想過）。

我看不出如何做到這一點，或許使用id選擇器？

我接近它錯了，也許有一個更簡單的方法來實現相同的結果？

欣賞任何提示，建議或解決方案。

Answer 1

OK，所以在玩了一會之後，我放棄了尋找使用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