vue-konva pass custom style to div.konvajs-content & canvas

Question

<v-stage :config="{width:750,height:750}">
  <v-layer>

  </v-layer>
</v-stage>

will render

<div>
  <div
    class="konvajs-content"
    role="presentation"
    style="position: relative; user-select: none; width: 750px; height: 750px;"
  >
    <canvas
      width="750"
      height="750"
      style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 750px; height: 750px; display: block;"
    ></canvas>
  </div>
</div>

but I want to make it render

<div>
  <div
    class="konvajs-content"
    role="presentation"
    style="position: relative; user-select: none; width: 100vw; height: 100vw;"
  >
    <canvas
      width="750"
      height="750"
      style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block;"
    ></canvas>
  </div>
</div>

keeping the canvas.width(attribute) stay in 750, but change div.konvajs-content.style.width to 100vw, and canvas.style.width to 100%

=== update ===

Why I need this ?

I'm creating an image editor, and the users may save the image exported from the cavnas, I want the canvas be responsive in layout, but I also have to make the image exported from the canvas have the same width, 750 in my case.

This is something like what a html5 game engine with scale manager would do.

@lavrton please take a look at my updated question description — Littlee, Jul 11 '19 at 02:27

score 1 · Answer 1 · answered Jul 11 '19 at 11:00

Konva doesn't work well in the case when you change the CSS styles (like width and height) of a stage or canvases.

If you want to make it responsive behavior you can do it differently. Just place a stage into the div container with required size (configured with styles). Then set the stage size to the size of the container.

// your desired "virtual" width of the stage
var stageWidth = 750;

var container = document.querySelector('#stage-parent');

// now we need to fit stage into the container
var containerWidth = container.offsetWidth;

// also we can scale the stage
var scale = containerWidth / stageWidth;
stage.width(containerWidth);
stage.scale({ x: scale, y: scale });
stage.draw();

Take a look into this demo: https://konvajs.org/docs/sandbox/Responsive_Canvas.html

vue-konva pass custom style to div.konvajs-content & canvas

1 Answers1