3

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

クリック/タッチ イベントのレンダリングされた形状にリスナーを追加できますが、Bootstrap Popover や niceScroll などのプラグインで使用するために、各グラフィックを DOM 要素として参照できるようにしたいと考えています$(shape1).popover('show');。私は積極的に解決策に取り組んできましたが、成功していません。どんな助けも大歓迎です!

4

1 に答える 1

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 :

非表示の DOM 要素に CSS を適用することで、クリック イベントとタッチ イベントの 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>
于 2012-11-16T02:19:18.030 に答える