Permalink
Browse files

mouse events

  • Loading branch information...
佐々木 竹充
佐々木 竹充 committed May 23, 2009
1 parent dffac83 commit 39c5961bac3620a692ea69144fba5afe36e4b36a
Showing with 77 additions and 111 deletions.
  1. +39 −62 matrix.js
  2. +16 −25 primer.js
  3. +22 −24 test/test_new.html
View
101 matrix.js
@@ -211,28 +211,34 @@ var Mat2D = Class.create(Matrix, {
this._class_name = "Mat2D"
},
zoom: function(zx,zy){
- return new Mat2D([
+/* return new Mat2D([
[zx, 0, 0],
[ 0,zy, 0],
[ 0, 0, 1],
- ]).mul(this)
+ ]).mul(this)*/
+ return this.mul(new Mat2D([
+ [zx, 0, 0],
+ [ 0,zy, 0],
+ [ 0, 0, 1],
+ ]))
},
rotate: function(r){
- return new Mat2D([
+ return this.mul(new Mat2D([
[ Math.cos(r), -Math.sin(r), 0],
[ Math.sin(r), Math.cos(r), 0],
[ 0, 0, 1],
- ]).mul(this)
+ ])) //.mul(this)
},
translate: function(dx,dy){
- return new Mat2D([
+ return this.mul(new Mat2D([
[ 1, 0, dx],
[ 0, 1, dy],
[ 0, 0, 1],
- ]).mul(this)
+ ])) //.mul(this)
},
x: function(m2){
- return m2.mul(this)
+ //return m2.mul(this)
+ return this.mul(m2)
}
})
Mat2D.zoom = function(zx,zy){ return new Mat2D().zoom(zx,zy) }
@@ -246,63 +252,35 @@ Array.prototype.transform = function(mat){
return [result.val[0][0], result.val[1][0]]
}
Array.prototype.x = Array.prototype.transform
-Array.prototype.zoom = function(zx,zy){
+Array.prototype.zoom0 = function(zx,zy){
return this.transform( Mat2D.zoom(zx,zy) )
}
-Array.prototype.rotate = function(r){
+Array.prototype.rotate0 = function(r){
return this.transform( Mat2D.rotate(r) )
}
-Array.prototype.translate = function(zx,zy){
+Array.prototype.translate0 = function(zx,zy){
return this.transform( Mat2D.translate(zx,zy) )
}
Mat2D.test = function(){
-/*
-m1 = new Matrix([
- [1,0,1],
- [0,1,1],
- [0,0,1],
-])
-m1.log()
-m2 = new Matrix([
- [100],
- [100],
- [ 1],
-])
-m2.log()
-m1.mul(m2).log()
-
-//log( [100,100].transform(new Mat2D().zoom(2,3)) ) // [200, 300]
-//log( [100,100].transform(new Mat2D().rotate(90/180*Math.PI)) ) // [-100, 100]
-//log( [100,100].transform(new Mat2D().rotate(45/180*Math.PI)) ) // [0, 141.4....]
-//log( [100,100].transform(new Mat2D().translate(20,30)) ) // [120, 130]
+ var x = 50
+ var y = 0
-log("A", [100,100].transform(new Mat2D().zoom(2,3)) )
-log("B", [100,100].transform(new Mat2D().zoom(2,3).rotate(90/180*Math.PI)) )
-log("C1", [100,100].transform(new Mat2D().zoom(2,3).rotate(90/180*Math.PI).translate(20,30)) )
-log("C2", [100,100].transform(Mat2D.zoom(2,3).rotate(90/180*Math.PI).translate(20,30)) )
-log("C3", [100,100].zoom(2,3).rotate(90/180*Math.PI).translate(20,30) )
-*/
+ var dx = 100
+ var dy = 0
+ var r = 45/180*Math.PI
+ var zx = 1.0
+ var zy = 1.0
- var x = 100
- var y = 200
- var zx = 3
- var zy = 4
- var dx = 50
- var dy = 60
- var r = 90/180*Math.PI
-
- var mat1 = Mat2D.zoom(zx,zy)
+ var mat1 = Mat2D.translate(dx,dy)
mat1.log("mat1")
- var mat2 = Mat2D.rotate(r)
+ var mat2 = Mat2D.zoom(zx,zy)
mat2.log("mat2")
- var mat3 = Mat2D.translate(dx,dy)
+ var mat3 = Mat2D.rotate(r)
mat3.log("mat3")
-
var mat123a = mat1.x(mat2).x(mat3)
mat123a.log("mat123a")
-
- var mat123b = Mat2D.zoom(zx,zy).rotate(r).translate(dx,dy)
+ var mat123b = Mat2D.translate(dx,dy).zoom(zx,zy).rotate(r)
mat123b.log("mat123b")
var mat12 = mat1.x(mat2)
@@ -311,19 +289,18 @@ log("C3", [100,100].zoom(2,3).rotate(90/180*Math.PI).translate(20,30) )
var mat23 = mat2.x(mat3)
mat23.log("mat23")
- log( [x,y].transform(mat123a) )
- log( [x,y].transform(mat123b) )
- log( [x,y].zoom(zx,zy).rotate(r).translate(dx,dy) )
- log( [x,y].transform(mat12).transform(mat3) )
- log( [x,y].transform(mat12).translate(dx,dy) )
- log( [x,y].transform(mat1).transform(mat23) )
- log( [x,y].zoom(zx,zy).transform(mat23) )
-
- log( [x,y].x(mat1).x(mat23) )
- log( [x,y].x(mat1).x(mat2.x(mat3)) )
- log( [x,y].x(mat1).x(mat2).x(mat3) )
- log( [x,y].x(mat1.x(mat2)).x(mat3) )
- log( [x,y].x(mat1.x(mat2).x(mat3)) )
+ log("a", [x,y].transform(mat123a))
+ log("b", [x,y].transform(mat123b))
+ log("c", [x,y].rotate0(r).zoom0(zx,zy).translate0(dx,dy))
+ log("d", [x,y].transform(mat3).transform(mat12))
+ log("e", [x,y].x(mat12.rotate(r)))
+ log("f", [x,y].transform(mat1.x(mat23)))
+ log("g", [x,y].x(mat3).x(mat2).x(mat1))
+ log("h", [x,y].rotate0(r).zoom0(zx,zy).translate0(dx,dy))
+ log("i", [x,y].x(mat1.x(mat2).x(mat3)))
+ log("j", [x,y].x( mat1 .x(mat2) .x(mat3) ) )
+ log("k", [x,y].x( mat1 .x((mat2).x(mat3)) ) )
+ log("l", [x,y].x( (mat1.x(mat2)) .x(mat3) ) )
log("-------------------")
var inv = mat123a.inv()
View
@@ -54,13 +54,22 @@ function definePrimer($) {
var bounds = $(e.currentTarget).offset()
e.localX = e.pageX - bounds.left
e.localY = e.pageY - bounds.top
- _this.root.onMouseMove(_this, e)
+ var layers = _this.root._hit(_this, e)
+ layers.each(function(layer){
+ if(layer.mousemove){ layer.mousemove() }
+ })
})
this.context.text_layer.bind("click", function(e){
var bounds = $(e.currentTarget).offset()
e.localX = e.pageX - bounds.left
e.localY = e.pageY - bounds.top
- _this.root.onClick(_this, e)
+ if (_this.root.x!=0 || _this.root.y!=0) {
+ log("warn", this.x, this.y)
+ }
+ var layers = _this.root._hit(_this, e)
+ layers.each(function(layer){
+ if(layer.click){ layer.click() }
+ })
})
},
@@ -110,15 +119,14 @@ function definePrimer($) {
orig_translate: this.context.translate,
translate: function(x, y){
var cs = this.currentState()
-//log(cs.mat2d)
- cs.mat2d = cs.mat2d.translate(x, y)
+ cs.mat2d = cs.mat2d.translate(x,y) //Mat2D.translate(x, y).x(cs.mat2d)
this.orig_translate(x, y)
},
orig_rotate: this.context.rotate,
rotate: function(r){
var cs = this.currentState()
- cs.mat2d = cs.mat2d.rotate(r)
+ cs.mat2d = cs.mat2d.rotate(r) //Mat2D.rotate(r).x(cs.mat2d)
this.orig_rotate(r)
},
// TODO save states as 'transform matrix' http://www.html5.jp/canvas/ref/method/transform.html
@@ -185,7 +193,7 @@ function definePrimer($) {
//var testX = this.hitDetect.e.localX-cs.x
//var testY = this.hitDetect.e.localY-cs.y
var testXY = [this.hitDetect.e.localX, this.hitDetect.e.localY].transform(cs.mat2d.inv())
-log(testXY)
+//log(testXY)
if(this.isPointInPath(testXY[0], testXY[1])) {
this.hitDetect.hit = true
}
@@ -352,9 +360,9 @@ log(testXY)
/* hit */
_hit: function(primer, e) {
if(!this.visible) { return [] }
-log(this.name, e.localX, e.localY)
+//log(this.name, e.localX, e.localY)
var layers = []
- primer.context.hitDetect = {x:this.x, y:this.y, hit:false, e:e}
+ primer.context.hitDetect = {hit:false, e:e}
primer.context.save()
primer.context.translate(this.x, this.y)
primer.context.rotate(this.rotation)
@@ -370,23 +378,6 @@ log(this.name, e.localX, e.localY)
primer.context.restore()
return layers
},
-
- /* onMouseMove */
- onMouseMove: function(primer, e) {
- },
-
- /* onClick */
- onClick: function(primer, e) {
- if (this.x!=0 || this.y!=0) {
- log("warn", this.x, this.y)
- }
- var layers = this._hit(primer, e)
- log("layers.length", layers.length)
- layers.each(function(layer){
- log(layer.name, layer.x, layer.y)
- })
- log("=====================================")
- },
}) // class Primer.Layer
return Primer
View
@@ -16,7 +16,7 @@
<script type="text/javascript" src="../primer.js" ></script>
<script type="text/javascript">
-Mat2D.test()
+//Mat2D.test()
jQuery(function() {
var p1 = new Primer({container:"#div1", debug:true})
@@ -30,7 +30,7 @@
ctx.lineTo(20, 0)
ctx.stroke()
}
-/*
+
//----------------------------------
var blue = p1.root.createChild({name:"blue", x:40, y:40,
draw: function(ctx){
@@ -39,28 +39,16 @@
ctx.fillRect(0, 0, 50, 50, "hit=rectBlue")
}
})
-*/
+
//----------------------------------
- var red1 = p1.root.createChild({name:"red1", x:100, y:0,
+ var red1 = p1.root.createChild({name:"red1", x:200, y:200,
draw: function(ctx){
drawZero(ctx, "#FFCCCC")
ctx.fillStyle = "#FFCCCC"
ctx.fillRect(2, 2, 45, 5, "hit=rectRed1")
-
- var xy = [30,30].transform(ctx.currentState().mat2d)
- red1b.x = xy[0]
- red1b.y = xy[1]
}
})
-red1.rotation = 45/180*Math.PI;
-var red1b = p1.root.createChild({name:"red1->[30,30]", x:0, y:0,
- draw: function(ctx){
- drawZero(ctx, "#0000cc")
- }
-})
-
-/*
var red2 = red1.createChild({name:"red2", x:50, y:0,
draw: function(ctx){
drawZero(ctx, "#FF6666")
@@ -74,12 +62,24 @@
drawZero(ctx, "#FF0000")
ctx.fillStyle = "#FF0000"
ctx.fillRect(2, 2, 45, 5, "hit=rectRed3")
+
+ var xy = [50,0].transform(ctx.currentState().mat2d)
+ red3b.x = xy[0]
+ red3b.y = xy[1]
+ },
+ mousemove: function(){
+ log("red3:mousemove")
+ },
+ })
+
+ // for Mat2D test
+ var red3b = p1.root.createChild({name:"red3->[50,0]", x:0, y:0,
+ draw: function(ctx){
+ drawZero(ctx, "#0000cc")
}
})
-*/
-/*
//----------------------------------
var green = p1.root.createChild({name:"green", x:10, y:60, fillStyle:"#008800",
draw: function(ctx){
@@ -142,12 +142,11 @@
ctx.fillRect(0, 0, 20, 20, "hit=rectYellow")
},
})
-*/
+
//----------------------------------
var dx = 1;
var dy = 1;
function go() {
-/*
orange.x += dx
if(orange.x<=-30){ dx = +3; }
if(300<=orange.x){ dx = -2; }
@@ -159,11 +158,10 @@
text.x = orange.x*2
text.y = 70-blue.y
yellow.rotation += -3*Math.PI/180
-*/
-// red1.rotation += 2*Math.PI/180
-// red2.rotation += -3*Math.PI/180
-// red3.rotation += 1*Math.PI/180
+ red1.rotation += 2*Math.PI/180
+ red2.rotation += -3*Math.PI/180
+ red3.rotation += -1*Math.PI/180
p1.redraw();
}

0 comments on commit 39c5961

Please sign in to comment.