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

Question

有没有可能使用jQuery引用在HTML5画布元素上绘制的图形？这里是我为EaselJS编写的一个函数，它遍历包含矢量坐标数组的对象：

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对象看起来像这样，有数百个点：

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元素进行引用，以便与像Bootstrap Popover和niceScroll这样的插件一起使用，例如： $(shape1). popover（'show'）; 。我一直在积极寻找解决方案，但没有成功，任何帮助都将不胜感激！

- dcd0181

---

但它们不是DOM元素，更不是DOM对象... - Shmiddty

你可以使用Object.defineProperty添加伪属性，这些属性的名称与相关的DOM属性相同，将更改任何内部属性以模拟发生在DOM节点上的效果。但是，不能保证这些插件甚至jQuery本身不会进行类型检查，以确保它们正在使用DOM节点。 - Shmiddty

我最接近的方法是引用画布形状属性的DOM节点。http://jsfiddle.net/ZxCJU/1/ - Shmiddty

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应用于隐藏的DOM元素，我能够跟踪点击和触摸事件的x、y坐标。

调用Bootstrap弹出框：

$("#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>

- dcd0181