jQuery로 캔버스 그래픽을 DOM 요소로 참조하기

Question

jQuery를 사용하여 HTML5 캔버스 요소에 그린 그래픽을 참조 할 수 있습니까?

var coords = {}; 

coords['0'] = [214,266,214,291,194,291]; 
coords['1'] = [243,1,254,2,278,9,290,14]; 
coords['2'] = [109,112,116,114,129,117]; 

그리고 단계 :

function newShape(obj,shape,coords){ 
    obj.graphics.beginFill('green'); 
    obj.alpha = 0.05; 
    for (var i=0; i<coords[shape].length; i+=2) { 
     var arr = coords[shape].slice(i,i+2); 
     obj.graphics.lineTo(arr[0],arr[1]); 
    } 
    obj.graphics.closePath(); 
    obj.graphics.endFill(); 
    stage.addChild(obj); 
} 

좌표 객체 포인트의 100 단위로 다음과 같은 : 여기 벡터의 배열을 포함하는 객체를 반복 좌표 내가 EaselJS을 위해 쓴 기능입니다

canvas = document.getElementById("canvas"); 
stage = new createjs.Stage(canvas); 

shape1 = new createjs.Shape(); 
shape2 = new createjs.Shape(); 
shape3 = new createjs.Shape(); 

newShape(shape1,'shape1',coords); 
newShape(shape2,'shape2',coords); 
newShape(shape3,'shape3',coords); 

클릭/터치 이벤트의 렌더링 된 모양에 리스너를 추가 할 수 있지만 Bo와 같은 플러그인에서 사용하기 위해 각 그래픽을 DOM 요소로 참조하고 싶습니다. Popover와 niceScroll 예. $(shape1).popover('show');. 나는 적극적으로 성공을 거두지 못한 해결책을 찾고 있었지만, 어떤 도움을 주시면 감사하겠습니다!

Answer 1

옵션 1 : Shmiddty의 포스트, 2D 컨텍스트 참조에 대한 프로그래밍 방식에서

:

function Shape(can) { 
    this.x = 0; 
    this.y = 0; 
    this.width = 0; 
    this.height = 0; 
    this.fill = "rgba(0,0,0,0)"; 
    this.parent = can; 

    this.draw = function(ctx) { 
     if (!$(me.parent).is(':visible')) return; 

     var parts = me.fill.split(','); 
     parts[3] = $(me.parent).css("opacity") + ')'; 
     me.fill = parts.join(','); 

     ctx.fillStyle = me.fill; 
     ctx.fillRect(me.x, me.y, me.width, me.height); 
    }; 

    var me = this; 
} 

(function() { 
    var can = $("#sandbox")[0], 
     ctx = can.getContext('2d'), 
     wid = can.width, 
     hei = can.height, 
     sha = new Shape($('<div id="box"/>').appendTo('body')); 

    sha.x = 0; 
    sha.y = 0; 
    sha.width = 50;  
    sha.height = 50; 
    sha.offsetWidth = 50; 
    sha.offsetHeight = 50; 
    sha.fill = "rgba(000,111,222,1)"; 

    (function draw(){ 
     ctx.clearRect(0,0,wid,hei); 
     sha.draw(ctx); 
     webkitRequestAnimationFrame(draw); 
    })(); 


    $(can).click(function(){ 
     $(sha.parent).fadeToggle(); 
    }); 
    $('#box').click(function(){ 
     $(this).fadeToggle(); 
    }); 
})();​ 

옵션 2 :

내가 할 수 있었다 CSS를 히트에 적용하여 클릭 및 터치 이벤트에서 x, y 좌표를 추적합니다. DOM 요소.

부트 스트랩 팝 오버를 호출 :

$("#canvas").click(function(e) { 
    var x = e.pageX; 
    var y = e.pageY; 

    if ($.inArray(x, coords['shape1']) !== -1 || $.inArray(y, coords['shape1']) !== -1){ 
     $("#myObj").css({'position':'absolute','top':y,'left':x}).popover({ 
      trigger: 'click', 
      placement:'top', 
     }).popover('show'); 
    } 
}); 
stage.update(); 

HTML :

<canvas id="canvas" width="375" height="322"></canvas> 
<span class="myObj" data-content="lorem ipsum content" data-original-title="pop-title"></span>