VueJS позиционирует несколько дочерних элементов с компонентами canvas внутри parent - PullRequest
Новая
       25

VueJS позиционирует несколько дочерних элементов с компонентами canvas внутри parent

0 голосов
/ 15 октября 2019

У меня есть несколько компонентов, которые по сути являются просто элементами canvas с прослушивателями событий для интерактивности.

Я установил высоту и ширину элементов холста с помощью JavaScript внутри каждого компонента (если каждый компонент отображается на экране самостоятельно, он будет занимать полный видовой экран). Обратите внимание, что у каждого дочернего компонента есть один или несколько элементов canvas с position: absolute внутри элемента div с position: absolute.

Я хотел бы иметь родительский компонент, который может отображать этих дочерних элементов холста в разных частях экрана, для которых пришло в голову макет CSS-сетки. Однако я не могу понять, как заставить элементы canvas правильно отображаться.

Если я просто вставляю их один за другим в родительский компонент, они отображаются поверх друг друга, поскольку родительский элемент по умолчанию равен position: static. Если я заверну каждого ребенка в div с position: relative, дисплей будет не таким, как ожидалось.

Можно ли обернуть этих детей, чтобы они занимали 100% выделенного экрана, выделенного родителем? То есть каждому дочернему элементу будет предоставлена ​​часть экрана, для которой он будет занимать 100% этого пространства, не перекрывая родного брата?

Пример: дочерний компонент Canvas 1 (ArrangeWindow.vue): 

<template>
  <div id="container">
    <canvas id="arrangeCanvas"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    let arrangeCanvas = document.getElementById("arrangeCanvas");
    let arrangeCtx = arrangeCanvas.getContext("2d");

    let container = document.getElementById("container");
    let dpi = window.devicePixelRatio;
    let height = container.clientHeight * dpi;
    let width = container.clientWidth * dpi;

    arrangeCanvas.setAttribute("height", height);
    arrangeCanvas.setAttribute("width", width);

    arrangeCtx.beginPath();
    arrangeCtx.rect(0, 0, width, height);
    arrangeCtx.fillStyle = "#666699";
    arrangeCtx.fill();
  }
};
</script>

<style>
* {
  box-sizing: border-box;
}
#container {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
}
#arrangeCanvas {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>

дочерний холст Компонент 2 (с именем YellowCanvasTest.vue) 

<template>
  <div id="container">
    <canvas id="arrangeCanvas2"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    let arrangeCanvas2 = document.getElementById("arrangeCanvas");
    let arrangeCtx = arrangeCanvas.getContext("2d");

    let container = document.getElementById("container");
    let dpi = window.devicePixelRatio;
    let height = container.clientHeight * dpi;
    let width = container.clientWidth * dpi;

    arrangeCanvas2.setAttribute("height", height);
    arrangeCanvas2.setAttribute("width", width);

    arrangeCtx.beginPath();
    arrangeCtx.rect(0, 0, width, height);
    arrangeCtx.fillStyle = "#ffff00";
    arrangeCtx.fill();
  }
};
</script>

<style>
* {
  box-sizing: border-box;
}
#container {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
}
#arrangeCanvas2 {
  position: absolute;
  height: 100%;
  width: 100%;
}
</style>

родительский компонент: 

<template>
    <div>
    <div class="container">
      <arrange-window></arrange-window>
    </div>
    <div class=“container”>
      <yellow></yellow>
    </div>
    </div>
</template>

<script>
import ArrangeWindow from "../components/ArrangeWindow";
import yellow from '../components/YellowCanvasTest'
export default {
  components: {
    arrangeWindow: ArrangeWindow,
    yellow
  }
};
</script>

<style scoped>
.container {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>

Обратите внимание, что происходит, когда .container изменилась его позицияк родственнику. Также обратите внимание, что происходит, когда css для .container полностью удаляется.

...