2012-11-15 59 views
3

是否可以引用使用jQuery在HTML5 canvas元素上繪製的圖形?下面是我寫EaselJS功能,通過含有載體的數組對象迭代座標:使用jQuery將畫布圖形引用爲DOM元素

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); 
} 

的COORDS物體看起來是這樣的配點的100S:

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]; 

和舞臺:

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); 

我可以添加監聽器到點擊/觸摸事件的渲染形狀,但是我希望能夠引用每個圖形作爲一個DOM元素用於像Bo這樣的插件otstrap Popover和niceScroll例如.. $(shape1).popover('show');。我一直在積極研究一個沒有成功的解決方案,任何幫助將不勝感激!

+0

但它們不是DOM元素,更不用說DOM對象...... – Shmiddty

+0

你也許可以添加僞屬性與'Object.defineProperty'與相關的DOM屬性的名稱,將改變任何內部屬性來模擬將發生在DOM節點的效果。但是,並不能保證這些插件甚至jquery本身沒有進行類型檢查,以確保它們正在使用DOM節點。 – Shmiddty

+1

我最近來的是參考DOM節點的畫布形狀的屬性。 http://jsfiddle.net/ZxCJU/1/ – Shmiddty

回答

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>