source: main/trunk/model-sites-dev/von-sparql/js/paper/examples/Tools/Vektor.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface
File size: 5.5 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>Vektor</title>
6 <link rel="stylesheet" href="../css/style.css">
7 <script type="text/javascript" src="../../dist/paper.js"></script>
8 <script type="text/paperscript" canvas="canvas">
9
10 ////////////////////////////////////////////////////////////////////////////////
11 // Interface
12
13 var values = {
14 fixLength: false,
15 fixAngle: false,
16 showCircle: false,
17 showAngleLength: true,
18 showCoordinates: false
19 };
20
21 ////////////////////////////////////////////////////////////////////////////////
22 // Vector
23
24 var vectorStart, vector, vectorPrevious;
25 var vectorItem, items, dashedItems;
26
27 function processVector(event, drag) {
28 vector = event.point - vectorStart;
29 if (vectorPrevious) {
30 if (values.fixLength && values.fixAngle) {
31 vector = vectorPrevious;
32 } else if (values.fixLength) {
33 vector.length = vectorPrevious.length;
34 } else if (values.fixAngle) {
35 vector = vector.project(vectorPrevious);
36 }
37 }
38 drawVector(drag);
39 }
40
41 function drawVector(drag) {
42 if (items) {
43 for (var i = 0, l = items.length; i < l; i++) {
44 items[i].remove();
45 }
46 }
47 if (vectorItem)
48 vectorItem.remove();
49 items = [];
50 var arrowVector = vector.normalize(10);
51 var end = vectorStart + vector;
52 vectorItem = new Group(
53 new Path(vectorStart, end),
54 new Path(
55 end + arrowVector.rotate(135),
56 end,
57 end + arrowVector.rotate(-135)
58 )
59 );
60 vectorItem.strokeWidth = 0.75;
61 vectorItem.strokeColor = '#e4141b';
62 // Display:
63 dashedItems = [];
64 // Draw Circle
65 if (values.showCircle) {
66 dashedItems.push(new Path.Circle(vectorStart, vector.length));
67 }
68 // Draw Labels
69 if (values.showAngleLength) {
70 drawAngle(vectorStart, vector, !drag);
71 if (!drag)
72 drawLength(vectorStart, end, vector.angle < 0 ? -1 : 1, true);
73 }
74 var quadrant = vector.quadrant;
75 if (values.showCoordinates && !drag) {
76 drawLength(vectorStart, vectorStart + [vector.x, 0],
77 [1, 3].indexOf(quadrant) != -1 ? -1 : 1, true, vector.x, 'x: ');
78 drawLength(vectorStart, vectorStart + [0, vector.y],
79 [1, 3].indexOf(quadrant) != -1 ? 1 : -1, true, vector.y, 'y: ');
80 }
81 for (var i = 0, l = dashedItems.length; i < l; i++) {
82 var item = dashedItems[i];
83 item.strokeColor = 'black';
84 item.dashArray = [1, 2];
85 items.push(item);
86 }
87 // Update palette
88 values.x = vector.x;
89 values.y = vector.y;
90 values.length = vector.length;
91 values.angle = vector.angle;
92 }
93
94 function drawAngle(center, vector, label) {
95 var radius = 25, threshold = 10;
96 if (vector.length < radius + threshold || Math.abs(vector.angle) < 15)
97 return;
98 var from = new Point(radius, 0);
99 var through = from.rotate(vector.angle / 2);
100 var to = from.rotate(vector.angle);
101 var end = center + to;
102 dashedItems.push(new Path.Line(center,
103 center + new Point(radius + threshold, 0)));
104 dashedItems.push(new Path.Arc(center + from, center + through, end));
105 var arrowVector = to.normalize(7.5).rotate(vector.angle < 0 ? -90 : 90);
106 dashedItems.push(new Path([
107 end + arrowVector.rotate(135),
108 end,
109 end + arrowVector.rotate(-135)
110 ]));
111 if (label) {
112 // Angle Label
113 var text = new PointText(center
114 + through.normalize(radius + 10) + new Point(0, 3));
115 text.content = Math.floor(vector.angle * 100) / 100 + '\xb0';
116 items.push(text);
117 }
118 }
119
120 function drawLength(from, to, sign, label, value, prefix) {
121 var lengthSize = 5;
122 if ((to - from).length < lengthSize * 4)
123 return;
124 var vector = to - from;
125 var awayVector = vector.normalize(lengthSize).rotate(90 * sign);
126 var upVector = vector.normalize(lengthSize).rotate(45 * sign);
127 var downVector = upVector.rotate(-90 * sign);
128 var lengthVector = vector.normalize(
129 vector.length / 2 - lengthSize * Math.sqrt(2));
130 var line = new Path();
131 line.add(from + awayVector);
132 line.lineBy(upVector);
133 line.lineBy(lengthVector);
134 line.lineBy(upVector);
135 var middle = line.lastSegment.point;
136 line.lineBy(downVector);
137 line.lineBy(lengthVector);
138 line.lineBy(downVector);
139 dashedItems.push(line);
140 if (label) {
141 // Length Label
142 var textAngle = Math.abs(vector.angle) > 90
143 ? textAngle = 180 + vector.angle : vector.angle;
144 // Label needs to move away by different amounts based on the
145 // vector's quadrant:
146 var away = (sign >= 0 ? [1, 4] : [2, 3]).indexOf(vector.quadrant) != -1
147 ? 8 : 0;
148 var text = new PointText(middle + awayVector.normalize(away + lengthSize));
149 text.rotate(textAngle);
150 text.justification = 'center';
151 value = value || vector.length;
152 text.content = (prefix || '') + Math.floor(value * 1000) / 1000;
153 items.push(text);
154 }
155 }
156
157 ////////////////////////////////////////////////////////////////////////////////
158 // Mouse Handling
159
160 var dashItem;
161
162 function onMouseDown(event) {
163 var end = vectorStart + vector;
164 var create = false;
165 if (event.modifiers.shift && vectorItem) {
166 vectorStart = end;
167 create = true;
168 } else if (vector && (event.modifiers.option
169 || end && end.getDistance(event.point) < 10)) {
170 create = false;
171 } else {
172 vectorStart = event.point;
173 }
174 if (create) {
175 dashItem = vectorItem;
176 vectorItem = null;
177 }
178 processVector(event, true);
179 }
180
181 function onMouseDrag(event) {
182 if (!event.modifiers.shift && values.fixLength && values.fixAngle)
183 vectorStart = event.point;
184 processVector(event, event.modifiers.shift);
185 }
186
187 function onMouseUp(event) {
188 processVector(event, false);
189 if (dashItem) {
190 dashItem.dashArray = [1, 2];
191 dashItem = null;
192 }
193 vectorPrevious = vector;
194 }
195 </script>
196</head>
197<body>
198 <canvas id="canvas" resize></canvas>
199</body>
200</html>
Note: See TracBrowser for help on using the repository browser.