|
1 |
| -var canvas=document.getElementById("canvas"); |
2 |
| -canvas.width = 640; |
3 |
| -canvas.height = 480; |
4 |
| -var ctx=canvas.getContext("2d"); |
5 |
| -var rect = canvas.getBoundingClientRect(); |
6 |
| -canvas.addEventListener('click', onMouseClick); |
7 |
| -canvas.addEventListener('mousedown', onMouseDown); |
8 |
| -canvas.addEventListener('mouseup', onMouseUp); |
9 |
| -canvas.addEventListener('mousemove', onMouseMove); |
| 1 | +(function(){ |
| 2 | + var canvas=document.getElementById("canvas"); |
| 3 | + canvas.width = 640; |
| 4 | + canvas.height = 480; |
| 5 | + var ctx=canvas.getContext("2d"); |
| 6 | + var rect = canvas.getBoundingClientRect(); |
| 7 | + canvas.addEventListener('click', onMouseClick); |
| 8 | + canvas.addEventListener('mousedown', onMouseDown); |
| 9 | + canvas.addEventListener('mouseup', onMouseUp); |
| 10 | + canvas.addEventListener('mousemove', onMouseMove); |
10 | 11 |
|
11 |
| -var selected = null; |
12 |
| -var dragged = false; |
13 |
| -var levelOfDetail = 20; |
| 12 | + //initial value |
| 13 | + var selected = null; |
| 14 | + var dragged = false; |
| 15 | + var levelOfDetail = 20; |
| 16 | + var curve = new Bezier(); |
14 | 17 |
|
15 |
| - |
16 |
| -var curve = new Curve(); |
17 |
| - |
18 |
| -function getMousePos(e){ |
19 |
| - var x = e.pageX - canvas.offsetLeft; |
20 |
| - var y = e.pageY - canvas.offsetTop; |
21 |
| - return new Point(x,y); |
22 |
| -} |
23 |
| -function onMouseClick(e){ |
24 |
| - |
25 |
| - var p = getMousePos(e); |
26 |
| - var addPoint = true; |
27 |
| - for(var i in curve.cPoints){ |
28 |
| - if(curve.cPoints[i].equal(p)){ |
29 |
| - curve.cPoints[i].active = true; |
30 |
| - addPoint = false; |
31 |
| - }else{ |
32 |
| - curve.cPoints[i].active = false; |
33 |
| - } |
34 |
| - } |
35 |
| - if(addPoint){ |
36 |
| - p.active = true; |
37 |
| - curve.cPoints.push(p) |
38 |
| - }; |
39 |
| - redraw(); |
40 |
| - |
41 |
| -} |
42 |
| - |
43 |
| -function onMouseDown(e){ |
44 |
| - dragged = true; |
45 |
| - var pos = getMousePos(e); |
46 |
| - selected = curve.updateActivePoint(pos); |
47 |
| -} |
48 |
| - |
49 |
| -function onMouseMove(e){ |
50 |
| - if (!dragged) { |
51 |
| - return; |
| 18 | + function getMousePos(e){ |
| 19 | + var x = e.pageX - canvas.offsetLeft; |
| 20 | + var y = e.pageY - canvas.offsetTop; |
| 21 | + return new Point(x,y); |
52 | 22 | }
|
53 |
| - p = getMousePos(e); |
54 |
| - if(selected){ |
55 |
| - selected.x = p.x; |
56 |
| - selected.y = p.y; |
| 23 | + function onMouseClick(e){ |
| 24 | + var p = getMousePos(e); |
| 25 | + var addPoint = true; |
| 26 | + for(var i in curve.cPoints){ |
| 27 | + if(curve.cPoints[i].equal(p)){ |
| 28 | + curve.cPoints[i].active = true; |
| 29 | + addPoint = false; |
| 30 | + }else{ |
| 31 | + curve.cPoints[i].active = false; |
| 32 | + } |
| 33 | + } |
| 34 | + if(addPoint){ |
| 35 | + p.active = true; |
| 36 | + curve.cPoints.push(p) |
| 37 | + }; |
| 38 | + redraw(); |
57 | 39 | }
|
58 |
| - redraw(); |
59 |
| -} |
60 | 40 |
|
61 |
| -function onMouseUp(e){ |
62 |
| - dragged = false; |
63 |
| -} |
| 41 | + function onMouseDown(e){ |
| 42 | + dragged = true; |
| 43 | + var pos = getMousePos(e); |
| 44 | + selected = curve.updateActivePoint(pos); |
| 45 | + } |
64 | 46 |
|
65 |
| -function redraw(){ |
66 |
| - ctx.clear("#FFF"); |
67 |
| - curve.draw(ctx,levelOfDetail); |
68 |
| -} |
| 47 | + function onMouseMove(e){ |
| 48 | + if (!dragged) { |
| 49 | + return; |
| 50 | + } |
| 51 | + p = getMousePos(e); |
| 52 | + if(selected){ |
| 53 | + selected.x = p.x; |
| 54 | + selected.y = p.y; |
| 55 | + } |
| 56 | + redraw(); |
| 57 | + } |
69 | 58 |
|
70 |
| -ctx.clear = function(fillColor) { |
71 |
| - ctx.fillStyle = fillColor; |
72 |
| - ctx.fillRect(0,0,rect.width, rect.height); |
73 |
| -}; |
| 59 | + function onMouseUp(e){ |
| 60 | + dragged = false; |
| 61 | + } |
74 | 62 |
|
75 |
| -$('#curveType').change(function(){ |
76 |
| - var type = +$('#curveType').find('input:checked').val(); |
77 |
| - var cPoints = curve? curve.cPoints: []; |
78 |
| - if(type === Curve.types.STRAIGHT_LINE){ |
79 |
| - curve = new Curve(); |
80 |
| - curve.cPoints = cPoints; |
81 |
| - }else if(type === Curve.types.BEZIER){ |
82 |
| - curve = new Bezier(); |
83 |
| - curve.cPoints = cPoints; |
84 |
| - }else if(type === Curve.types.B_SPLINE){ |
85 |
| - curve = new BSpline(); |
86 |
| - curve.cPoints = cPoints; |
| 63 | + function redraw(){ |
| 64 | + ctx.clear("#FFF"); |
| 65 | + curve.draw(ctx,levelOfDetail); |
87 | 66 | }
|
88 |
| - redraw(); |
89 |
| -}) |
90 | 67 |
|
91 |
| -$('#levelOfDetail').html(levelOfDetail); |
92 |
| -$( "#slider" ).slider({ |
93 |
| - range: "min", |
94 |
| - max: 100, |
95 |
| - value: levelOfDetail, |
96 |
| - slide: updateLevelOfDetail, |
97 |
| - change: updateLevelOfDetail |
98 |
| -}); |
| 68 | + ctx.clear = function(fillColor) { |
| 69 | + ctx.fillStyle = fillColor; |
| 70 | + ctx.fillRect(0,0,rect.width, rect.height); |
| 71 | + }; |
99 | 72 |
|
| 73 | + $('#curveType').change(function(){ |
| 74 | + var type = +$('#curveType').find('input:checked').val(); |
| 75 | + var cPoints = curve? curve.cPoints: []; |
| 76 | + if(type === Curve.types.STRAIGHT_LINE){ |
| 77 | + curve = new Curve(); |
| 78 | + curve.cPoints = cPoints; |
| 79 | + }else if(type === Curve.types.BEZIER){ |
| 80 | + curve = new Bezier(); |
| 81 | + curve.cPoints = cPoints; |
| 82 | + }else if(type === Curve.types.B_SPLINE){ |
| 83 | + curve = new BSpline(); |
| 84 | + curve.cPoints = cPoints; |
| 85 | + } |
| 86 | + redraw(); |
| 87 | + }) |
100 | 88 |
|
101 |
| -function updateLevelOfDetail() { |
102 |
| - levelOfDetail = $( "#slider" ).slider( "value" ); |
103 | 89 | $('#levelOfDetail').html(levelOfDetail);
|
104 |
| - redraw(); |
105 |
| -} |
| 90 | + $( "#slider" ).slider({ |
| 91 | + range: "min", |
| 92 | + max: 100, |
| 93 | + value: levelOfDetail, |
| 94 | + slide: updateLevelOfDetail, |
| 95 | + change: updateLevelOfDetail |
| 96 | + }); |
| 97 | + |
| 98 | + |
| 99 | + function updateLevelOfDetail() { |
| 100 | + levelOfDetail = $( "#slider" ).slider( "value" ); |
| 101 | + $('#levelOfDetail').html(levelOfDetail); |
| 102 | + redraw(); |
| 103 | + } |
| 104 | +})(); |
0 commit comments