キャンバス上の画像にドラッグアンドサイズ変更効果を持たせるために、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で考えます。何が問題なのですか?
前もって感謝します