How to use the konva.Ellipse 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 / drawUI.ts View on Github external
const drawHypotheticalArea = () => {
    // The "Hypothetical" circle that shows whether or not we are currently in a hypothetical
    globals.elements.hypoCircle = new Konva.Group({
        x: clueAreaValues.x * winW,
        y: clueAreaValues.y * winH,
        visible: false,
    });
    globals.layers.get('UI')!.add(globals.elements.hypoCircle);

    const circle = new Konva.Ellipse({
        x: (clueAreaValues.w! * 0.5) * winW,
        y: 0.105 * winH,
        radiusX: clueAreaValues.w! * 0.4 * winW,
        radiusY: 0.05 * winH,
        fill: 'black',
        opacity: 0.5,
        stroke: 'black',
        strokeWidth: 4,
    });
    globals.elements.hypoCircle.add(circle);

    const hypoValues = {
        y: 0.075,
        w: clueAreaValues.w! * 0.6,
    };
    const text = new FitText({
github Zamiell / hanabi-live / public / js / src / game / ui / drawUI.ts View on Github external
w: 0.08,
        h: 0.051,
        fontSize: 0.03,
        cornerRadius: 0.05,
        spaceH: 0.01,
    };
    if (!globals.lobby.settings.get('showKeldonUI')) {
        timerValues.x1 = 0.352;
        timerValues.x2 = timerValues.x1;
        timerValues.y1 = 0.77;
        timerValues.y2 = 0.885;
    }

    // A circle around the timer indicates that we have queued a pause
    // (we want the timer to be on top of this so that it does not interfere with mouse events)
    globals.elements.timer1Circle = new Konva.Ellipse({
        x: (timerValues.x1 + 0.04) * winW,
        y: (timerValues.y1 + 0.035) * winH,
        radiusX: 0.05 * winW,
        radiusY: 0.07 * winH,
        stroke: '#ffe03b', // Yellow
        strokeWidth: 2,
        visible: globals.pauseQueued,
    });
    globals.layers.get('UI')!.add(globals.elements.timer1Circle);

    // The timer for "You"
    globals.elements.timer1 = new TimerDisplay({
        x: timerValues.x1 * winW,
        y: timerValues.y1 * winH,
        width: timerValues.w * winW,
        height: timerValues.h * winH,
github wotermelon / vue-painting / src / vue-painting / core / painting.js View on Github external
_ellipse (startX, startY, endX, endY) {
    const halfWidth = (endX - startX) / 2
    const halfHeight = (endY - startY) / 2
    return new Konva.Ellipse({
      x: startX + halfWidth,
      y: startY + halfHeight,
      radius: {
        x: Math.abs(halfWidth),
        y: Math.abs(halfHeight)
      },
      stroke: this.drawConfig.color,
      strokeWidth: this.drawConfig.lineWidth
    })
  }
  // 文本框

konva

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

MIT
Latest version published 1 month ago

Package Health Score

88 / 100
Full package analysis