page: 📄 设置元素的zIndex相关API
This commit is contained in:
parent
4a19611284
commit
f86dfe348a
|
|
@ -1,6 +1,5 @@
|
|||
```sh
|
||||
https://konvajs.org/docs/groups_and_layers/Layering.html
|
||||
https://konvajs.org/docs/groups_and_layers/zIndex.html
|
||||
|
||||
https://konvajs.org/docs/tweens/Linear_Easing.html
|
||||
https://konvajs.org/docs/tweens/Common_Easings.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<script setup lang="ts">
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import Konva from 'konva/lib';
|
||||
import { Group } from 'konva/lib/Group';
|
||||
import { Rect } from 'konva/lib/shapes/Rect';
|
||||
|
||||
const { width, height } = useWindowSize();
|
||||
const yellowGroup = ref<Group>();
|
||||
const blueGroup = ref<Group>();
|
||||
const box = ref<Rect>();
|
||||
|
||||
const initial = () => {
|
||||
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
yellowGroup.value = new Konva.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
blueGroup.value = new Konva.Group({
|
||||
x: 300,
|
||||
y: 80,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
box.value = new Konva.Rect({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
});
|
||||
|
||||
const yellowCircle = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 0,
|
||||
radius: 50,
|
||||
fill: 'yellow',
|
||||
stroke: 'black',
|
||||
});
|
||||
|
||||
const blueCircle = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 0,
|
||||
radius: 50,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
});
|
||||
|
||||
yellowGroup.value.add(yellowCircle);
|
||||
yellowGroup.value.add(box.value);
|
||||
blueGroup.value.add(blueCircle);
|
||||
layer.add(yellowGroup.value);
|
||||
layer.add(blueGroup.value);
|
||||
stage.add(layer);
|
||||
};
|
||||
|
||||
/**
|
||||
* * 移动到蓝色组
|
||||
*/
|
||||
const toBlue = () => {
|
||||
box.value?.moveTo(blueGroup.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* * 移动到黄色
|
||||
*/
|
||||
const toYellow = () => {
|
||||
box.value?.moveTo(yellowGroup.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initial();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<button id="toBlue" class="btn btn-primary" @click="toBlue">Move red box to blue group</button>
|
||||
<button id="toYellow" class="btn btn-warning" @click="toYellow">Move red box to yellow group</button>
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -2,78 +2,49 @@
|
|||
import { useWindowSize } from '@vueuse/core';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import Konva from 'konva/lib';
|
||||
import { Group } from 'konva/lib/Group';
|
||||
import { Rect } from 'konva/lib/shapes/Rect';
|
||||
|
||||
const { width, height } = useWindowSize();
|
||||
const yellowGroup = ref<Group>();
|
||||
const blueGroup = ref<Group>();
|
||||
const box = ref<Rect>();
|
||||
const yellowBox = ref<Rect>();
|
||||
|
||||
const initial = () => {
|
||||
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
yellowGroup.value = new Konva.Group({
|
||||
x: 100,
|
||||
y: 100,
|
||||
draggable: true,
|
||||
});
|
||||
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
|
||||
|
||||
blueGroup.value = new Konva.Group({
|
||||
x: 300,
|
||||
y: 80,
|
||||
draggable: true,
|
||||
});
|
||||
for (let n = 0; n < 6; n++) {
|
||||
(function () {
|
||||
const i = n;
|
||||
const box = new Konva.Rect({
|
||||
x: i * 30 + 210,
|
||||
y: i * 18 + 40,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: colors[i],
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true,
|
||||
name: colors[i],
|
||||
});
|
||||
|
||||
box.value = new Konva.Rect({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
});
|
||||
box.on('mouseover', function () {
|
||||
document.body.style.cursor = 'pointer';
|
||||
});
|
||||
box.on('mouseout', function () {
|
||||
document.body.style.cursor = 'default';
|
||||
});
|
||||
if (colors[i] === 'yellow') {
|
||||
yellowBox.value = box;
|
||||
}
|
||||
layer.add(box);
|
||||
})();
|
||||
}
|
||||
|
||||
const yellowCircle = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 0,
|
||||
radius: 50,
|
||||
fill: 'yellow',
|
||||
stroke: 'black',
|
||||
});
|
||||
|
||||
const blueCircle = new Konva.Circle({
|
||||
x: 0,
|
||||
y: 0,
|
||||
radius: 50,
|
||||
fill: 'blue',
|
||||
stroke: 'black',
|
||||
});
|
||||
|
||||
yellowGroup.value.add(yellowCircle);
|
||||
yellowGroup.value.add(box.value);
|
||||
blueGroup.value.add(blueCircle);
|
||||
layer.add(yellowGroup.value);
|
||||
layer.add(blueGroup.value);
|
||||
stage.add(layer);
|
||||
};
|
||||
|
||||
/**
|
||||
* * 移动到蓝色组
|
||||
*/
|
||||
const toBlue = () => {
|
||||
box.value?.moveTo(blueGroup.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* * 移动到黄色
|
||||
*/
|
||||
const toYellow = () => {
|
||||
box.value?.moveTo(yellowGroup.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initial();
|
||||
});
|
||||
|
|
@ -81,8 +52,13 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<button id="toBlue" class="btn btn-primary" @click="toBlue">Move red box to blue group</button>
|
||||
<button id="toYellow" class="btn btn-warning" @click="toYellow">Move red box to yellow group</button>
|
||||
<div id="buttons">
|
||||
<button id="toTop" class="btn btn-warning" @click="yellowBox?.moveToTop()">Move yellow box to top</button>
|
||||
<button id="toBottom" class="btn btn-outline-info" @click="yellowBox?.moveToBottom()">Move yellow box to bottom</button>
|
||||
<button id="up" class="btn btn-outline-warning" @click="yellowBox?.moveUp()">Move yellow box up</button>
|
||||
<button id="down " class="btn btn-info" @click="yellowBox?.moveDown()">Move yellow box down</button>
|
||||
<button id="zIndex" class="btn btn-primary" @click="yellowBox?.setZIndex(3)">Set yellow box zIndex to 3</button>
|
||||
</div>
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue