使用jQuery将画布图形引用为DOM元素

是否可以引用使用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');。我一直在积极研究一个没有成功的解决方案，任何帮助将不胜感激！

来源

2012-11-15 dcd0181

但它们不是DOM元素，更不用说DOM对象...... – Shmiddty

你也许可以添加伪属性与'Object.defineProperty'与相关的DOM属性的名称，将改变任何内部属性来模拟将发生在DOM节点的效果。但是，并不能保证这些插件甚至jquery本身没有进行类型检查，以确保它们正在使用DOM节点。 – Shmiddty

我最近来的是参考DOM节点的画布形状的属性。 http://jsfiddle.net/ZxCJU/1/ – Shmiddty

选项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>

来源

2012-11-16 02:19:18 dcd0181

使用jQuery将画布图形引用为DOM元素

回答

相关问题