1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<canvas id="canvas"></canvas>
<script src="/assets/javascripts/util.js"></script>
<script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
<script src="/assets/javascripts/vendor/vendor/tube.js"></script>
<script src="/assets/javascripts/rectangles/util/constants.js"></script>
<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
<script src="/assets/javascripts/rectangles/models/rect.js"></script>
<script src="/assets/javascripts/rectangles/models/surface.js"></script>
<script>
var w = canvas.width = 600
var h = canvas.height = 400
var ctx = canvas.getContext('2d')
var surface = new Surface ()
surface.add( new Rect( new vec2(10, 100), new vec2(0, 400) ) )
surface.add( new Rect( new vec2(100, 300), new vec2(200, 400) ) )
surface.add( new Rect( new vec2(300, 400), new vec2(0, 300) ) )
surface.add( new Rect( new vec2(400, 500), new vec2(0, 400) ) )
var position = new vec2( 40, 40 )
var dimension = new vec2( 50, 80 )
var bounds = surface.bounds_at_index_with_dimensions(0, dimension)
var delta = new vec2( 0, 0 )
var dragging = false
var mymouse = new mouse({
el: canvas,
down: function(e, cursor){
console.log(cursor.x.a, cursor.y.a)
if (-cursor.x.a > position.a && -cursor.x.a < position.a + dimension.a &&
cursor.y.a > position.b && cursor.y.a < position.b + dimension.b) {
dragging = true
}
},
drag: function(e, cursor){
if (! dragging) return
delta = cursor.delta()
delta.a = - delta.a
var new_bounds = surface.translate(bounds, dimension, position, delta)
bounds = new_bounds || bounds
},
up: function(e, cursor, new_cursor){
position.a += delta.a
position.b += delta.b
delta.zero()
dragging = false
},
})
var colors = ["#ddd", "#eee"]
function draw(){
ctx.clearRect(0,0,w,h)
surface.faces.forEach(function(face, i){
ctx.fillStyle = colors[i % colors.length]
ctx.fillRect(face.x.a, face.y.a, face.width(), face.height())
})
ctx.fillStyle = "rgba(255,0,0,0.1)"
ctx.fillRect(bounds.x.a, bounds.y.a, bounds.width(), bounds.height())
ctx.fillStyle = dragging ? "#ff0" : "#00f"
ctx.fillRect(position.a + delta.a, position.b + delta.b, dimension.a, dimension.b)
}
function animate(){
requestAnimationFrame(animate)
draw()
}
animate()
</script>
|
