0

キャンバス上の画像にドラッグアンドサイズ変更効果を持たせるために、Kineticjsライブラリを使用したいと思います。だから私はこの例に従っていますhttp://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

私のhtmlはそのようなものだとしましょう：

.....
<div id="container"></div>
.....

次に、ロード時に次のことを行います。

$(document).ready(function() {  
    loadImage()
});

function loadImage(){

imageObj = new Image();      
imageObj.onload  = function(){
    var stage = new Kinetic.Stage("container", 578, 200);
    var layer = new Kinetic.Layer();   

    var x = stage.width / 2 - 200 / 2;
    var y = stage.height / 2 - 137 / 2;

    var image = new Kinetic.Image({
        image: imageObj,
        x: x,
        y: y
    });

    image.draggable(true);

    // add cursor styling
    image.on("mouseover", function(){
        document.body.style.cursor = "pointer";
    });
    image.on("mouseout", function(){
        document.body.style.cursor = "default";
    });
    layer.add(image);
    stage.add(layer);
};
imageObj.src = 'myImage.png';
}

しかし、私が得るのはこのメッセージです：

「UncaughtTypeError：undefinedのメソッド'appendChild'を呼び出せません」参照コンテナdivで考えます。何が問題なのですか？

前もって感謝します

4

2 に答える 2

0

setDraggableを試してください：

image.setDraggable(true);

しかし、質問する必要があります。なぜ、Kineticのキャンバスコンストラクターを使用しないのですか？キャンバスを直接操作している場合は、このライブラリを使用できないと思います

于 2012-08-31T15:21:29.840 に答える
0

コンストラクターの呼び出しが正しくありません。

試す

var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 363
});

ドラッグ部分については、レイヤーをドラッグ可能にすることができます

var layer = new Kinetic.Layer({draggable: true});

このフィドルでこれが機能する基本的な例を見ることができます

于 2012-09-03T08:33:54.573 に答える