How to use the konva.Stage 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 google / crmint / frontend / src / app / pipelines / pipeline-graph / pipeline-graph-drawer.ts View on Github external
public drawStage() {
    this.ctxMenuZone = {x: [], y: []};

    this.stage = new Konva.Stage({
      container: 'crmi-pipeline-graph',
      width: this.pgraph.stWidth,
      height: this.pgraph.stHeight
    });

    this.layerLines = new Konva.Layer();
    this.stage.add(this.layerLines);

    // Job box layer
    this.layerJobBoxes = new Konva.Layer();
    this.stage.add(this.layerJobBoxes);

    // Add layer Tooltip
    this.layerTooltip = new Konva.Layer();
    this.gtooltip.add(this.btooltip);
    this.gtooltip.add(this.tooltip);
github NCI-GDC / portal-ui / src / packages / @ncigdc / modern_components / GeneExpression / inchlib / index.js View on Github external
self._adjust_leaf_size(self.heatmap_array.length);

    if (self.options.draw_row_ids) {
      self._get_row_id_size();
    } else {
      self.right_margin = 100;
    }

    self._adjust_horizontal_sizes();
    self.top_heatmap_distance = self.header_height + self.column_metadata_height + self.column_metadata_row_height / 2;

    if (self.options.column_dendrogram && self.heatmap_header) {
      self.footer_height = 150;
    }

    self.stage = new Konva.Stage({
      // this has to be a javascript selector, not a jquery one
      container: self.element,
    });

    self.options.height = self.heatmap_array.length * self.pixels_for_leaf + self.header_height + self.footer_height;

    self.stage.setWidth(self.options.width);
    self.stage.setHeight(self.options.height);
    self._draw_stage_layer();

    if (self.options.dendrogram) {
      self.timer = 0;
      self._draw_dendrogram_layers();
      self.root_id = self._get_root_id(self.data.nodes);
      self._draw_row_dendrogram(self.root_id);
github runbytech / ultron-ele / src / sections / certificateSection.js View on Github external
componentDidMount() {
    const stageW = 640
    const stageH = 450
    this.stage = new Konva.Stage({
      container: 'certiCntnr',
      width: stageW,
      height: stageH
    })
    // certificat template image
    const imageObj = new Image()
    // load template image file...
    const imageLayer = new Konva.Layer()
    const textLayer = new Konva.Layer()
    imageObj.onload = function(e) {
      let certiImage = new Konva.Image({
        x: 0, y: 0,
        image: imageObj,
        width: stageW, height: stageH
      })
      imageLayer.add(certiImage)
github tryolabs / taggerine / frontend / src / Tagger.js View on Github external
componentDidMount() {
    this._stage = new Konva.Stage({
      container: '#canvas-container',
      width: this.props.width,
      height: this.props.height
    })

    this._layer = new Konva.Layer()
    this._stage.add(this._layer)

    this._boundingBoxes = {}
    this.addImage()
  }
github sb / smallbasic-editor / Source / SuperBasic.Client / Interop / ShapesInterop.ts View on Github external
public initialize(elementId: string): Promise {
        const element = document.getElementById(elementId);

        if (!element) {
            throw `Container element with id '${elementId} not found`;
        }

        this.stage = new Konva.Stage({
            container: element.id,
            width: element.offsetWidth,
            height: element.offsetHeight
        });

        this.layer = new Konva.Layer();
        this.stage.add(this.layer);

        this.shapes = {};

        return Promise.resolve(true);
    }
github WorkSight / rewire / packages / rewire-ui / src / components / AvatarCropper.tsx View on Github external
initStage(): Konva.Stage {
    return new Konva.Stage({
      container: this.containerId,
      width: this.width,
      height: this.height
    });
  }
github Zamiell / hanabi-live / public / js / src / game / ui / HanabiUI.ts View on Github external
const initStage = () => {
    globals.stage = new Konva.Stage({
        container: 'game',
    });

    const ratio = 16 / 9;

    let ww = window.innerWidth;
    let wh = window.innerHeight;

    if (ww < 640) {
        ww = 640;
    }
    if (wh < 360) {
        wh = 360;
    }

    let cw;

konva

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

MIT
Latest version published 17 days ago

Package Health Score

88 / 100
Full package analysis