初めに
Create.jsで四角形のオブジェクトを作って、移動させてみます
やってみたこと
図形追加ONボタンを押したとき
- マウスを押下した位置からマウスを離した箇所まで四角形を描画します
- マウスを離すまでオブジェクトの縮小のもできます
図形追加OFFボタンを押したとき
- 描画したオブジェクトを移動することができます
注意点
Canvasにオブジェクトを追加するイベントはCanvasに追加する必要がある
オブジェクトを移動するイベントはオブジェクト自身（正確にはCreate.jsのShape）に追加する必要がある
ソース
sample.js
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/base.css" />
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
//Canvasに対する各種イベント処理を管理するオブジェクト
var myCanvasHander
//Canvasに対する各種イベント処理の追加、削除を管理するオブジェクト定義します
var sOpe
function MyCanvasHander(mystage){
//CreateJsのStageオブジェクト
var lstage = mystage
var dragPointX
var dragPointY
var myshape
var mouseclickflag
var firstmove
this.handleDown = function(e) {
// ドラッグを開始した座標を覚えておく
var rect = e.target.getBoundingClientRect();
dragPointX = e.clientX - rect.left;
dragPointY = e.clientY - rect.top;
mouseclickflag =true
firstmove = true;
}
this.handleMousemove = function(e){
if(!mouseclickflag)return
//mouseDownイベント後の初回のMoveイベント時は前のshapeは削除しない
if(!firstmove && myshape && myshape.shape){
lstage.removeChild(myshape.shape)
console.log("shape removed")
}
firstmove = false
var rect = e.target.getBoundingClientRect();
myshape = new Rectengle(
dragPointX,
dragPointY,
e.clientX - rect.left-dragPointX,
e.clientY - rect.top-dragPointY,
"Yellow")
myshape.init(lstage)
myshape.shape.alpha = 0.5;
}
this.handleMouseup = function(e){
var rect = e.target.getBoundingClientRect();
console.log(myshape)
myshape.shape.alpha = 1.0;
mouseclickflag =false
}
}
function ShapeOperationToCanvas(myCanvasHander){
//Canvasに対する各種イベントの定義を行います
var funcs ={
mousedown:{handleDown:myCanvasHander.handleDown},
mousemove:{handleMousemove:myCanvasHander.handleMousemove},
mouseup:{handleMouseup:myCanvasHander.handleMouseup}
}
//Canvasに対する各種イベントを追加します
this.addOperation = function(){
var canvas = document.getElementById('myCanvas');
canvas.addEventListener('mousedown', funcs['mousedown']['handleDown'], false);
canvas.addEventListener('mousemove', funcs['mousemove']['handleMousemove'], false);
canvas.addEventListener('mouseup', funcs['mouseup']['handleMouseup'], false);
}
//Canvasに対する各種イベントを削除します
this.removeOperation = function (){
var canvas = document.getElementById('myCanvas');
canvas.removeEventListener('mousedown', funcs['mousedown']['handleDown']);
canvas.removeEventListener('mousemove', funcs['mousemove']['handleMousemove']);
canvas.removeEventListener('mouseup', funcs['mouseup']['handleMouseup']);
}
}
// ページの読み込みが終わってから初期化
window.addEventListener("load", init);
function init() {
//Stageの生成とキャンバスに対する操作は
//画面のロード完了後、実行する
myCanvasHander= new MyCanvasHander(new createjs.Stage("myCanvas"))
sOpe = new ShapeOperationToCanvas(myCanvasHander)
}
function Rectengle(start_x,start_y,end_x,end_y,color){
this.width=end_x-start_x
this.height=end_y-start_y
this.color=color
this.start_x=start_x
this.start_y=start_y
this.end_x=end_x
this.end_y=end_y
this.shape
this.init = function(stage){
// 初期化
// 図形を作成
this.shape = new createjs.Shape();
stage.addChild(this.shape);
this.shape.graphics.beginFill(color)
.drawRect(this.start_x,this.start_y,this.end_x,this.end_y);
// ドラッグした場所を保存する変数
var dragPointX;
var dragPointY;
// インタラクティブの設定 drawShape
this.shape.addEventListener("mousedown", handleDown);
this.shape.addEventListener("pressmove", handleMove);
this.shape.addEventListener("pressup", handleUp);
stage.update()
var _self = this;
// 図形を押したときの処理です
function handleDown(event) {
sOpe.removeOperation()
// ドラッグを開始した座標を覚えておく
dragPointX = stage.mouseX - _self.shape.x;
dragPointY = stage.mouseY - _self.shape.y;
// ボールを半透明にする
_self.shape.alpha = 0.3;
}
// 図形を押した状態で動かしたときの処理です
function handleMove(event) {
// ボールはマウス座標に追随する
// ただしドラッグ開始地点との補正をいれておく
_self.shape.x = stage.mouseX - dragPointX;
_self.shape.y = stage.mouseY - dragPointY;
}
// ボールからマウスを離したときの処理です
function handleUp(event) {
// ボールを元の透明度に戻す
_self.shape.alpha = 1.0;
}
// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update(); // 画面更新
}
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas><br>
<input type = button value = "図形追加 ON" onclick="sOpe.addOperation()">
<input type = button value = "図形追加 OFF" onclick="sOpe.removeOperation()">
</body>
</html>