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

【问题标题】：Referencing canvas graphics as DOM elements with jQuery使用 jQuery 将画布图形作为 DOM 元素引用
【发布时间】：2012-11-04 03:36:15
【问题描述】：

是否可以使用 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);
}

坐标对象看起来像这样，有 100 个点：

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

【问题讨论】：

但它们不是 DOM 元素，更不用说 DOM 对象了……
您也许可以使用Object.defineProperty 添加伪属性，其中包含相关DOM 属性的名称，这些属性将更改任何内部属性以模拟DOM 节点会发生的效果。但是，不能保证这些插件甚至 jquery 本身没有进行类型检查以确保它们正在使用 DOM 节点。
我最接近的是为画布形状的属性引用 DOM 节点。 jsfiddle.net/ZxCJU/1

标签： jquery html5-canvas easeljs createjs

【解决方案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 坐标。

调用引导弹出框：

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

【讨论】：