Question

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

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

将呈现

<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>

但我想使其呈现

<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>

保持canvas.width（attribute）保持在750，但将div.konvajs-content.style.width更改为100vw，将canvas.style.width更改为100%

===更新===

为什么我需要这个？

我正在创建一个图像编辑器，用户可以保存从cavnas导出的图像，我希望画布在布局中具有响应性，但是我还必须使从画布导出的图像具有相同的宽度750就我而言。

这类似于带有比例管理器的html5游戏引擎会做的事情。

Answer 1

Konva在您更改舞台或画布的CSS样式（例如宽度和高度）的情况下效果不佳。

如果要使其具有响应性，则可以采用其他方法。只需将舞台放置到div容器中，并使其具有所需的大小（使用样式进行配置）即可。然后将舞台大小设置为容器的大小。

// 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();

看看这个演示：https://konvajs.org/docs/sandbox/Responsive_Canvas.html

vue-konva将自定义样式传递给div.konvajs-content和canvas

1 个答案: