2

キャンバスに 2D コンテキストを作成しました。そのコンテキストでは...関数を使用して...いくつかの「円オブジェクト」を作成できます。今、私が望むのは、コンテキスト全体の画像データではなく、単一の円オブジェクトの ImageData を取得することです。

以下のコードでは、私の願いがコメントアウトされていることがわかります。

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

var circle = function (X,Y) {
    var that = this;
    that.X = X;
    that.Y = Y;
    that.clicked = function(e) {
        //
        //
        //!!!!!!!!!!!!!!
        // Code below works fine, on context level
        imgData = ctx.getImageData(e.pageX, e.pageY, 1, 1);
        //
        // Code below is at the level of the circle, that's what I want, but isn't working
        imgData = that.getImageData(e.pageX, e.pageY, 1, 1);
        //!!!!!!!!!!!!!!
        //
        //
        alert(imgData.data[3]);
    }
    that.draw = function () {
        ctx.save();
        ctx.translate(that.X, that.Y);
        ctx.fillStyle = '#33cc33';
        ctx.beginPath();
        ctx.arc(0, 0, 50, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }
}
var circles = new Array();
circles.push(new circle(50,50));
document.addEventListener('click',function() {
    circles.forEach(function(circ,index){
        circ.clicked();
    });
})

では、特定のオブジェクトの画像データを取得するにはどうすればよいでしょうか?

編集: 最初に円を描画する必要があることを理解しています。コードの後半でそれを行いますが、コンテキストに背景四角形がある場合、円の横をクリックすると、その imageData が取得されますアルファ rgba の 0 値を返したい場合は、背景の四角形。

4

5 に答える 5

1

Canvas はビットマップ グラフィック ツールであることを思い出してください。単一のコンテキストに描画するものはすべて、同じオブジェクトの一部になります。そのキャンバスに描画するために使用した「オブジェクト」ごとに個別の画像データを取得することはできません... draw().

探しているようなことを行う唯一の方法は、別々のキャンバス コンテキストを作成し、それを互いに重ね合わせることです。これは、KineticJS ( http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/ ) などのライブラリを利用することでより適切に処理できます。他の唯一のオプションは、SVG などのオブジェクト指向の描画ツールを使用することです (たとえば、Raphael.js を介して: http://raphaeljs.com )。これにより、グラフィックス スペースに個別のオブジェクトが保持されます。

getImageData のリファレンスについては、http: //www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/ を参照してください。

于 2014-02-10T14:44:57.763 に答える
0

最初に、2 つのキャンバス要素を作成します。1 で表示、1 でピクセルデータを計算します。

var c = document.getElementById('canvas');
var c2 = document.getElementById('canvas2');
var ctx = c.getContext('2d');
var ctx2 = c2.getContext('2d');

var width = window.innerWidth,
    height = window.innerHeight;

c.width = ctx.width = c2.width = ctx2.width = width;
c.height = ctx.height = c2.height = ctx2.height = height;

画像を作成する関数を作成するよりも

function Afbeelding(src, X, Y, W, H) {
    var that = this;
    that.X = X;
    that.Y = Y;
    that.W = W;
    that.H = H;
    that.onClick = function () { };
    that.image = new Image(that.W, that.H);
    that.image.src = src;
    that.draw = function (context) { 
        context = (typeof context != 'undefined') ? context : ctx;
        context.save();
        context.translate(that.X, that.Y);
        context.drawImage(that.image, 0, 0, that.W, that.H);
        context.restore();
    }

document.click イベントが発生すると、次の関数 (Afbeelding 関数内) が呼び出されます。

that.clicked = function (e) {
    if ((e.pageX > that.X - (that.W / 2) && e.pageX < that.X + (that.W / 2)) && (e.pageY > that.Y - (that.H / 2) && e.pageY < that.Y + (that.H / 2))) {
        if (that.isNotTransparent(e)) {
            that.onClick();
        }
    }
}

この関数 (Afbeelding 関数内でも) は、ピクセルの透明度をチェックするために使用されます。

    that.isNotTransparent = function (e) {
        var result = false;
        ctx2.clearRect(0, 0, width, height);
        that.draw(ctx2);
        var imgData = ctx2.getImageData(e.pageX, e.pageY, 1, 1);
        ctx2.clearRect(0, 0, width, height);
        if (imgData.data[3] > 0) {
            result = true;
        }
        return result;
    }
}

そして、以下のすべては、上のものを起動することです。

var items = new Array();

var afb = new Afbeelding();
afb.draw();
afb.onClick = function () {
    alert('clicked');
}
items.push(afb);


document.addEventListener('mousedown', function (e) {
    items.forEach(function (item, index) {
        item.clicked(e);
    });
});
于 2014-02-12T14:50:27.183 に答える