1 /* 2 Copyright 2008-2023 3 Matthias Ehmann, 4 Michael Gerhaeuser, 5 Carsten Miller, 6 Bianca Valentin, 7 Alfred Wassermann, 8 Peter Wilfahrt 9 10 This file is part of JSXGraph. 11 12 JSXGraph is free software dual licensed under the GNU LGPL or MIT License. 13 14 You can redistribute it and/or modify it under the terms of the 15 16 * GNU Lesser General Public License as published by 17 the Free Software Foundation, either version 3 of the License, or 18 (at your option) any later version 19 OR 20 * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT 21 22 JSXGraph is distributed in the hope that it will be useful, 23 but WITHOUT ANY WARRANTY; without even the implied warranty of 24 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 GNU Lesser General Public License for more details. 26 27 You should have received a copy of the GNU Lesser General Public License and 28 the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/> 29 and <https://opensource.org/licenses/MIT/>. 30 */ 31 32 /*global JXG: true, define: true*/ 33 /*jslint nomen: true, plusplus: true*/ 34 35 import JXG from "../jxg"; 36 import Geometry from "../math/geometry"; 37 import Mat from "../math/math"; 38 import Statistics from "../math/statistics"; 39 import Coords from "../base/coords"; 40 import Const from "../base/constants"; 41 import Type from "../utils/type"; 42 43 /** 44 * @class A circular sector is a subarea of the area enclosed by a circle. It is enclosed by two radii and an arc. 45 * @pseudo 46 * @name Sector 47 * @augments JXG.Curve 48 * @constructor 49 * @type JXG.Curve 50 * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown. 51 * 52 * First possibility of input parameters are: 53 * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 A sector is defined by three points: The sector's center <tt>p1</tt>, 54 * a second point <tt>p2</tt> defining the radius and a third point <tt>p3</tt> defining the angle of the sector. The 55 * Sector is always drawn counter clockwise from <tt>p2</tt> to <tt>p3</tt>. 56 * <p> 57 * In this case, the sector will have an arc as sub-object. 58 * <p> 59 * Second possibility of input parameters are: 60 * @param {JXG.Line_JXG.Line_array,number_array,number_number,function} line, line2, coords1 or direction1, coords2 or direction2, radius The sector is defined by two lines. 61 * The two legs which define the sector are given by two coordinates arrays which are project initially two the two lines or by two directions (+/- 1). 62 * The last parameter is the radius of the sector. 63 * <p>In this case, the sector will <b>not</b> have an arc as sub-object. 64 * 65 * @example 66 * // Create a sector out of three free points 67 * var p1 = board.create('point', [1.5, 5.0]), 68 * p2 = board.create('point', [1.0, 0.5]), 69 * p3 = board.create('point', [5.0, 3.0]), 70 * 71 * a = board.create('sector', [p1, p2, p3]); 72 * </pre><div class="jxgbox" id="JXG49f59123-f013-4681-bfd9-338b89893156" style="width: 300px; height: 300px;"></div> 73 * <script type="text/javascript"> 74 * (function () { 75 * var board = JXG.JSXGraph.initBoard('JXG49f59123-f013-4681-bfd9-338b89893156', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 76 * p1 = board.create('point', [1.5, 5.0]), 77 * p2 = board.create('point', [1.0, 0.5]), 78 * p3 = board.create('point', [5.0, 3.0]), 79 * 80 * a = board.create('sector', [p1, p2, p3]); 81 * })(); 82 * </script><pre> 83 * 84 * @example 85 * // Create a sector out of two lines, two directions and a radius 86 * var p1 = board.create('point', [-1, 4]), 87 * p2 = board.create('point', [4, 1]), 88 * q1 = board.create('point', [-2, -3]), 89 * q2 = board.create('point', [4,3]), 90 * 91 * li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}), 92 * li2 = board.create('line', [q1,q2], {lastArrow:true}), 93 * 94 * sec1 = board.create('sector', [li1, li2, [5.5, 0], [4, 3], 3]), 95 * sec2 = board.create('sector', [li1, li2, 1, -1, 4]); 96 * 97 * </pre><div class="jxgbox" id="JXGbb9e2809-9895-4ff1-adfa-c9c71d50aa53" style="width: 300px; height: 300px;"></div> 98 * <script type="text/javascript"> 99 * (function () { 100 * var board = JXG.JSXGraph.initBoard('JXGbb9e2809-9895-4ff1-adfa-c9c71d50aa53', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 101 * p1 = board.create('point', [-1, 4]), 102 * p2 = board.create('point', [4, 1]), 103 * q1 = board.create('point', [-2, -3]), 104 * q2 = board.create('point', [4,3]), 105 * 106 * li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}), 107 * li2 = board.create('line', [q1,q2], {lastArrow:true}), 108 * 109 * sec1 = board.create('sector', [li1, li2, [5.5, 0], [4, 3], 3]), 110 * sec2 = board.create('sector', [li1, li2, 1, -1, 4]); 111 * })(); 112 * </script><pre> 113 * 114 * @example 115 * var t = board.create('transform', [2, 1.5], {type: 'scale'}); 116 * var s1 = board.create('sector', [[-3.5,-3], [-3.5, -2], [-3.5,-4]], { 117 * anglePoint: {visible:true}, center: {visible: true}, radiusPoint: {visible: true}, 118 * fillColor: 'yellow', strokeColor: 'black'}); 119 * var s2 = board.create('curve', [s1, t], {fillColor: 'yellow', strokeColor: 'black'}); 120 * 121 * </pre><div id="JXG2e70ee14-6339-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div> 122 * <script type="text/javascript"> 123 * (function() { 124 * var board = JXG.JSXGraph.initBoard('JXG2e70ee14-6339-11e8-9fb9-901b0e1b8723', 125 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 126 * var t = board.create('transform', [2, 1.5], {type: 'scale'}); 127 * var s1 = board.create('sector', [[-3.5,-3], [-3.5, -2], [-3.5,-4]], { 128 * anglePoint: {visible:true}, center: {visible: true}, radiusPoint: {visible: true}, 129 * fillColor: 'yellow', strokeColor: 'black'}); 130 * var s2 = board.create('curve', [s1, t], {fillColor: 'yellow', strokeColor: 'black'}); 131 * 132 * })(); 133 * 134 * </script><pre> 135 * 136 * @example 137 * var A = board.create('point', [3, -2]), 138 * B = board.create('point', [-2, -2]), 139 * C = board.create('point', [0, 4]); 140 * 141 * var angle = board.create('sector', [B, A, C], { 142 * strokeWidth: 0, 143 * arc: { 144 * visible: true, 145 * strokeWidth: 3, 146 * lastArrow: {size: 4}, 147 * firstArrow: {size: 4} 148 * } 149 * }); 150 * //angle.arc.setAttribute({firstArrow: false}); 151 * angle.arc.setAttribute({lastArrow: false}); 152 * 153 * </pre><div id="JXGca37b99e-1510-49fa-ac9e-efd60e956104" class="jxgbox" style="width: 300px; height: 300px;"></div> 154 * <script type="text/javascript"> 155 * (function() { 156 * var board = JXG.JSXGraph.initBoard('JXGca37b99e-1510-49fa-ac9e-efd60e956104', 157 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 158 * var A = board.create('point', [3, -2]), 159 * B = board.create('point', [-2, -2]), 160 * C = board.create('point', [0, 4]); 161 * 162 * var angle = board.create('sector', [B, A, C], { 163 * strokeWidth: 0, 164 * arc: { 165 * visible: true, 166 * strokeWidth: 3, 167 * lastArrow: {size: 4}, 168 * firstArrow: {size: 4} 169 * } 170 * }); 171 * //angle.arc.setAttribute({firstArrow: false}); 172 * angle.arc.setAttribute({lastArrow: false}); 173 * 174 * })(); 175 * 176 * </script><pre> 177 * 178 * 179 */ 180 JXG.createSector = function (board, parents, attributes) { 181 var el, 182 attr, 183 i, 184 type = "invalid", 185 s, 186 v, 187 attrPoints = ["center", "radiusPoint", "anglePoint"], 188 points; 189 190 // Three points? 191 if ( 192 parents[0].elementClass === Const.OBJECT_CLASS_LINE && 193 parents[1].elementClass === Const.OBJECT_CLASS_LINE && 194 (Type.isArray(parents[2]) || Type.isNumber(parents[2])) && 195 (Type.isArray(parents[3]) || Type.isNumber(parents[3])) && 196 (Type.isNumber(parents[4]) || Type.isFunction(parents[4]) || Type.isString(parents[4])) 197 ) { 198 type = "2lines"; 199 } else { 200 points = Type.providePoints(board, parents, attributes, "sector", attrPoints); 201 if (points === false) { 202 throw new Error( 203 "JSXGraph: Can't create Sector with parent types '" + 204 typeof parents[0] + 205 "' and '" + 206 typeof parents[1] + 207 "' and '" + 208 typeof parents[2] + 209 "'." 210 ); 211 } 212 type = "3points"; 213 } 214 215 attr = Type.copyAttributes(attributes, board.options, "sector"); 216 el = board.create("curve", [[0], [0]], attr); 217 el.type = Const.OBJECT_TYPE_SECTOR; 218 el.elType = "sector"; 219 220 /** 221 * Sets radius if the attribute `radius` has value 'auto'. 222 * Sets a radius between 20 and 50 points, depending on the distance 223 * between the center and the radius point. 224 * This function is used in {@link Angle}. 225 * 226 * @name autoRadius 227 * @memberof Sector.prototype 228 * @function 229 * @returns {Number} returns a radius value in user coordinates. 230 * @private 231 */ 232 el.autoRadius = function () { 233 var r1 = 20 / el.board.unitX, // 20px 234 r2 = Infinity, 235 r3 = 50 / el.board.unitX; // 50px 236 237 if (Type.isPoint(el.center)) { 238 // This does not work for 2-lines sectors / angles 239 r2 = el.center.Dist(el.point2) * 0.3333; 240 } 241 242 return Math.max(r1, Math.min(r2, r3)); 243 }; 244 245 if (type === "2lines") { 246 /** 247 * @ignore 248 */ 249 el.Radius = function () { 250 var r = Type.evaluate(parents[4]); 251 if (r === "auto") { 252 return this.autoRadius(); 253 } 254 return r; 255 }; 256 257 el.line1 = board.select(parents[0]); 258 el.line2 = board.select(parents[1]); 259 260 el.line1.addChild(el); 261 el.line2.addChild(el); 262 el.setParents(parents); 263 264 el.point1 = { visProp: {} }; 265 el.point2 = { visProp: {} }; 266 el.point3 = { visProp: {} }; 267 268 /* Intersection point */ 269 s = Geometry.meetLineLine(el.line1.stdform, el.line2.stdform, 0, board); 270 271 if (Type.isArray(parents[2])) { 272 /* project p1 to l1 */ 273 if (parents[2].length === 2) { 274 parents[2] = [1].concat(parents[2]); 275 } 276 /* 277 v = [0, el.line1.stdform[1], el.line1.stdform[2]]; 278 v = Mat.crossProduct(v, parents[2]); 279 v = Geometry.meetLineLine(v, el.line1.stdform, 0, board); 280 */ 281 v = Geometry.projectPointToLine( 282 { coords: { usrCoords: parents[2] } }, 283 el.line1, 284 board 285 ); 286 v = Statistics.subtract(v.usrCoords, s.usrCoords); 287 el.direction1 = 288 Mat.innerProduct(v, [0, el.line1.stdform[2], -el.line1.stdform[1]], 3) >= 0 289 ? +1 290 : -1; 291 } else { 292 el.direction1 = parents[2] >= 0 ? 1 : -1; 293 } 294 295 if (Type.isArray(parents[3])) { 296 /* project p2 to l2 */ 297 if (parents[3].length === 2) { 298 parents[3] = [1].concat(parents[3]); 299 } 300 /* 301 v = [0, el.line2.stdform[1], el.line2.stdform[2]]; 302 v = Mat.crossProduct(v, parents[3]); 303 v = Geometry.meetLineLine(v, el.line2.stdform, 0, board); 304 */ 305 v = Geometry.projectPointToLine( 306 { coords: { usrCoords: parents[3] } }, 307 el.line2, 308 board 309 ); 310 v = Statistics.subtract(v.usrCoords, s.usrCoords); 311 el.direction2 = 312 Mat.innerProduct(v, [0, el.line2.stdform[2], -el.line2.stdform[1]], 3) >= 0 313 ? +1 314 : -1; 315 } else { 316 el.direction2 = parents[3] >= 0 ? 1 : -1; 317 } 318 319 /** 320 * @class 321 * @ignore 322 */ 323 el.updateDataArray = function () { 324 var r, 325 l1, 326 l2, 327 A = [0, 0, 0], 328 B = [0, 0, 0], 329 C = [0, 0, 0], 330 ar; 331 332 l1 = this.line1; 333 l2 = this.line2; 334 335 // Intersection point of the lines 336 B = Mat.crossProduct(l1.stdform, l2.stdform); 337 338 if (Math.abs(B[0]) > Mat.eps * Mat.eps) { 339 B[1] /= B[0]; 340 B[2] /= B[0]; 341 B[0] /= B[0]; 342 } 343 // First point 344 r = this.direction1 * this.Radius(); 345 A = Statistics.add(B, [0, r * l1.stdform[2], -r * l1.stdform[1]]); 346 347 // Second point 348 r = this.direction2 * this.Radius(); 349 C = Statistics.add(B, [0, r * l2.stdform[2], -r * l2.stdform[1]]); 350 351 this.point2.coords = new Coords(Const.COORDS_BY_USER, A, el.board); 352 this.point1.coords = new Coords(Const.COORDS_BY_USER, B, el.board); 353 this.point3.coords = new Coords(Const.COORDS_BY_USER, C, el.board); 354 355 if ( 356 Math.abs(A[0]) < Mat.eps || 357 Math.abs(B[0]) < Mat.eps || 358 Math.abs(C[0]) < Mat.eps 359 ) { 360 this.dataX = [NaN]; 361 this.dataY = [NaN]; 362 return; 363 } 364 365 ar = Geometry.bezierArc(A, B, C, true, 1); 366 367 this.dataX = ar[0]; 368 this.dataY = ar[1]; 369 370 this.bezierDegree = 3; 371 }; 372 373 // Arc does not work yet, since point1, point2 and point3 are 374 // virtual points. 375 // 376 // attr = Type.copyAttributes(attributes, board.options, "arc"); 377 // attr = Type.copyAttributes(attr, board.options, "sector", "arc"); 378 // attr.withLabel = false; 379 // attr.name += "_arc"; 380 // // el.arc = board.create("arc", [el.point1, el.point2, el.point3], attr); 381 // // The arc's radius is always the radius of sector. 382 // // This is important for angles. 383 // el.updateDataArray(); 384 // el.arc = board.create("arc", [ 385 // function() { 386 // return el.point1.coords.usrCoords; 387 // }, // Center 388 // function() { 389 // var d = el.point2.coords.distance(Const.COORDS_BY_USER, el.point1.coords); 390 // if (d === 0) { 391 // return [el.point1.coords.usrCoords[1], el.point1.coords.usrCoords[2]]; 392 // } 393 // return [ 394 // el.point1.coords.usrCoords[1] + el.Radius() * (el.point2.coords.usrCoords[1] - el.point1.coords.usrCoords[1]) / d, 395 // el.point1.coords.usrCoords[2] + el.Radius() * (el.point2.coords.usrCoords[2] - el.point1.coords.usrCoords[2]) / d 396 // ]; 397 // }, 398 // function() { 399 // return el.point3.coords.usrCoords; 400 // }, // Center 401 // ], attr); 402 // el.addChild(el.arc); 403 404 // end '2lines' 405 } else if (type === "3points") { 406 /** 407 * Midpoint of the sector. 408 * @memberOf Sector.prototype 409 * @name point1 410 * @type JXG.Point 411 */ 412 el.point1 = points[0]; 413 414 /** 415 * This point together with {@link Sector#point1} defines the radius. 416 * @memberOf Sector.prototype 417 * @name point2 418 * @type JXG.Point 419 */ 420 el.point2 = points[1]; 421 422 /** 423 * Defines the sector's angle. 424 * @memberOf Sector.prototype 425 * @name point3 426 * @type JXG.Point 427 */ 428 el.point3 = points[2]; 429 430 /* Add arc as child to defining points */ 431 for (i = 0; i < 3; i++) { 432 if (Type.exists(points[i]._is_new)) { 433 el.addChild(points[i]); 434 delete points[i]._is_new; 435 } else { 436 points[i].addChild(el); 437 } 438 } 439 440 // useDirection is necessary for circumCircleSectors 441 el.useDirection = attributes.usedirection; 442 el.setParents(points); 443 444 /** 445 * Defines the sectors orientation in case of circumCircleSectors. 446 * @memberOf Sector.prototype 447 * @name point4 448 * @type JXG.Point 449 */ 450 if (Type.exists(points[3])) { 451 el.point4 = points[3]; 452 el.point4.addChild(el); 453 } 454 455 el.methodMap = JXG.deepCopy(el.methodMap, { 456 arc: "arc", 457 center: "center", 458 radiuspoint: "radiuspoint", 459 anglepoint: "anglepoint" 460 }); 461 462 /** 463 * @class 464 * @ignore 465 */ 466 el.updateDataArray = function () { 467 var ar, 468 det, 469 p0c, 470 p1c, 471 p2c, 472 A = this.point2, 473 B = this.point1, 474 C = this.point3, 475 phi, 476 sgn = 1, 477 vp_s = Type.evaluate(this.visProp.selection); 478 479 if (!A.isReal || !B.isReal || !C.isReal) { 480 this.dataX = [NaN]; 481 this.dataY = [NaN]; 482 return; 483 } 484 485 phi = Geometry.rad(A, B, C); 486 if ((vp_s === "minor" && phi > Math.PI) || (vp_s === "major" && phi < Math.PI)) { 487 sgn = -1; 488 } 489 490 // This is true for circumCircleSectors. In that case there is 491 // a fourth parent element: [midpoint, point1, point3, point2] 492 if (this.useDirection && Type.exists(this.point4)) { 493 p0c = this.point2.coords.usrCoords; 494 p1c = this.point4.coords.usrCoords; 495 p2c = this.point3.coords.usrCoords; 496 det = 497 (p0c[1] - p2c[1]) * (p0c[2] - p1c[2]) - 498 (p0c[2] - p2c[2]) * (p0c[1] - p1c[1]); 499 500 if (det >= 0.0) { 501 C = this.point2; 502 A = this.point3; 503 } 504 } 505 506 A = A.coords.usrCoords; 507 B = B.coords.usrCoords; 508 C = C.coords.usrCoords; 509 510 ar = Geometry.bezierArc(A, B, C, true, sgn); 511 512 this.dataX = ar[0]; 513 this.dataY = ar[1]; 514 this.bezierDegree = 3; 515 }; 516 517 /** 518 * Returns the radius of the sector. 519 * @memberOf Sector.prototype 520 * @name Radius 521 * @function 522 * @returns {Number} The distance between {@link Sector#point1} and {@link Sector#point2}. 523 */ 524 el.Radius = function () { 525 return this.point2.Dist(this.point1); 526 }; 527 } // end '3points' 528 529 el.center = el.point1; 530 el.radiuspoint = el.point2; 531 el.anglepoint = el.point3; 532 533 attr = Type.copyAttributes(attributes, board.options, "arc"); 534 attr = Type.copyAttributes(attr, board.options, "sector", "arc"); 535 attr.withLabel = false; 536 attr.name += "_arc"; 537 538 if (type === "2lines") { 539 el.updateDataArray(); 540 el.arc = board.create("arc", [ 541 function() { 542 return el.point1.coords.usrCoords; 543 }, // Center 544 function() { 545 var d = el.point2.coords.distance(Const.COORDS_BY_USER, el.point1.coords); 546 if (d === 0) { 547 return [el.point1.coords.usrCoords[1], el.point1.coords.usrCoords[2]]; 548 } 549 return [ 550 el.point1.coords.usrCoords[1] + el.Radius() * (el.point2.coords.usrCoords[1] - el.point1.coords.usrCoords[1]) / d, 551 el.point1.coords.usrCoords[2] + el.Radius() * (el.point2.coords.usrCoords[2] - el.point1.coords.usrCoords[2]) / d 552 ]; 553 }, 554 function() { 555 return el.point3.coords.usrCoords; 556 } // Center 557 ], attr); 558 } else { 559 // The arc's radius is always the radius of sector. 560 // This is important for angles. 561 el.arc = board.create("arc", [ 562 el.point1, // Center 563 function() { 564 var d = el.point2.Dist(el.point1); 565 if (d === 0) { 566 return [el.point1.X(), el.point1.Y()]; 567 } 568 return [ 569 el.point1.X() + el.Radius() * (el.point2.X() - el.point1.X()) / d, 570 el.point1.Y() + el.Radius() * (el.point2.Y() - el.point1.Y()) / d 571 ]; 572 }, 573 el.point3 574 ], attr); 575 } 576 el.addChild(el.arc); 577 578 // Default hasPoint method. Documented in geometry element 579 el.hasPointCurve = function (x, y) { 580 var angle, 581 alpha, 582 beta, 583 prec, 584 type, 585 checkPoint = new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board), 586 r = this.Radius(), 587 dist = this.center.coords.distance(Const.COORDS_BY_USER, checkPoint), 588 has, 589 vp_s = Type.evaluate(this.visProp.selection); 590 591 if (Type.isObject(Type.evaluate(this.visProp.precision))) { 592 type = this.board._inputDevice; 593 prec = Type.evaluate(this.visProp.precision[type]); 594 } else { 595 // 'inherit' 596 prec = this.board.options.precision.hasPoint; 597 } 598 prec /= Math.min(Math.abs(this.board.unitX), Math.abs(this.board.unitY)); 599 has = Math.abs(dist - r) < prec; 600 if (has) { 601 angle = Geometry.rad(this.point2, this.center, checkPoint.usrCoords.slice(1)); 602 alpha = 0; 603 beta = Geometry.rad(this.point2, this.center, this.point3); 604 605 if ((vp_s === "minor" && beta > Math.PI) || (vp_s === "major" && beta < Math.PI)) { 606 alpha = beta; 607 beta = 2 * Math.PI; 608 } 609 610 if (angle < alpha || angle > beta) { 611 has = false; 612 } 613 } 614 615 return has; 616 }; 617 618 /** 619 * Checks whether (x,y) is within the area defined by the sector. 620 * @memberOf Sector.prototype 621 * @name hasPointSector 622 * @function 623 * @param {Number} x Coordinate in x direction, screen coordinates. 624 * @param {Number} y Coordinate in y direction, screen coordinates. 625 * @returns {Boolean} True if (x,y) is within the sector defined by the arc, False otherwise. 626 */ 627 el.hasPointSector = function (x, y) { 628 var angle, 629 checkPoint = new Coords(Const.COORDS_BY_SCREEN, [x, y], this.board), 630 r = this.Radius(), 631 dist = this.point1.coords.distance(Const.COORDS_BY_USER, checkPoint), 632 alpha, 633 beta, 634 has = dist < r, 635 vp_s = Type.evaluate(this.visProp.selection); 636 637 if (has) { 638 angle = Geometry.rad(this.radiuspoint, this.center, checkPoint.usrCoords.slice(1)); 639 alpha = 0.0; 640 beta = Geometry.rad(this.radiuspoint, this.center, this.anglepoint); 641 642 if ((vp_s === "minor" && beta > Math.PI) || (vp_s === "major" && beta < Math.PI)) { 643 alpha = beta; 644 beta = 2 * Math.PI; 645 } 646 //if (angle > Geometry.rad(this.point2, this.point1, this.point3)) { 647 if (angle < alpha || angle > beta) { 648 has = false; 649 } 650 } 651 return has; 652 }; 653 654 el.hasPoint = function (x, y) { 655 if ( 656 Type.evaluate(this.visProp.highlightonsector) || 657 Type.evaluate(this.visProp.hasinnerpoints) 658 ) { 659 return this.hasPointSector(x, y); 660 } 661 662 return this.hasPointCurve(x, y); 663 }; 664 665 // documented in GeometryElement 666 el.getTextAnchor = function () { 667 return this.point1.coords; 668 }; 669 670 // documented in GeometryElement 671 // this method is very similar to arc.getLabelAnchor() 672 // there are some additions in the arc version though, mainly concerning 673 // "major" and "minor" arcs. but maybe these methods can be merged. 674 /** 675 * @class 676 * @ignore 677 */ 678 el.getLabelAnchor = function () { 679 var coords, 680 vec, 681 vecx, 682 vecy, 683 len, 684 angle = Geometry.rad(this.point2, this.point1, this.point3), 685 dx = 13 / this.board.unitX, 686 dy = 13 / this.board.unitY, 687 p2c = this.point2.coords.usrCoords, 688 pmc = this.point1.coords.usrCoords, 689 bxminusax = p2c[1] - pmc[1], 690 byminusay = p2c[2] - pmc[2], 691 vp_s = Type.evaluate(this.visProp.selection), 692 l_vp = this.label ? this.label.visProp : this.visProp.label; 693 694 // If this is uncommented, the angle label can not be dragged 695 //if (Type.exists(this.label)) { 696 // this.label.relativeCoords = new Coords(Const.COORDS_BY_SCREEN, [0, 0], this.board); 697 //} 698 699 if ((vp_s === "minor" && angle > Math.PI) || (vp_s === "major" && angle < Math.PI)) { 700 angle = -(2 * Math.PI - angle); 701 } 702 703 coords = new Coords( 704 Const.COORDS_BY_USER, 705 [ 706 pmc[1] + Math.cos(angle * 0.5) * bxminusax - Math.sin(angle * 0.5) * byminusay, 707 pmc[2] + Math.sin(angle * 0.5) * bxminusax + Math.cos(angle * 0.5) * byminusay 708 ], 709 this.board 710 ); 711 712 vecx = coords.usrCoords[1] - pmc[1]; 713 vecy = coords.usrCoords[2] - pmc[2]; 714 715 len = Mat.hypot(vecx, vecy); 716 vecx = (vecx * (len + dx)) / len; 717 vecy = (vecy * (len + dy)) / len; 718 vec = [pmc[1] + vecx, pmc[2] + vecy]; 719 720 l_vp.position = Geometry.calcLabelQuadrant(Geometry.rad([1, 0], [0, 0], vec)); 721 722 return new Coords(Const.COORDS_BY_USER, vec, this.board); 723 }; 724 725 /** 726 * Overwrite the Radius method of the sector. 727 * Used in {@link GeometryElement#setAttribute}. 728 * @memberOf Sector.prototype 729 * @name setRadius 730 * @param {Number|Function} value New radius. 731 * @function 732 */ 733 el.setRadius = function (val) { 734 var res, 735 e = Type.evaluate(val); 736 737 if (val === 'auto' || e === 'auto') { 738 res = 'auto'; 739 } else if (Type.isNumber(val)) { 740 res = 'number'; 741 } else if (Type.isFunction(val) && !Type.isString(e)) { 742 res = 'function'; 743 } else { 744 res = 'undefined'; 745 } 746 if (res !== 'undefined') { 747 this.visProp.radius = val; 748 } 749 750 /** 751 * @ignore 752 */ 753 el.Radius = function () { 754 var r = Type.evaluate(val); 755 if (r === "auto") { 756 return this.autoRadius(); 757 } 758 return r; 759 }; 760 }; 761 762 /** 763 * @deprecated 764 * @ignore 765 */ 766 el.getRadius = function () { 767 JXG.deprecated("Sector.getRadius()", "Sector.Radius()"); 768 return this.Radius(); 769 }; 770 771 /** 772 * Length of the sector's arc or the angle in various units, see {@link Arc#Value}. 773 * @memberOf Sector.prototype 774 * @name Value 775 * @function 776 * @param {String} unit 777 * @returns {Number} The arc length or the angle value in various units. 778 * @see Arc#Value 779 */ 780 el.Value = function(unit) { 781 return this.arc.Value(unit); 782 }; 783 784 /** 785 * Arc length. 786 * @memberOf Sector.prototype 787 * @name L 788 * @returns {Number} Length of the sector's arc. 789 * @function 790 * @see Arc#L 791 */ 792 el.L = function() { 793 return this.arc.L(); 794 }; 795 796 /** 797 * Area of the sector. 798 * @memberOf Sector.prototype 799 * @name Area 800 * @function 801 * @returns {Number} The area of the sector. 802 */ 803 el.Area = function () { 804 var r = this.Radius(); 805 806 return 0.5 * r * r * this.Value('radians'); 807 }; 808 809 /** 810 * Sector perimeter, i.e. arc length plus 2 * radius. 811 * @memberOf Sector.prototype 812 * @name Perimeter 813 * @function 814 * @returns {Number} Perimeter of sector. 815 */ 816 el.Perimeter = function () { 817 return this.L() + 2 * this.Radius(); 818 }; 819 820 if (type === "3points") { 821 /** 822 * Moves the sector by the difference of two coordinates. 823 * @memberOf Sector.prototype 824 * @name setPositionDirectly 825 * @function 826 * @param {Number} method The type of coordinates used here. Possible values are {@link JXG.COORDS_BY_USER} and {@link JXG.COORDS_BY_SCREEN}. 827 * @param {Array} coords coordinates in screen/user units 828 * @param {Array} oldcoords previous coordinates in screen/user units 829 * @returns {JXG.Curve} this element 830 * @private 831 */ 832 el.setPositionDirectly = function (method, coords, oldcoords) { 833 var dc, t, 834 c = new Coords(method, coords, this.board), 835 oldc = new Coords(method, oldcoords, this.board); 836 837 if (!el.point1.draggable() || !el.point2.draggable() || !el.point3.draggable()) { 838 return this; 839 } 840 841 dc = Statistics.subtract(c.usrCoords, oldc.usrCoords); 842 t = this.board.create("transform", dc.slice(1), { type: "translate" }); 843 t.applyOnce([el.point1, el.point2, el.point3]); 844 845 return this; 846 }; 847 } 848 849 el.methodMap = JXG.deepCopy(el.methodMap, { 850 radius: "Radius", 851 getRadius: "Radius", 852 setRadius: "setRadius", 853 Value: "Value", 854 L: "L", 855 Area: "Area", 856 Perimeter: "Perimeter" 857 }); 858 859 return el; 860 }; 861 862 JXG.registerElement("sector", JXG.createSector); 863 864 /** 865 * @class A circumcircle sector is different from a {@link Sector} mostly in the way the parent elements are interpreted. 866 * At first, the circum center is determined from the three given points. Then the sector is drawn from <tt>p1</tt> through 867 * <tt>p2</tt> to <tt>p3</tt>. 868 * @pseudo 869 * @name CircumcircleSector 870 * @augments Sector 871 * @constructor 872 * @type Sector 873 * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown. 874 * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p1 A circumcircle sector is defined by the circumcircle which is determined 875 * by these three given points. The circumcircle sector is always drawn from <tt>p1</tt> through <tt>p2</tt> to <tt>p3</tt>. 876 * @example 877 * // Create an arc out of three free points 878 * var p1 = board.create('point', [1.5, 5.0]), 879 * p2 = board.create('point', [1.0, 0.5]), 880 * p3 = board.create('point', [5.0, 3.0]), 881 * 882 * a = board.create('circumcirclesector', [p1, p2, p3]); 883 * </pre><div class="jxgbox" id="JXG695cf0d6-6d7a-4d4d-bfc9-34c6aa28cd04" style="width: 300px; height: 300px;"></div> 884 * <script type="text/javascript"> 885 * (function () { 886 * var board = JXG.JSXGraph.initBoard('JXG695cf0d6-6d7a-4d4d-bfc9-34c6aa28cd04', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 887 * p1 = board.create('point', [1.5, 5.0]), 888 * p2 = board.create('point', [1.0, 0.5]), 889 * p3 = board.create('point', [5.0, 3.0]), 890 * 891 * a = board.create('circumcirclesector', [p1, p2, p3]); 892 * })(); 893 * </script><pre> 894 */ 895 JXG.createCircumcircleSector = function (board, parents, attributes) { 896 var el, mp, attr, points; 897 898 points = Type.providePoints(board, parents, attributes, "point"); 899 if (points === false) { 900 throw new Error( 901 "JSXGraph: Can't create circumcircle sector with parent types '" + 902 typeof parents[0] + 903 "' and '" + 904 typeof parents[1] + 905 "' and '" + 906 typeof parents[2] + 907 "'." 908 ); 909 } 910 911 mp = board.create("circumcenter", points.slice(0, 3), attr); 912 mp.dump = false; 913 914 attr = Type.copyAttributes(attributes, board.options, "circumcirclesector"); 915 el = board.create("sector", [mp, points[0], points[2], points[1]], attr); 916 917 el.elType = "circumcirclesector"; 918 el.setParents(points); 919 920 /** 921 * Center of the circumcirclesector 922 * @memberOf CircumcircleSector.prototype 923 * @name center 924 * @type Circumcenter 925 */ 926 el.center = mp; 927 el.subs = { 928 center: mp 929 }; 930 931 return el; 932 }; 933 934 JXG.registerElement("circumcirclesector", JXG.createCircumcircleSector); 935 936 /** 937 * @class A minor sector is a sector of a circle having measure less than or equal to 938 * 180 degrees (pi radians). It is defined by a center, one point that 939 * defines the radius, and a third point that defines the angle of the sector. 940 * @pseudo 941 * @name MinorSector 942 * @augments Curve 943 * @constructor 944 * @type JXG.Curve 945 * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown. 946 * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Minor sector is a sector of a circle around p1 having measure less than or equal to 947 * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3. 948 * @example 949 * // Create sector out of three free points 950 * var p1 = board.create('point', [2.0, 2.0]); 951 * var p2 = board.create('point', [1.0, 0.5]); 952 * var p3 = board.create('point', [3.5, 1.0]); 953 * 954 * var a = board.create('minorsector', [p1, p2, p3]); 955 * </pre><div class="jxgbox" id="JXGaf27ddcc-265f-428f-90dd-d31ace945800" style="width: 300px; height: 300px;"></div> 956 * <script type="text/javascript"> 957 * (function () { 958 * var board = JXG.JSXGraph.initBoard('JXGaf27ddcc-265f-428f-90dd-d31ace945800', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 959 * p1 = board.create('point', [2.0, 2.0]), 960 * p2 = board.create('point', [1.0, 0.5]), 961 * p3 = board.create('point', [3.5, 1.0]), 962 * 963 * a = board.create('minorsector', [p1, p2, p3]); 964 * })(); 965 * </script><pre> 966 * 967 * @example 968 * var A = board.create('point', [3, -2]), 969 * B = board.create('point', [-2, -2]), 970 * C = board.create('point', [0, 4]); 971 * 972 * var angle = board.create('minorsector', [B, A, C], { 973 * strokeWidth: 0, 974 * arc: { 975 * visible: true, 976 * strokeWidth: 3, 977 * lastArrow: {size: 4}, 978 * firstArrow: {size: 4} 979 * } 980 * }); 981 * //angle.arc.setAttribute({firstArrow: false}); 982 * angle.arc.setAttribute({lastArrow: false}); 983 * 984 * 985 * </pre><div id="JXGdddf3c8f-4b0c-4268-8171-8fcd30e71f60" class="jxgbox" style="width: 300px; height: 300px;"></div> 986 * <script type="text/javascript"> 987 * (function() { 988 * var board = JXG.JSXGraph.initBoard('JXGdddf3c8f-4b0c-4268-8171-8fcd30e71f60', 989 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 990 * var A = board.create('point', [3, -2]), 991 * B = board.create('point', [-2, -2]), 992 * C = board.create('point', [0, 4]); 993 * 994 * var angle = board.create('minorsector', [B, A, C], { 995 * strokeWidth: 0, 996 * arc: { 997 * visible: true, 998 * strokeWidth: 3, 999 * lastArrow: {size: 4}, 1000 * firstArrow: {size: 4} 1001 * } 1002 * }); 1003 * //angle.arc.setAttribute({firstArrow: false}); 1004 * angle.arc.setAttribute({lastArrow: false}); 1005 * 1006 * 1007 * })(); 1008 * 1009 * </script><pre> 1010 * 1011 */ 1012 JXG.createMinorSector = function (board, parents, attributes) { 1013 attributes.selection = "minor"; 1014 return JXG.createSector(board, parents, attributes); 1015 }; 1016 1017 JXG.registerElement("minorsector", JXG.createMinorSector); 1018 1019 /** 1020 * @class A major sector is a sector of a circle having measure greater than or equal to 1021 * 180 degrees (pi radians). It is defined by a center, one point that 1022 * defines the radius, and a third point that defines the angle of the sector. 1023 * @pseudo 1024 * @name MajorSector 1025 * @augments Curve 1026 * @constructor 1027 * @type JXG.Curve 1028 * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown. 1029 * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Major sector is a sector of a circle around p1 having measure greater than or equal to 1030 * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3. 1031 * @example 1032 * // Create an arc out of three free points 1033 * var p1 = board.create('point', [2.0, 2.0]); 1034 * var p2 = board.create('point', [1.0, 0.5]); 1035 * var p3 = board.create('point', [3.5, 1.0]); 1036 * 1037 * var a = board.create('majorsector', [p1, p2, p3]); 1038 * </pre><div class="jxgbox" id="JXG83c6561f-7561-4047-b98d-036248a00932" style="width: 300px; height: 300px;"></div> 1039 * <script type="text/javascript"> 1040 * (function () { 1041 * var board = JXG.JSXGraph.initBoard('JXG83c6561f-7561-4047-b98d-036248a00932', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 1042 * p1 = board.create('point', [2.0, 2.0]), 1043 * p2 = board.create('point', [1.0, 0.5]), 1044 * p3 = board.create('point', [3.5, 1.0]), 1045 * 1046 * a = board.create('majorsector', [p1, p2, p3]); 1047 * })(); 1048 * </script><pre> 1049 */ 1050 JXG.createMajorSector = function (board, parents, attributes) { 1051 attributes.selection = "major"; 1052 return JXG.createSector(board, parents, attributes); 1053 }; 1054 1055 JXG.registerElement("majorsector", JXG.createMajorSector); 1056 1057 /** 1058 * @class The angle element is used to denote an angle defined by three points. Visually it is just a {@link Sector} 1059 * element with a radius not defined by the parent elements but by an attribute <tt>radius</tt>. As opposed to the sector, 1060 * an angle has two angle points and no radius point. 1061 * Sector is displayed if type=="sector". 1062 * If type=="square", instead of a sector a parallelogram is displayed. 1063 * In case of type=="auto", a square is displayed if the angle is near orthogonal. 1064 * If no name is provided the angle label is automatically set to a lower greek letter. 1065 * @pseudo 1066 * @name Angle 1067 * @augments Sector 1068 * @constructor 1069 * @type Sector 1070 * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown. 1071 * First possibility of input parameters are: 1072 * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p1 An angle is always drawn counterclockwise from <tt>p1</tt> to 1073 * <tt>p3</tt> around <tt>p2</tt>. 1074 * 1075 * Second possibility of input parameters are: 1076 * @param {JXG.Line_JXG.Line_array|number_array|number} line, line2, coords1 or direction1, coords2 or direction2, radius The angle is defined by two lines. 1077 * The two legs which define the angle are given by two coordinate arrays. 1078 * The points given by these coordinate arrays are projected initially (i.e. only once) onto the two lines. 1079 * The other possibility is to supply directions (+/- 1). 1080 * 1081 * @example 1082 * // Create an angle out of three free points 1083 * var p1 = board.create('point', [5.0, 3.0]), 1084 * p2 = board.create('point', [1.0, 0.5]), 1085 * p3 = board.create('point', [1.5, 5.0]), 1086 * 1087 * a = board.create('angle', [p1, p2, p3]), 1088 * t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]); 1089 * </pre><div class="jxgbox" id="JXGa34151f9-bb26-480a-8d6e-9b8cbf789ae5" style="width: 300px; height: 300px;"></div> 1090 * <script type="text/javascript"> 1091 * (function () { 1092 * var board = JXG.JSXGraph.initBoard('JXGa34151f9-bb26-480a-8d6e-9b8cbf789ae5', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 1093 * p1 = board.create('point', [5.0, 3.0]), 1094 * p2 = board.create('point', [1.0, 0.5]), 1095 * p3 = board.create('point', [1.5, 5.0]), 1096 * 1097 * a = board.create('angle', [p1, p2, p3]), 1098 * t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]); 1099 * })(); 1100 * </script><pre> 1101 * 1102 * @example 1103 * // Create an angle out of two lines and two directions 1104 * var p1 = board.create('point', [-1, 4]), 1105 * p2 = board.create('point', [4, 1]), 1106 * q1 = board.create('point', [-2, -3]), 1107 * q2 = board.create('point', [4,3]), 1108 * 1109 * li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}), 1110 * li2 = board.create('line', [q1,q2], {lastArrow:true}), 1111 * 1112 * a1 = board.create('angle', [li1, li2, [5.5, 0], [4, 3]], { radius:1 }), 1113 * a2 = board.create('angle', [li1, li2, 1, -1], { radius:2 }); 1114 * 1115 * 1116 * </pre><div class="jxgbox" id="JXG3a667ddd-63dc-4594-b5f1-afac969b371f" style="width: 300px; height: 300px;"></div> 1117 * <script type="text/javascript"> 1118 * (function () { 1119 * var board = JXG.JSXGraph.initBoard('JXG3a667ddd-63dc-4594-b5f1-afac969b371f', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 1120 * p1 = board.create('point', [-1, 4]), 1121 * p2 = board.create('point', [4, 1]), 1122 * q1 = board.create('point', [-2, -3]), 1123 * q2 = board.create('point', [4,3]), 1124 * 1125 * li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}), 1126 * li2 = board.create('line', [q1,q2], {lastArrow:true}), 1127 * 1128 * a1 = board.create('angle', [li1, li2, [5.5, 0], [4, 3]], { radius:1 }), 1129 * a2 = board.create('angle', [li1, li2, 1, -1], { radius:2 }); 1130 * })(); 1131 * </script><pre> 1132 * 1133 * 1134 * @example 1135 * // Display the angle value instead of the name 1136 * var p1 = board.create('point', [0,2]); 1137 * var p2 = board.create('point', [0,0]); 1138 * var p3 = board.create('point', [-2,0.2]); 1139 * 1140 * var a = board.create('angle', [p1, p2, p3], { 1141 * radius: 1, 1142 * name: function() { 1143 * return JXG.Math.Geometry.trueAngle(p1, p2, p3).toFixed(1) + '°'; 1144 * }}); 1145 * 1146 * </pre><div id="JXGc813f601-8dd3-4030-9892-25c6d8671512" class="jxgbox" style="width: 300px; height: 300px;"></div> 1147 * <script type="text/javascript"> 1148 * (function() { 1149 * var board = JXG.JSXGraph.initBoard('JXGc813f601-8dd3-4030-9892-25c6d8671512', 1150 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1151 * 1152 * var p1 = board.create('point', [0,2]); 1153 * var p2 = board.create('point', [0,0]); 1154 * var p3 = board.create('point', [-2,0.2]); 1155 * 1156 * var a = board.create('angle', [p1, p2, p3], { 1157 * radius: 1, 1158 * name: function() { 1159 * return JXG.Math.Geometry.trueAngle(p1, p2, p3).toFixed(1) + '°'; 1160 * }}); 1161 * 1162 * })(); 1163 * 1164 * </script><pre> 1165 * 1166 * 1167 * @example 1168 * // Apply a transformation to an angle. 1169 * var t = board.create('transform', [2, 1.5], {type: 'scale'}); 1170 * var an1 = board.create('angle', [[-4,3.9], [-3, 4], [-3, 3]]); 1171 * var an2 = board.create('curve', [an1, t]); 1172 * 1173 * </pre><div id="JXG4c8d9ed8-6339-11e8-9fb9-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div> 1174 * <script type="text/javascript"> 1175 * (function() { 1176 * var board = JXG.JSXGraph.initBoard('JXG4c8d9ed8-6339-11e8-9fb9-901b0e1b8723', 1177 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1178 * var t = board.create('transform', [2, 1.5], {type: 'scale'}); 1179 * var an1 = board.create('angle', [[-4,3.9], [-3, 4], [-3, 3]]); 1180 * var an2 = board.create('curve', [an1, t]); 1181 * 1182 * })(); 1183 * 1184 * </script><pre> 1185 * 1186 */ 1187 JXG.createAngle = function (board, parents, attributes) { 1188 var el, 1189 radius, attr, attrsub, 1190 i, points, 1191 type = "invalid"; 1192 1193 // Two lines or three points? 1194 if ( 1195 parents[0].elementClass === Const.OBJECT_CLASS_LINE && 1196 parents[1].elementClass === Const.OBJECT_CLASS_LINE && 1197 (Type.isArray(parents[2]) || Type.isNumber(parents[2])) && 1198 (Type.isArray(parents[3]) || Type.isNumber(parents[3])) 1199 ) { 1200 type = "2lines"; 1201 } else { 1202 attr = { 1203 name: '' 1204 }; 1205 points = Type.providePoints(board, parents, attr, "point"); 1206 if (points === false) { 1207 throw new Error( 1208 "JSXGraph: Can't create angle with parent types '" + 1209 typeof parents[0] + 1210 "' and '" + 1211 typeof parents[1] + 1212 "' and '" + 1213 typeof parents[2] + 1214 "'." 1215 ); 1216 } 1217 type = "3points"; 1218 } 1219 1220 attr = Type.copyAttributes(attributes, board.options, "angle"); 1221 1222 // If empty, create a new name 1223 if (!Type.exists(attr.name) || attr.name === "") { 1224 attr.name = board.generateName({ type: Const.OBJECT_TYPE_ANGLE }); 1225 } 1226 1227 if (Type.exists(attr.radius)) { 1228 radius = attr.radius; 1229 } else { 1230 radius = 0; 1231 } 1232 1233 board.suspendUpdate(); // Necessary for immediate availability of radius. 1234 if (type === "2lines") { 1235 parents.push(radius); 1236 el = board.create("sector", parents, attr); 1237 /** 1238 * @class 1239 * @ignore 1240 */ 1241 el.updateDataArraySector = el.updateDataArray; 1242 1243 // TODO 1244 /** 1245 * @class 1246 * @ignore 1247 */ 1248 el.setAngle = function (val) {}; 1249 /** 1250 * @class 1251 * @ignore 1252 */ 1253 el.free = function (val) {}; 1254 } else { 1255 el = board.create("sector", [points[1], points[0], points[2]], attr); 1256 el.arc.visProp.priv = true; 1257 1258 /** 1259 * The point defining the radius of the angle element. 1260 * Alias for {@link Sector#radiuspoint}. 1261 * @type JXG.Point 1262 * @name point 1263 * @memberOf Angle.prototype 1264 * 1265 */ 1266 el.point = el.point2 = el.radiuspoint = points[0]; 1267 1268 /** 1269 * Helper point for angles of type 'square'. 1270 * @type JXG.Point 1271 * @name pointsquare 1272 * @memberOf Angle.prototype 1273 */ 1274 el.pointsquare = el.point3 = el.anglepoint = points[2]; 1275 1276 /** 1277 * @ignore 1278 */ 1279 el.Radius = function () { 1280 // Set the angle radius, also @see @link Sector#autoRadius 1281 var r = Type.evaluate(radius); 1282 if (r === "auto") { 1283 return el.autoRadius(); 1284 } 1285 return r; 1286 }; 1287 1288 /** 1289 * @class 1290 * @ignore 1291 */ 1292 el.updateDataArraySector = function () { 1293 var A = this.point2, 1294 B = this.point1, 1295 C = this.point3, 1296 r = this.Radius(), 1297 d = B.Dist(A), 1298 ar, 1299 phi, 1300 sgn = 1, 1301 vp_s = Type.evaluate(this.visProp.selection); 1302 1303 phi = Geometry.rad(A, B, C); 1304 if ((vp_s === "minor" && phi > Math.PI) || (vp_s === "major" && phi < Math.PI)) { 1305 sgn = -1; 1306 } 1307 1308 A = A.coords.usrCoords; 1309 B = B.coords.usrCoords; 1310 C = C.coords.usrCoords; 1311 1312 A = [1, B[1] + ((A[1] - B[1]) * r) / d, B[2] + ((A[2] - B[2]) * r) / d]; 1313 C = [1, B[1] + ((C[1] - B[1]) * r) / d, B[2] + ((C[2] - B[2]) * r) / d]; 1314 1315 ar = Geometry.bezierArc(A, B, C, true, sgn); 1316 1317 this.dataX = ar[0]; 1318 this.dataY = ar[1]; 1319 this.bezierDegree = 3; 1320 }; 1321 1322 /** 1323 * Set an angle to a prescribed value given in radians. 1324 * This is only possible if the third point of the angle, i.e. 1325 * the anglepoint is a free point. 1326 * Removing the constraint again is done by calling "angle.free()". 1327 * 1328 * Changing the angle requires to call the method "free()": 1329 * 1330 * <pre> 1331 * angle.setAngle(Math.PI / 6); 1332 * // ... 1333 * angle.free().setAngle(Math.PI / 4); 1334 * </pre> 1335 * 1336 * @name setAngle 1337 * @memberof Angle.prototype 1338 * @function 1339 * @param {Number|Function} val Number or Function which returns the size of the angle in Radians 1340 * @returns {Object} Pointer to the angle element.. 1341 * @see Angle#free 1342 * 1343 * @example 1344 * var p1, p2, p3, c, a, s; 1345 * 1346 * p1 = board.create('point',[0,0]); 1347 * p2 = board.create('point',[5,0]); 1348 * p3 = board.create('point',[0,5]); 1349 * 1350 * c1 = board.create('circle',[p1, p2]); 1351 * 1352 * a = board.create('angle',[p2, p1, p3], {radius:3}); 1353 * 1354 * a.setAngle(function() { 1355 * return Math.PI / 3; 1356 * }); 1357 * board.update(); 1358 * 1359 * </pre><div id="JXG987c-394f-11e6-af4a-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div> 1360 * <script type="text/javascript"> 1361 * (function() { 1362 * var board = JXG.JSXGraph.initBoard('JXG987c-394f-11e6-af4a-901b0e1b8723', 1363 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1364 * var p1, p2, p3, c, a, s; 1365 * 1366 * p1 = board.create('point',[0,0]); 1367 * p2 = board.create('point',[5,0]); 1368 * p3 = board.create('point',[0,5]); 1369 * 1370 * c1 = board.create('circle',[p1, p2]); 1371 * 1372 * a = board.create('angle',[p2, p1, p3], {radius: 3}); 1373 * 1374 * a.setAngle(function() { 1375 * return Math.PI / 3; 1376 * }); 1377 * board.update(); 1378 * 1379 * })(); 1380 * 1381 * </script><pre> 1382 * 1383 * @example 1384 * var p1, p2, p3, c, a, s; 1385 * 1386 * p1 = board.create('point',[0,0]); 1387 * p2 = board.create('point',[5,0]); 1388 * p3 = board.create('point',[0,5]); 1389 * 1390 * c1 = board.create('circle',[p1, p2]); 1391 * 1392 * a = board.create('angle',[p2, p1, p3], {radius:3}); 1393 * s = board.create('slider',[[-2,1], [2,1], [0, Math.PI*0.5, 2*Math.PI]]); 1394 * 1395 * a.setAngle(function() { 1396 * return s.Value(); 1397 * }); 1398 * board.update(); 1399 * 1400 * </pre><div id="JXG99957b1c-394f-11e6-af4a-901b0e1b8723" class="jxgbox" style="width: 300px; height: 300px;"></div> 1401 * <script type="text/javascript"> 1402 * (function() { 1403 * var board = JXG.JSXGraph.initBoard('JXG99957b1c-394f-11e6-af4a-901b0e1b8723', 1404 * {boundingbox: [-8, 8, 8,-8], axis: true, showcopyright: false, shownavigation: false}); 1405 * var p1, p2, p3, c, a, s; 1406 * 1407 * p1 = board.create('point',[0,0]); 1408 * p2 = board.create('point',[5,0]); 1409 * p3 = board.create('point',[0,5]); 1410 * 1411 * c1 = board.create('circle',[p1, p2]); 1412 * 1413 * a = board.create('angle',[p2, p1, p3], {radius: 3}); 1414 * s = board.create('slider',[[-2,1], [2,1], [0, Math.PI*0.5, 2*Math.PI]]); 1415 * 1416 * a.setAngle(function() { 1417 * return s.Value(); 1418 * }); 1419 * board.update(); 1420 * 1421 * })(); 1422 * 1423 * </script><pre> 1424 * 1425 */ 1426 el.setAngle = function (val) { 1427 var t1, t2, 1428 val2, 1429 p = this.anglepoint, 1430 q = this.radiuspoint; 1431 1432 if (p.draggable()) { 1433 t1 = this.board.create("transform", [val, this.center], { 1434 type: "rotate" 1435 }); 1436 p.addTransform(q, t1); 1437 // Immediately apply the transformation. 1438 // This prevents that jumping elements can be watched. 1439 t1.update(); 1440 p.moveTo(Mat.matVecMult(t1.matrix, q.coords.usrCoords)); 1441 1442 if (Type.isFunction(val)) { 1443 /** 1444 * @ignore 1445 */ 1446 val2 = function () { 1447 return Math.PI * 2 - val(); 1448 }; 1449 } else { 1450 /** 1451 * @ignore 1452 */ 1453 val2 = function () { 1454 return Math.PI * 2 - val; 1455 }; 1456 } 1457 t2 = this.board.create("transform", [val2, this.center], { 1458 type: "rotate" 1459 }); 1460 p.coords.on("update", function () { 1461 t2.update(); 1462 q.moveTo(Mat.matVecMult(t2.matrix, p.coords.usrCoords)); 1463 }); 1464 1465 p.setParents(q); 1466 } 1467 return this; 1468 }; 1469 1470 /** 1471 * Frees an angle from a prescribed value. This is only relevant if the angle size has been set by 1472 * "setAngle()" previously. The anglepoint is set to a free point. 1473 * @name free 1474 * @function 1475 * @memberof Angle.prototype 1476 * @returns {Object} Pointer to the angle element.. 1477 * @see Angle#setAngle 1478 */ 1479 el.free = function () { 1480 var p = this.anglepoint; 1481 1482 if (p.transformations.length > 0) { 1483 p.transformations.pop(); 1484 p.isDraggable = true; 1485 p.parents = []; 1486 1487 p.coords.off("update"); 1488 } 1489 1490 return this; 1491 }; 1492 1493 el.setParents(points); // Important: This overwrites the parents order in underlying sector 1494 } // end '3points' 1495 1496 // GEONExT compatible labels. 1497 if (Type.exists(el.visProp.text)) { 1498 el.label.setText(Type.evaluate(el.visProp.text)); 1499 } 1500 1501 el.elType = "angle"; 1502 el.type = Const.OBJECT_TYPE_ANGLE; 1503 el.subs = {}; 1504 1505 /** 1506 * @class 1507 * @ignore 1508 */ 1509 el.updateDataArraySquare = function () { 1510 var A, B, C, 1511 d1, d2, v, l1, l2, 1512 r = this.Radius(); 1513 1514 if (type === "2lines") { 1515 // This is necessary to update this.point1, this.point2, this.point3. 1516 this.updateDataArraySector(); 1517 } 1518 1519 A = this.point2; 1520 B = this.point1; 1521 C = this.point3; 1522 1523 A = A.coords.usrCoords; 1524 B = B.coords.usrCoords; 1525 C = C.coords.usrCoords; 1526 1527 d1 = Geometry.distance(A, B, 3); 1528 d2 = Geometry.distance(C, B, 3); 1529 1530 // In case of type=='2lines' this is redundant, because r == d1 == d2 1531 A = [1, B[1] + ((A[1] - B[1]) * r) / d1, B[2] + ((A[2] - B[2]) * r) / d1]; 1532 C = [1, B[1] + ((C[1] - B[1]) * r) / d2, B[2] + ((C[2] - B[2]) * r) / d2]; 1533 1534 v = Mat.crossProduct(C, B); 1535 l1 = [-A[1] * v[1] - A[2] * v[2], A[0] * v[1], A[0] * v[2]]; 1536 v = Mat.crossProduct(A, B); 1537 l2 = [-C[1] * v[1] - C[2] * v[2], C[0] * v[1], C[0] * v[2]]; 1538 1539 v = Mat.crossProduct(l1, l2); 1540 v[1] /= v[0]; 1541 v[2] /= v[0]; 1542 1543 this.dataX = [B[1], A[1], v[1], C[1], B[1]]; 1544 this.dataY = [B[2], A[2], v[2], C[2], B[2]]; 1545 1546 this.bezierDegree = 1; 1547 }; 1548 1549 /** 1550 * @class 1551 * @ignore 1552 */ 1553 el.updateDataArrayNone = function () { 1554 this.dataX = [NaN]; 1555 this.dataY = [NaN]; 1556 this.bezierDegree = 1; 1557 }; 1558 1559 /** 1560 * @class 1561 * @ignore 1562 */ 1563 el.updateDataArray = function () { 1564 var type = Type.evaluate(this.visProp.type), 1565 deg = Geometry.trueAngle(this.point2, this.point1, this.point3), 1566 vp_s = Type.evaluate(this.visProp.selection); 1567 1568 if ((vp_s === "minor" && deg > 180.0) || (vp_s === "major" && deg < 180.0)) { 1569 deg = 360.0 - deg; 1570 } 1571 1572 if (Math.abs(deg - 90.0) < Type.evaluate(this.visProp.orthosensitivity) + Mat.eps) { 1573 type = Type.evaluate(this.visProp.orthotype); 1574 } 1575 1576 if (type === "none") { 1577 this.updateDataArrayNone(); 1578 } else if (type === "square") { 1579 this.updateDataArraySquare(); 1580 } else if (type === "sector") { 1581 this.updateDataArraySector(); 1582 } else if (type === "sectordot") { 1583 this.updateDataArraySector(); 1584 if (!this.dot.visProp.visible) { 1585 this.dot.setAttribute({ visible: true }); 1586 } 1587 } 1588 1589 if (!this.visProp.visible || (type !== "sectordot" && this.dot.visProp.visible)) { 1590 this.dot.setAttribute({ visible: false }); 1591 } 1592 }; 1593 1594 attrsub = Type.copyAttributes(attributes, board.options, "angle", "dot"); 1595 /** 1596 * Indicates a right angle. Invisible by default, use <tt>dot.visible: true</tt> to show. 1597 * Though this dot indicates a right angle, it can be visible even if the angle is not a right 1598 * one. 1599 * @type JXG.Point 1600 * @name dot 1601 * @memberOf Angle.prototype 1602 */ 1603 el.dot = board.create( 1604 "point", 1605 [ 1606 function () { 1607 var A, B, r, d, a2, co, si, mat, vp_s; 1608 1609 if (Type.exists(el.dot) && !el.dot.visProp.visible) { 1610 return [0, 0]; 1611 } 1612 1613 A = el.point2.coords.usrCoords; 1614 B = el.point1.coords.usrCoords; 1615 r = el.Radius(); 1616 d = Geometry.distance(A, B, 3); 1617 a2 = Geometry.rad(el.point2, el.point1, el.point3); 1618 1619 vp_s = Type.evaluate(el.visProp.selection); 1620 if ((vp_s === "minor" && a2 > Math.PI) || (vp_s === "major" && a2 < Math.PI)) { 1621 a2 = -(2 * Math.PI - a2); 1622 } 1623 a2 *= 0.5; 1624 1625 co = Math.cos(a2); 1626 si = Math.sin(a2); 1627 1628 A = [1, B[1] + ((A[1] - B[1]) * r) / d, B[2] + ((A[2] - B[2]) * r) / d]; 1629 1630 mat = [ 1631 [1, 0, 0], 1632 [B[1] - 0.5 * B[1] * co + 0.5 * B[2] * si, co * 0.5, -si * 0.5], 1633 [B[2] - 0.5 * B[1] * si - 0.5 * B[2] * co, si * 0.5, co * 0.5] 1634 ]; 1635 return Mat.matVecMult(mat, A); 1636 } 1637 ], 1638 attrsub 1639 ); 1640 1641 el.dot.dump = false; 1642 el.subs.dot = el.dot; 1643 1644 if (type === "2lines") { 1645 for (i = 0; i < 2; i++) { 1646 board.select(parents[i]).addChild(el.dot); 1647 } 1648 } else { 1649 for (i = 0; i < 3; i++) { 1650 board.select(points[i]).addChild(el.dot); 1651 } 1652 } 1653 board.unsuspendUpdate(); 1654 1655 /** 1656 * Returns the value of the angle. 1657 * @memberOf Angle.prototype 1658 * @name Value 1659 * @function 1660 * @param {String} [unit='length'] Unit of the returned values. Possible units are 1661 * <ul> 1662 * <li> 'radians' (default): angle value in radians 1663 * <li> 'degrees': angle value in degrees 1664 * <li> 'semicircle': angle value in radians as a multiple of π, e.g. if the angle is 1.5π, 1.5 will be returned. 1665 * <li> 'circle': angle value in radians as a multiple of 2π 1666 * <li> 'length': length of the arc line of the angle 1667 * </ul> 1668 * It is sufficient to supply the first three characters of the unit, e.g. 'len'. 1669 * @returns {Number} angle value in various units. 1670 * @see Sector#L 1671 * @example 1672 * var A, B, C, ang, 1673 * r = 0.5; 1674 * A = board.create("point", [3, 0]); 1675 * B = board.create("point", [0, 0]); 1676 * C = board.create("point", [2, 2]); 1677 * ang = board.create("angle", [A, B, C], {radius: r}); 1678 * 1679 * console.log(ang.Value()); 1680 * // Output Math.PI * 0.25 1681 * 1682 * console.log(ang.Value('radian')); 1683 * // Output Math.PI * 0.25 1684 * 1685 * console.log(ang.Value('degree'); 1686 * // Output 45 1687 * 1688 * console.log(ang.Value('semicircle')); 1689 * // Output 0.25 1690 * 1691 * console.log(ang.Value('circle')); 1692 * // Output 0.125 1693 * 1694 * console.log(ang.Value('length')); 1695 * // Output r * Math.PI * 0.25 1696 * 1697 * console.log(ang.L()); 1698 * // Output r * Math.PI * 0.25 1699 * 1700 */ 1701 el.Value = function(unit) { 1702 unit = unit || 'radians'; 1703 if (unit === '') { 1704 unit = 'radians'; 1705 } 1706 return el.arc.Value(unit); 1707 }; 1708 1709 // documented in GeometryElement 1710 /** 1711 * @class 1712 * @ignore 1713 */ 1714 el.getLabelAnchor = function () { 1715 var vec, 1716 dx = 12, 1717 A, B, r, d, a2, co, si, mat, 1718 vp_s = Type.evaluate(el.visProp.selection), 1719 l_vp = this.label ? this.label.visProp : this.visProp.label; 1720 1721 // If this is uncommented, the angle label can not be dragged 1722 //if (Type.exists(this.label)) { 1723 // this.label.relativeCoords = new Coords(Const.COORDS_BY_SCREEN, [0, 0], this.board); 1724 //} 1725 1726 if (Type.exists(this.label) && Type.exists(this.label.visProp.fontsize)) { 1727 dx = Type.evaluate(this.label.visProp.fontsize); 1728 } 1729 dx /= this.board.unitX; 1730 1731 A = el.point2.coords.usrCoords; 1732 B = el.point1.coords.usrCoords; 1733 r = el.Radius(); 1734 d = Geometry.distance(A, B, 3); 1735 a2 = Geometry.rad(el.point2, el.point1, el.point3); 1736 if ((vp_s === "minor" && a2 > Math.PI) || (vp_s === "major" && a2 < Math.PI)) { 1737 a2 = -(2 * Math.PI - a2); 1738 } 1739 a2 *= 0.5; 1740 co = Math.cos(a2); 1741 si = Math.sin(a2); 1742 1743 A = [1, B[1] + ((A[1] - B[1]) * r) / d, B[2] + ((A[2] - B[2]) * r) / d]; 1744 1745 mat = [ 1746 [1, 0, 0], 1747 [B[1] - 0.5 * B[1] * co + 0.5 * B[2] * si, co * 0.5, -si * 0.5], 1748 [B[2] - 0.5 * B[1] * si - 0.5 * B[2] * co, si * 0.5, co * 0.5] 1749 ]; 1750 vec = Mat.matVecMult(mat, A); 1751 vec[1] /= vec[0]; 1752 vec[2] /= vec[0]; 1753 vec[0] /= vec[0]; 1754 1755 d = Geometry.distance(vec, B, 3); 1756 vec = [ 1757 vec[0], 1758 B[1] + ((vec[1] - B[1]) * (r + dx)) / d, 1759 B[2] + ((vec[2] - B[2]) * (r + dx)) / d 1760 ]; 1761 1762 l_vp.position = Geometry.calcLabelQuadrant(Geometry.rad([1, 0], [0, 0], vec)); 1763 1764 return new Coords(Const.COORDS_BY_USER, vec, this.board); 1765 }; 1766 1767 el.methodMap = Type.deepCopy(el.methodMap, { 1768 setAngle: "setAngle", 1769 Value: "Value", 1770 free: "free" 1771 }); 1772 1773 return el; 1774 }; 1775 1776 JXG.registerElement("angle", JXG.createAngle); 1777 1778 /** 1779 * @class A non-reflex angle is the acute or obtuse instance of an angle. 1780 * It is defined by a center, one point that 1781 * defines the radius, and a third point that defines the angle of the sector. 1782 * @pseudo 1783 * @name NonReflexAngle 1784 * @augments Angle 1785 * @constructor 1786 * @type Sector 1787 * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown. 1788 * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Minor sector is a sector of a circle around p1 having measure less than or equal to 1789 * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3. 1790 * @example 1791 * // Create a non-reflex angle out of three free points 1792 * var p1 = board.create('point', [5.0, 3.0]), 1793 * p2 = board.create('point', [1.0, 0.5]), 1794 * p3 = board.create('point', [1.5, 5.0]), 1795 * 1796 * a = board.create('nonreflexangle', [p1, p2, p3], {radius: 2}), 1797 * t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]); 1798 * </pre><div class="jxgbox" id="JXGd0ab6d6b-63a7-48b2-8749-b02bb5e744f9" style="width: 300px; height: 300px;"></div> 1799 * <script type="text/javascript"> 1800 * (function () { 1801 * var board = JXG.JSXGraph.initBoard('JXGd0ab6d6b-63a7-48b2-8749-b02bb5e744f9', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 1802 * p1 = board.create('point', [5.0, 3.0]), 1803 * p2 = board.create('point', [1.0, 0.5]), 1804 * p3 = board.create('point', [1.5, 5.0]), 1805 * 1806 * a = board.create('nonreflexangle', [p1, p2, p3], {radius: 2}), 1807 * t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]); 1808 * })(); 1809 * </script><pre> 1810 */ 1811 JXG.createNonreflexAngle = function (board, parents, attributes) { 1812 var el; 1813 1814 attributes.selection = "minor"; 1815 attributes = Type.copyAttributes(attributes, board.options, 'nonreflexangle'); 1816 el = JXG.createAngle(board, parents, attributes); 1817 1818 // Documented in createAngle 1819 el.Value = function (unit) { 1820 var rad = Geometry.rad(this.point2, this.point1, this.point3); 1821 unit = unit || 'radians'; 1822 if (unit === '') { 1823 unit = 'radians'; 1824 } 1825 rad = (rad < Math.PI) ? rad : 2.0 * Math.PI - rad; 1826 1827 return this.arc.Value(unit, rad); 1828 }; 1829 return el; 1830 }; 1831 1832 JXG.registerElement("nonreflexangle", JXG.createNonreflexAngle); 1833 1834 /** 1835 * @class A reflex angle is the neither acute nor obtuse instance of an angle. 1836 * It is defined by a center, one point that 1837 * defines the radius, and a third point that defines the angle of the sector. 1838 * @pseudo 1839 * @name ReflexAngle 1840 * @augments Angle 1841 * @constructor 1842 * @type Sector 1843 * @throws {Error} If the element cannot be constructed with the given parent objects an exception is thrown. 1844 * @param {JXG.Point_JXG.Point_JXG.Point} p1,p2,p3 . Minor sector is a sector of a circle around p1 having measure less than or equal to 1845 * 180 degrees (pi radians) and starts at p2. The radius is determined by p2, the angle by p3. 1846 * @example 1847 * // Create a non-reflex angle out of three free points 1848 * var p1 = board.create('point', [5.0, 3.0]), 1849 * p2 = board.create('point', [1.0, 0.5]), 1850 * p3 = board.create('point', [1.5, 5.0]), 1851 * 1852 * a = board.create('reflexangle', [p1, p2, p3], {radius: 2}), 1853 * t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]); 1854 * </pre><div class="jxgbox" id="JXGf2a577f2-553d-4f9f-a895-2d6d4b8c60e8" style="width: 300px; height: 300px;"></div> 1855 * <script type="text/javascript"> 1856 * (function () { 1857 * var board = JXG.JSXGraph.initBoard('JXGf2a577f2-553d-4f9f-a895-2d6d4b8c60e8', {boundingbox: [-1, 7, 7, -1], axis: true, showcopyright: false, shownavigation: false}), 1858 * p1 = board.create('point', [5.0, 3.0]), 1859 * p2 = board.create('point', [1.0, 0.5]), 1860 * p3 = board.create('point', [1.5, 5.0]), 1861 * 1862 * a = board.create('reflexangle', [p1, p2, p3], {radius: 2}), 1863 * t = board.create('text', [4, 4, function() { return JXG.toFixed(a.Value(), 2); }]); 1864 * })(); 1865 * </script><pre> 1866 */ 1867 JXG.createReflexAngle = function (board, parents, attributes) { 1868 var el; 1869 1870 attributes.selection = "major"; 1871 attributes = Type.copyAttributes(attributes, board.options, 'reflexangle'); 1872 el = JXG.createAngle(board, parents, attributes); 1873 1874 // Documented in createAngle 1875 el.Value = function (unit) { 1876 var rad = Geometry.rad(this.point2, this.point1, this.point3); 1877 unit = unit || 'radians'; 1878 if (unit === '') { 1879 unit = 'radians'; 1880 } 1881 rad = (rad >= Math.PI) ? rad : 2.0 * Math.PI - rad; 1882 1883 return this.arc.Value(unit, rad); 1884 }; 1885 1886 return el; 1887 }; 1888 1889 JXG.registerElement("reflexangle", JXG.createReflexAngle); 1890