57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<main id="mainContent">
|
||
|
|
<canvas
|
||
|
|
id="canvas-board"
|
||
|
|
ref="canvas-board"
|
||
|
|
:width="canvasWidth"
|
||
|
|
:height="canvasHeight"
|
||
|
|
>
|
||
|
|
</canvas>
|
||
|
|
</main>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { mapGetters } from "vuex";
|
||
|
|
export default {
|
||
|
|
name: "CanvasBoard",
|
||
|
|
computed: {
|
||
|
|
...mapGetters({
|
||
|
|
canvasWidth: "getCanvasWidth",
|
||
|
|
canvasHeight: "getCanvasHeight",
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
const canvas = document.getElementById("canvas-board")
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
this.$store.commit(
|
||
|
|
"setCanvas",
|
||
|
|
canvas
|
||
|
|
)
|
||
|
|
this.$store.commit(
|
||
|
|
"setContext",
|
||
|
|
ctx
|
||
|
|
)
|
||
|
|
this.$store.commit(
|
||
|
|
"setCanvasWidth",
|
||
|
|
canvas.parentElement.clientWidth
|
||
|
|
);
|
||
|
|
this.$store.commit(
|
||
|
|
"setCanvasHeight",
|
||
|
|
canvas.parentElement.clientHeight
|
||
|
|
);
|
||
|
|
this.$store.commit(
|
||
|
|
"setBoardWidth",
|
||
|
|
canvas.parentElement.clientWidth
|
||
|
|
);
|
||
|
|
this.$store.commit(
|
||
|
|
"setBoardHeight",
|
||
|
|
canvas.parentElement.clientHeight
|
||
|
|
);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
#mainContent {
|
||
|
|
min-width: 70%;
|
||
|
|
}
|
||
|
|
</style>
|