こんにちは。
CreateJS でドラッグできないのかと詰め寄られた ひろゆき です。
今回は、ひよこちゃんをドラッグして移動させることに挑戦してみます。
どうかな？どうかな？
HTMLソースコード
[sourcecode language=”js”]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Piyo [drag] | CreateJS</title>
<link rel="stylesheet" type="text/css" href="css/index.css" media="all">
<script src="js/easeljs-0.7.0.min.js"></script>
<script src="js/tweenjs-0.5.0.min.js"></script>
<script src="js/movieclip-0.7.0.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/stats.min.js"></script>
<script>
var canvas, stage, piyo, stats;
var mousePoint;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
var sky = new createjs.Shape();
stage.addChild(sky);
sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 150);
sky.graphics.drawRect(0, 0, 600, 150);
var ground = new createjs.Shape();
stage.addChild(ground);
ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 150, 0, 200);
ground.graphics.drawRect(0, 150, 600, 50);
piyo = new lib.Piyo();
stage.addChild(piyo);
piyo.x = canvas.width/2;
piyo.y = 170;
//piyo.onPress = press;
piyo.addEventListener("mousedown", press);
stage.update();
createjs.Ticker.setFPS(30);
//createjs.Ticker.useRAF = true;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
//createjs.Ticker.addListener(this);
createjs.Ticker.addEventListener("tick", tick);
}
function press(event) {
//mousePoint = this.globalToLocal(event.stageX, event.stageY);
//event.onMouseUp = release;
//event.onMouseMove = drag;
//event.instance = this;
//mousePoint = event.target.globalToLocal(event.stageX, event.stageY);
//event.addEventListener("mouseup", release);
//event.addEventListener("mousemove", drag);
var instance = event.currentTarget;
mousePoint = instance.globalToLocal(event.stageX, event.stageY);
instance.addEventListener("pressmove", drag);
instance.addEventListener("pressup", release);
}
function release(event) {
//this.onMouseUp = null;
//this.onMouseMove = null;
//event.removeEventListener("mouseup", release);
//event.removeEventListener("mousemove", drag);
var instance = event.currentTarget;
instance.removeEventListener("pressmove", drag);
instance.removeEventListener("pressup", release);
}
function drag(event) {
//var instance = this.instance;
//var instance = event.target;
//var offset = instance.localToGlobal(mousePoint.x, mousePoint.y);
//instance.x += event.stageX – offset.x;
//instance.y += event.stageY – offset.y;
var instance = event.currentTarget;
instance.x = event.stageX – mousePoint.x;
instance.y = event.stageY – mousePoint.y;
stage.update();
}
function tick() {
stage.update();
stats.update();
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="600" height="200" style="background-color:#FFFFFF"></canvas>
</body>
</html>[/sourcecode]
でけたー！
[追記] (2013.06.30.)
Ticker.addListener() は非推奨になっているようなので、書き換えました。
[追記] (2013.10.30.)
CreateJS を 0.7.0 にバージョンアップ。
Ticker.useRAF は非推奨になっているようなので、書き換えました。
ドラッグの方法も、書き換えました。
