Share JSXGraph: example "Arrows for technical drawings"

JSXGraph
Share JSXGraph: example "Arrows for technical drawings"
This website is a beta version. The official release will be in **2023**.

Arrows for technical drawings

Applications Technical
Create your own arrow heads for technical drawings. The output is the data for SVG paths, i.e. the arrow head in both directions. This is an stripped down implementation of the paper of David Salomon: *Arrows for Technical Drawings*, TUGboat, Volume 13 (1992), No.2, p. 146-149. Parameters: - `arrowLength`: length from base to tip - `insetRatio`: relative position of inset 1..0 - `tipAngle`: opening angle at tip - `wingCurve`: curvature of flanks (+ inwards, - outwards) - `tailCurve`: curvature of flanks (+ inwards, - outwards)
Web references:
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-8, 7, 4, -3],
    axis: true
});

    var l = 5,
        insetRatio,
        tipAngle,
        wingCurve,
        tailCurve;

    insetRatio = board.create('slider', [[-6, 5.5], [0, 5.5], [0, 1, 2]], {name: 'inset ratio', snapWidth: 0.1});
    tipAngle = board.create('slider',   [[-6, 5],   [0, 5],   [0, 30, 90]], {name: 'tip angle', snapWidth: 1});
    wingCurve = board.create('slider',  [[-6, 4.5], [0, 4.5], [0, 0, 30]], {name: 'wing curve', snapWidth: 1});
    tailCurve = board.create('slider',  [[-6, 4],   [0, 4],   [0, 0, 40]], {name: 'tail curve', snapWidth: 1});

    var arrowhead = board.create('curve', [[], []], {strokeColor: 'blue', strokeOpacity: 0.4,
        fillColor: 'blue', fillOpacity: 0.4, strokeWidth: 10, lineCap: 'square'});

    arrowhead.updateDataArray = function() {
        var p = [],
            p2, f,
            ang, res,
            ang1, ang2,
            arr = [], arr2 = [],
            controls,
            ir = insetRatio.Value(),
            ta = tipAngle.Value(),
            wc = wingCurve.Value(),
            tc = tailCurve.Value();

        p.push([0, 0]);
        ang = 0.5 * ta * Math.PI / 180;
        p.push([-l / ir, l * Math.sin(ang) / Math.cos(ang)]);
        p.push([-l, 0]);
        p.push([p[1][0], -p[1][1]]);

        ang1 = Math.atan2(p[2][1] - p[1][1], p[2][0] - p[1][0]) * 180 / Math.PI + tc;
        if (tc === 0) {
            ang2 = [ang1, 180 - ang1];
        } else {
            ang2 = -90;
        }
        controls = {
            tension: 1,
            0: {direction: [0.5 * ta - wc, 180 - 0.5 * ta + wc]},
            1: {direction: [180 - 0.5 * ta - wc, ang1]},
            2: {direction: ang2},
            3: {direction: [180 - ang1, 0.5 * ta + wc]},
            isClosed: true
        };

        res = JXG.Math.Metapost.curve(p, controls);
        this.bezierDegree = 3;
        this.dataX = res[0];
        this.dataY = res[1];

        f = 10 / (p[0][0] - p[1][0]);
        p2 = p.map( z => [f * (z[0] - p[3][0]), f * (z[1] - p[3][1])] );
        res = JXG.Math.Metapost.curve(p2, controls);
        arr = res[0].map( (x, i) => [x.toFixed(2) + ',' + res[1][i].toFixed(2)] );
        arr2 = res[0].map( (x, i) => [(10-x).toFixed(2) + ',' + res[1][i].toFixed(2)] );

        document.getElementById('output').value =
            'insetRatio:' + ir + ' ' +
            'tipAngle:' + ta + ' ' +
            'wingCurve:' + wc + ' ' +
            'tailCurve:' + tc + '\n\n' +
            arr.join(' C ') + '\n\n' +
            arr2.join(' C ');
    };

    var li = board.create('segment', [[-10, 0], [0,0]], {strokeWidth: 10, strokeOpacity: 0.4});
    board.update();

 <textarea id="output" cols="70" rows="20"></textarea>

license

This example is licensed under a Creative Commons Attribution 4.0 International License.

Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.