2

KineticJs html 5 カスタム シェイプを作成しようとしています。

しかし、それはGoogle chromeでは機能しません。Firefox ではドラッグできず、形状も同じサイズではありません。

誰でも理由がわかりますか？

ライブコードhttp://jsfiddle.net/prantor19/wGE2a/8/

var stage = new Kinetic.Stage({
    container: 'canvas-container',
    width: 500,
    height: 500,
});

var layer = new Kinetic.Layer();

drawWindow = function(canvas) {
    var context = canvas.getContext();
    context.beginPath();
    context.moveTo(this.attrs.x,this.attrs.y);
    context.lineTo(this.attrs.width,this.attrs.y);
    context.lineTo(this.attrs.width,this.attrs.height);
    context.lineTo(this.attrs.x,this.attrs.height);
    context.closePath();
    context.clip();
    context.drawImage(img,this.attrs.img_x,this.attrs.img_y);
}

img = document.createElement('img');
img.src= "http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG/1024px-Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG";

var window1 = new Kinetic.Shape({
    drawFunc: drawWindow,
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    img:img,
    img_x:0,
    img_y:0,
    draggable: true
});

var window2 = new Kinetic.Shape({
    drawFunc: drawWindow,
    x: 10,
    y: 60,
    width: 100,
    height: 100,
    img:img,
    img_x:-250,
    img_y:0,
    draggable: true
});

pointercursor = function() {
    document.body.style.cursor = 'pointer';
}
defaultCursor = function() {
    document.body.style.cursor = 'default';
}

window1.on('mouseover',pointercursor );
window1.on('mouseout', defaultCursor);
window2.on('mouseover',pointercursor );
window2.on('mouseout', defaultCursor);

layer.add(window1);
layer.add(window2);

stage.add(layer);
4

2 に答える 2

1

KienticJS でカスタム シェイプを描画するときは、キャンバス レンダラーを使用する必要があります。そうしないと、シェイプのイベントを処理する方法がありません。カスタム シェイプのチュートリアルは次のとおりです。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

Kinetic.Image シェイプを見て、具体的に画像をどのように処理するかを確認することもできます。

https://github.com/ericdrowell/KineticJS/blob/master/src/shapes/Image.js

于 2013-03-08T03:05:16.660 に答える
1

スクリプトにエラーがあります

クロスオリジン データによってキャンバスが汚染されているため、キャンバスから画像データを取得できません。kinetic-v4.3.2-beta.js:4365 キャッチされないエラー: SecurityError: DOM Exception 18

Chrome は、cavas でのクロス ドメイン イメージの処理を拒否します。

ドラッグするには、シェイプにこのセット ストロークを追加する必要があります

stroke: 'black',

そして drawFunc の最後に

canvas.fillStroke(this);

これがあなたの私の作業バージョンです

http://jsfiddle.net/W7SGT/

于 2013-03-07T17:06:41.910 に答える