How to use the konva.Arrow function in konva

To help you get started, we’ve selected a few konva examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Zamiell / hanabi-live / public / js / src / game / ui / Arrow.ts View on Github external
// so draw that manually at the bottom of the arrow
        const edge = new Konva.Line({
            points: [
                x - pointerLength,
                0,
                x + pointerLength,
                0,
            ],
            fill: 'black',
            stroke: 'black',
            strokeWidth: pointerLength * 0.75,
        });
        this.add(edge);

        // The main (inside) arrow is exported so that we can change the color later
        this.base = new Konva.Arrow({
            points: [
                x,
                0,
                x,
                y * 0.8,
            ],
            pointerLength,
            pointerWidth: pointerLength,
            fill: 'white',
            stroke: 'white',
            strokeWidth: pointerLength * 1.25,
        });
        this.add(this.base);

        // A circle will appear on the body of the arrow to indicate the type of clue given
        this.circle = new Konva.Circle({
github Zamiell / hanabi-live / public / js / src / game / ui / drawCurrentPlayerArea.js View on Github external
globals.elements.currentPlayerArrow.add(arrowBorder);

    const arrowBorderEdge = new Konva.Line({
        points: [
            (arrowValues.spacing) * winW,
            ((arrowValues.h / 2) - 0.005) * winH,
            (arrowValues.spacing) * winW,
            ((arrowValues.h / 2) + 0.005) * winH,
        ],
        fill: 'black',
        stroke: 'black',
        strokeWidth: 5,
    });
    globals.elements.currentPlayerArrow.add(arrowBorderEdge);

    const arrowMain = new Konva.Arrow({
        points: [
            arrowValues.spacing * winW,
            (arrowValues.h / 2) * winH,
            (arrowValues.w - arrowValues.spacing) * winW,
            (arrowValues.h / 2) * winH,
        ],
        pointerLength: 10,
        pointerWidth: 10,
        fill: LABEL_COLOR,
        stroke: LABEL_COLOR,
        strokeWidth: 5,
    });
    globals.elements.currentPlayerArrow.add(arrowMain);

    // Set the "Current Player" area up for this specific turn
    globals.elements.currentPlayerArea.update = function update(currentPlayerIndex) {
github Zamiell / hanabi-live / public / js / src / game / ui / Arrow.ts View on Github external
x,
                y,
            },
            visible: false,
        });

        // Class variables
        // (we can't initialize these above due to "super()" not being on the first line)
        this.pointingTo = null;
        this.tween = null;

        const pointerLength = 0.006 * winW;

        // We want there to be a black outline around the arrow,
        // so we draw a second arrow that is slightly bigger than the first
        const border = new Konva.Arrow({
            points: [
                x,
                0,
                x,
                y * 0.8,
            ],
            pointerLength,
            pointerWidth: pointerLength,
            fill: 'black',
            stroke: 'black',
            strokeWidth: pointerLength * 2,
            shadowBlur: pointerLength * 4,
            shadowOpacity: 1,
        });
        this.add(border);
github Zamiell / hanabi-live / public / js / src / game / ui / drawCurrentPlayerArea.js View on Github external
fill: 'black',
        opacity: 0.2,
    });
    globals.elements.currentPlayerArea.add(rect2);

    globals.elements.currentPlayerArrow = new Konva.Group({
        x: (arrowValues.x + (arrowValues.w / 2)) * winW,
        y: (currentPlayerAreaValues.h / 2) * winH,
        offset: {
            x: (arrowValues.w / 2) * winW,
            y: (currentPlayerAreaValues.h / 2) * winH,
        },
    });
    globals.elements.currentPlayerArea.add(globals.elements.currentPlayerArrow);

    const arrowBorder = new Konva.Arrow({
        points: [
            arrowValues.spacing * winW,
            (arrowValues.h / 2) * winH,
            (arrowValues.w - arrowValues.spacing) * winW,
            (arrowValues.h / 2) * winH,
        ],
        pointerLength: 10,
        pointerWidth: 10,
        fill: 'black',
        stroke: 'black',
        strokeWidth: 10,
        shadowBlur: 75,
        shadowOpacity: 1,
    });
    globals.elements.currentPlayerArrow.add(arrowBorder);
github ElemeFE / Hachart / src / draw.js View on Github external
const Line = function(a, type) {
    const points = [];
    a.points.map(p => {
      points.push(p.x, p.y);
    });
    const shortPoints = shortLine(points);
    const opt = Object.assign({}, type, {points: shortPoints});
    const line = new Konva.Line(opt);
    layer.add(line);
    const arrowPoints = points.slice(points.length - 4, points.length);
    const arrow = new Konva.Arrow({
      x: 0,
      y: 0,
      points: arrowPoints,
      pointerLength: type.strokeWidth * 3,
      pointerWidth: type.strokeWidth * 3,
      fill: type.stroke
    });
    layer.add(arrow);
  };

konva

<p align="center"> <img src="https://konvajs.org/android-chrome-192x192.png" alt="Konva logo" height="180" /> </p>

MIT
Latest version published 18 days ago

Package Health Score

88 / 100
Full package analysis