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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<div id="scene"></div>
<div style="position:fixed;top:419px;left:10px;">
<input id="url" value="http://i.asdf.us/im/97/imgrid_1400887539_xx_abridged___dmgk.png">
<input id="scale" type="range" min="0.01" max="10.0" step="0.1" value="1.0">
<div id="cursor" style="width:30px;height:30px;background:blue;display:inline-block;"></div>
</div>
<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/tube.js"></script>
<script src="/assets/javascripts/vendor/loader.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 = scene.width = 600
var h = scene.height = 400
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 colors = "#f00 #ff0 #0ff #00f #f0f".split(" ")
surface.faces.forEach(function(face, i){
var el = document.createElement("div")
el.style.position = "absolute"
el.style.backgroundColor = colors[i%colors.length]
el.style.top = face.y.a + "px"
el.style.left = face.x.a + "px"
el.style.width = face.width() + "px"
el.style.height = face.height() + "px"
scene.appendChild(el)
face.el = el
})
url.addEventListener("input", updateBackgroundImage)
scale.addEventListener("input", updateScale)
var bg_w = 1, bg_h = 1, x = 0, y = 0, s = 1
function updateBackgroundImage(){
var img = new Image ()
img.onload = function(){
x0 = 0
y0 = 0
bg_w = img.naturalWidth
bg_h = img.naturalHeight
surface.faces.forEach(function(face, i){
face.el.style.backgroundImage = 'url(' + url.value + ')'
})
update(x,y,bg_w,bg_h)
}
img.src = url.value
img.complete && img.onload()
}
function update(x,y,w,h){
dx = x
dy = y
surface.faces.forEach(function(face, i){
dx = x-face.x.a
dy = y-face.y.a
face.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
face.el.style.backgroundSize = w*s + 'px ' + h*s + 'px'
// console.log(x,y,' ',dx,dy)
})
}
updateBackgroundImage()
function updateScale(){
s = parseFloat(scale.value)
console.log(scale.value, s)
update(x,y,bg_w,bg_h)
}
var leftOffset = 0
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 x0 = 0, y0 = 0
var mymouse = new mouse({
el: cursor,
down: function(e, cursor){
console.log(cursor.x.a, cursor.y.a)
dragging = true
},
drag: function(e, cursor){
if (! dragging) return
delta = cursor.delta()
delta.a = - delta.a
x0 = delta.a*s
y0 = delta.b*s
// console.log(x0,y0)
update(x+x0,y+y0,bg_w,bg_h)
},
up: function(e, cursor, new_cursor){
x += delta.a*s
y += delta.b*s
delta.zero()
dragging = false
},
})
</script>
|
