Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

mouse events

  • Loading branch information...
commit 39c5961bac3620a692ea69144fba5afe36e4b36a 1 parent dffac83
authored May 23, 2009
101  matrix.js
@@ -211,28 +211,34 @@ var Mat2D = Class.create(Matrix, {
211 211
     this._class_name = "Mat2D"
212 212
   },
213 213
   zoom: function(zx,zy){
214  
-    return new Mat2D([
  214
+/*    return new Mat2D([
215 215
       [zx, 0, 0],
216 216
       [ 0,zy, 0],
217 217
       [ 0, 0, 1],
218  
-    ]).mul(this)
  218
+    ]).mul(this)*/
  219
+    return this.mul(new Mat2D([
  220
+      [zx, 0, 0],
  221
+      [ 0,zy, 0],
  222
+      [ 0, 0, 1],
  223
+    ]))
219 224
   },
220 225
   rotate: function(r){
221  
-    return new Mat2D([
  226
+    return this.mul(new Mat2D([
222 227
       [ Math.cos(r), -Math.sin(r), 0],
223 228
       [ Math.sin(r),  Math.cos(r), 0],
224 229
       [           0,            0, 1],
225  
-    ]).mul(this)
  230
+    ])) //.mul(this)
226 231
   },
227 232
   translate: function(dx,dy){
228  
-    return new Mat2D([
  233
+    return this.mul(new Mat2D([
229 234
       [ 1, 0, dx],
230 235
       [ 0, 1, dy],
231 236
       [ 0, 0,  1],
232  
-    ]).mul(this)
  237
+    ])) //.mul(this)
233 238
   },
234 239
   x: function(m2){
235  
-    return m2.mul(this)
  240
+    //return m2.mul(this)
  241
+    return this.mul(m2)
236 242
   }
237 243
 })
238 244
 Mat2D.zoom      = function(zx,zy){ return new Mat2D().zoom(zx,zy) }
@@ -246,63 +252,35 @@ Array.prototype.transform = function(mat){
246 252
   return [result.val[0][0], result.val[1][0]]
247 253
 }
248 254
 Array.prototype.x = Array.prototype.transform
249  
-Array.prototype.zoom = function(zx,zy){
  255
+Array.prototype.zoom0 = function(zx,zy){
250 256
   return this.transform( Mat2D.zoom(zx,zy) )
251 257
 }
252  
-Array.prototype.rotate = function(r){
  258
+Array.prototype.rotate0 = function(r){
253 259
   return this.transform( Mat2D.rotate(r) )
254 260
 }
255  
-Array.prototype.translate = function(zx,zy){
  261
+Array.prototype.translate0 = function(zx,zy){
256 262
   return this.transform( Mat2D.translate(zx,zy) )
257 263
 }
258 264
 
259 265
 Mat2D.test = function(){
260  
-/*
261  
-m1 = new Matrix([
262  
-  [1,0,1],
263  
-  [0,1,1],
264  
-  [0,0,1],
265  
-])
266  
-m1.log()
267  
-m2 = new Matrix([
268  
-  [100],
269  
-  [100],
270  
-  [  1],
271  
-])
272  
-m2.log()
273  
-m1.mul(m2).log()
274  
-
275  
-//log( [100,100].transform(new Mat2D().zoom(2,3)) )              // [200, 300]
276  
-//log( [100,100].transform(new Mat2D().rotate(90/180*Math.PI)) ) // [-100, 100]
277  
-//log( [100,100].transform(new Mat2D().rotate(45/180*Math.PI)) ) // [0, 141.4....]
278  
-//log( [100,100].transform(new Mat2D().translate(20,30)) )       // [120, 130]
  266
+  var x  = 50
  267
+  var y  =  0
279 268
 
280  
-log("A",  [100,100].transform(new Mat2D().zoom(2,3)) )
281  
-log("B",  [100,100].transform(new Mat2D().zoom(2,3).rotate(90/180*Math.PI)) )
282  
-log("C1", [100,100].transform(new Mat2D().zoom(2,3).rotate(90/180*Math.PI).translate(20,30)) )
283  
-log("C2", [100,100].transform(Mat2D.zoom(2,3).rotate(90/180*Math.PI).translate(20,30)) )
284  
-log("C3", [100,100].zoom(2,3).rotate(90/180*Math.PI).translate(20,30) )
285  
-*/
  269
+  var dx = 100
  270
+  var dy =   0
  271
+  var r  = 45/180*Math.PI
  272
+  var zx = 1.0
  273
+  var zy = 1.0
286 274
 
287  
-  var x  = 100
288  
-  var y  = 200
289  
-  var zx = 3
290  
-  var zy = 4
291  
-  var dx = 50
292  
-  var dy = 60
293  
-  var r  = 90/180*Math.PI
294  
-
295  
-  var mat1    = Mat2D.zoom(zx,zy)
  275
+  var mat1    = Mat2D.translate(dx,dy)
296 276
   mat1.log("mat1")
297  
-  var mat2    = Mat2D.rotate(r)
  277
+  var mat2    = Mat2D.zoom(zx,zy)
298 278
   mat2.log("mat2")
299  
-  var mat3    = Mat2D.translate(dx,dy)
  279
+  var mat3    = Mat2D.rotate(r)
300 280
   mat3.log("mat3")
301  
-
302 281
   var mat123a = mat1.x(mat2).x(mat3)
303 282
   mat123a.log("mat123a")
304  
-
305  
-  var mat123b = Mat2D.zoom(zx,zy).rotate(r).translate(dx,dy)
  283
+  var mat123b = Mat2D.translate(dx,dy).zoom(zx,zy).rotate(r)
306 284
   mat123b.log("mat123b")
307 285
 
308 286
   var mat12 = mat1.x(mat2)
@@ -311,19 +289,18 @@ log("C3", [100,100].zoom(2,3).rotate(90/180*Math.PI).translate(20,30) )
311 289
   var mat23 = mat2.x(mat3)
312 290
   mat23.log("mat23")
313 291
 
314  
-  log( [x,y].transform(mat123a) )
315  
-  log( [x,y].transform(mat123b) )
316  
-  log( [x,y].zoom(zx,zy).rotate(r).translate(dx,dy) )
317  
-  log( [x,y].transform(mat12).transform(mat3) )
318  
-  log( [x,y].transform(mat12).translate(dx,dy) )
319  
-  log( [x,y].transform(mat1).transform(mat23) )
320  
-  log( [x,y].zoom(zx,zy).transform(mat23) )
321  
-
322  
-  log( [x,y].x(mat1).x(mat23) )
323  
-  log( [x,y].x(mat1).x(mat2.x(mat3)) )
324  
-  log( [x,y].x(mat1).x(mat2).x(mat3) )
325  
-  log( [x,y].x(mat1.x(mat2)).x(mat3) )
326  
-  log( [x,y].x(mat1.x(mat2).x(mat3)) )
  292
+  log("a", [x,y].transform(mat123a))
  293
+  log("b", [x,y].transform(mat123b))
  294
+  log("c", [x,y].rotate0(r).zoom0(zx,zy).translate0(dx,dy))
  295
+  log("d", [x,y].transform(mat3).transform(mat12))
  296
+  log("e", [x,y].x(mat12.rotate(r)))
  297
+  log("f", [x,y].transform(mat1.x(mat23)))
  298
+  log("g", [x,y].x(mat3).x(mat2).x(mat1))
  299
+  log("h", [x,y].rotate0(r).zoom0(zx,zy).translate0(dx,dy))
  300
+  log("i", [x,y].x(mat1.x(mat2).x(mat3)))
  301
+  log("j", [x,y].x(  mat1  .x(mat2)  .x(mat3) ) )
  302
+  log("k", [x,y].x(  mat1  .x((mat2).x(mat3)) ) )
  303
+  log("l", [x,y].x( (mat1.x(mat2))  .x(mat3)  ) )
327 304
 
328 305
   log("-------------------")
329 306
   var inv = mat123a.inv()
41  primer.js
@@ -54,13 +54,22 @@ function definePrimer($) {
54 54
         var bounds = $(e.currentTarget).offset()
55 55
         e.localX = e.pageX - bounds.left
56 56
         e.localY = e.pageY - bounds.top
57  
-        _this.root.onMouseMove(_this, e)
  57
+        var layers = _this.root._hit(_this, e)
  58
+        layers.each(function(layer){
  59
+          if(layer.mousemove){ layer.mousemove() }
  60
+        })
58 61
       })
59 62
       this.context.text_layer.bind("click", function(e){
60 63
         var bounds = $(e.currentTarget).offset()
61 64
         e.localX = e.pageX - bounds.left
62 65
         e.localY = e.pageY - bounds.top
63  
-        _this.root.onClick(_this, e)
  66
+        if (_this.root.x!=0 || _this.root.y!=0) {
  67
+          log("warn", this.x, this.y)
  68
+        }
  69
+        var layers = _this.root._hit(_this, e)
  70
+        layers.each(function(layer){
  71
+          if(layer.click){ layer.click() }
  72
+        })
64 73
       })
65 74
     },
66 75
 
@@ -110,15 +119,14 @@ function definePrimer($) {
110 119
         orig_translate: this.context.translate,
111 120
         translate: function(x, y){
112 121
           var cs = this.currentState()
113  
-//log(cs.mat2d)
114  
-          cs.mat2d = cs.mat2d.translate(x, y)
  122
+          cs.mat2d = cs.mat2d.translate(x,y) //Mat2D.translate(x, y).x(cs.mat2d)
115 123
           this.orig_translate(x, y)
116 124
         },
117 125
 
118 126
         orig_rotate: this.context.rotate,
119 127
         rotate: function(r){
120 128
           var cs = this.currentState()
121  
-          cs.mat2d = cs.mat2d.rotate(r)
  129
+          cs.mat2d = cs.mat2d.rotate(r) //Mat2D.rotate(r).x(cs.mat2d)
122 130
           this.orig_rotate(r)
123 131
         },
124 132
 // TODO save states as 'transform matrix' http://www.html5.jp/canvas/ref/method/transform.html
@@ -185,7 +193,7 @@ function definePrimer($) {
185 193
           //var testX = this.hitDetect.e.localX-cs.x
186 194
           //var testY = this.hitDetect.e.localY-cs.y
187 195
           var testXY = [this.hitDetect.e.localX, this.hitDetect.e.localY].transform(cs.mat2d.inv())
188  
-log(testXY)
  196
+//log(testXY)
189 197
           if(this.isPointInPath(testXY[0], testXY[1])) {
190 198
             this.hitDetect.hit = true
191 199
           }
@@ -352,9 +360,9 @@ log(testXY)
352 360
     /* hit */
353 361
     _hit: function(primer, e) {
354 362
       if(!this.visible) { return [] }
355  
-log(this.name, e.localX, e.localY)
  363
+//log(this.name, e.localX, e.localY)
356 364
       var layers = []
357  
-      primer.context.hitDetect = {x:this.x, y:this.y, hit:false, e:e}
  365
+      primer.context.hitDetect = {hit:false, e:e}
358 366
       primer.context.save()
359 367
       primer.context.translate(this.x, this.y)
360 368
       primer.context.rotate(this.rotation)
@@ -370,23 +378,6 @@ log(this.name, e.localX, e.localY)
370 378
       primer.context.restore()
371 379
       return layers
372 380
     },
373  
-
374  
-    /* onMouseMove */
375  
-    onMouseMove: function(primer, e) {
376  
-    },
377  
-
378  
-    /* onClick */
379  
-    onClick: function(primer, e) {
380  
-      if (this.x!=0 || this.y!=0) {
381  
-        log("warn", this.x, this.y)
382  
-      }
383  
-      var layers = this._hit(primer, e)
384  
-      log("layers.length", layers.length)
385  
-      layers.each(function(layer){
386  
-        log(layer.name, layer.x, layer.y)
387  
-      })
388  
-      log("=====================================")
389  
-    },
390 381
   }) // class Primer.Layer
391 382
 
392 383
   return Primer
46  test/test_new.html
@@ -16,7 +16,7 @@
16 16
     <script type="text/javascript" src="../primer.js"              ></script>
17 17
 
18 18
     <script type="text/javascript">
19  
-Mat2D.test()
  19
+//Mat2D.test()
20 20
 
21 21
       jQuery(function() {
22 22
         var p1 = new Primer({container:"#div1", debug:true})
@@ -30,7 +30,7 @@
30 30
           ctx.lineTo(20,  0)
31 31
           ctx.stroke()
32 32
         }
33  
-/*
  33
+
34 34
         //----------------------------------
35 35
         var blue = p1.root.createChild({name:"blue", x:40, y:40,
36 36
           draw: function(ctx){
@@ -39,28 +39,16 @@
39 39
             ctx.fillRect(0, 0, 50, 50, "hit=rectBlue")
40 40
           }
41 41
         })
42  
-*/
  42
+
43 43
         //----------------------------------
44  
-        var red1 = p1.root.createChild({name:"red1", x:100, y:0,
  44
+        var red1 = p1.root.createChild({name:"red1", x:200, y:200,
45 45
           draw: function(ctx){
46 46
             drawZero(ctx, "#FFCCCC")
47 47
             ctx.fillStyle = "#FFCCCC"
48 48
             ctx.fillRect(2, 2, 45, 5, "hit=rectRed1")
49  
-
50  
-            var xy = [30,30].transform(ctx.currentState().mat2d)
51  
-            red1b.x = xy[0]
52  
-            red1b.y = xy[1]
53 49
           }
54 50
         })
55  
-red1.rotation = 45/180*Math.PI;
56 51
 
57  
-var red1b = p1.root.createChild({name:"red1->[30,30]", x:0, y:0,
58  
-  draw: function(ctx){
59  
-    drawZero(ctx, "#0000cc")
60  
-  }
61  
-})
62  
-
63  
-/*
64 52
         var red2 = red1.createChild({name:"red2", x:50, y:0,
65 53
           draw: function(ctx){
66 54
             drawZero(ctx, "#FF6666")
@@ -74,12 +62,24 @@
74 62
             drawZero(ctx, "#FF0000")
75 63
             ctx.fillStyle = "#FF0000"
76 64
             ctx.fillRect(2, 2, 45, 5, "hit=rectRed3")
  65
+
  66
+            var xy = [50,0].transform(ctx.currentState().mat2d)
  67
+            red3b.x = xy[0]
  68
+            red3b.y = xy[1]
  69
+          },
  70
+          mousemove: function(){
  71
+            log("red3:mousemove")
  72
+          },
  73
+        })
  74
+
  75
+        // for Mat2D test
  76
+        var red3b = p1.root.createChild({name:"red3->[50,0]", x:0, y:0,
  77
+          draw: function(ctx){
  78
+            drawZero(ctx, "#0000cc")
77 79
           }
78 80
         })
79  
-*/
80 81
 
81 82
 
82  
-/*
83 83
         //----------------------------------
84 84
         var green = p1.root.createChild({name:"green", x:10, y:60, fillStyle:"#008800",
85 85
           draw: function(ctx){
@@ -142,12 +142,11 @@
142 142
             ctx.fillRect(0, 0, 20, 20, "hit=rectYellow")
143 143
           },
144 144
         })
145  
-*/
  145
+
146 146
         //----------------------------------
147 147
         var dx = 1;
148 148
         var dy = 1;
149 149
         function go() {
150  
-/*
151 150
           orange.x += dx
152 151
           if(orange.x<=-30){ dx = +3; }
153 152
           if(300<=orange.x){ dx = -2; }
@@ -159,11 +158,10 @@
159 158
           text.x = orange.x*2
160 159
           text.y = 70-blue.y
161 160
           yellow.rotation += -3*Math.PI/180
162  
-*/
163 161
 
164  
-//          red1.rotation +=  2*Math.PI/180
165  
-//          red2.rotation += -3*Math.PI/180
166  
-//          red3.rotation +=  1*Math.PI/180
  162
+          red1.rotation +=   2*Math.PI/180
  163
+          red2.rotation +=  -3*Math.PI/180
  164
+          red3.rotation +=  -1*Math.PI/180
167 165
 
168 166
           p1.redraw();
169 167
         }

0 notes on commit 39c5961

Please sign in to comment.
Something went wrong with that request. Please try again.