DOM 요소를 Kineticjs에 드래그 앤 드롭 모양으로 바인딩

Question

나는 Kineticjs 라이브러리로 놀았습니다. 캔버스를 성공적으로 추가하고 모양을 만들고 드래그 앤 드롭으로 만들었습니다.

페이지에서 html 콘텐츠를 바인딩하거나 같은 방법으로 draggable 할 수 있도록 도형으로 싸고 싶지만 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