JavaDemo/konva-demo
JavaDemo
/
konva-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 select新增缩放

This commit is contained in:
bunny 2024-07-25 14:07:47 +08:00
parent 45323c4738
commit 3da5abd979
12 changed files with 396 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/verify.json
View File

@ -1 +1 @@
{"version":1721867671704}
{"version":1721883990967}

7
src/views/select/basic/index.vue
View File

@ -9,7 +9,6 @@ import { Stage } from 'konva/lib/Stage';
import { Layer } from 'konva/lib/Layer';
const { width, height } = useWindowSize();
// let stage, layer;
const stage = ref<Stage>();
const layer = ref<Layer>();
@ -18,13 +17,17 @@ const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
// 平台不存在直接返回
if (!stage.value) return;
// 之前缩放比例
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
// 记录当前鼠标位置
const pointer = stage.value?.getPointerPosition();
// 鼠标在画布的平移量，除以缩放比例得到，鼠标在未缩放时的坐标
const mousePointTo = {
x: (pointer!.x - stage.value?.x()) / scaleX,
y: (pointer!.y - stage.value?.y()) / scaleY,
@ -33,10 +36,12 @@ const zoomed = () => {
// 判断鼠标滚轮向上还是向下
const direction = ev.evt.deltaY > 0 ? -1 : 1;
// 设置新的缩放比例
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
// 设置新的鼠标位置，缩放时保持不变
const position = {
x: pointer!.x - mousePointTo.x * x,
y: pointer!.y - mousePointTo.y * y,

50
src/views/select/keep-ratio/index.vue
View File

@ -1,14 +1,51 @@
<script setup lang="ts">
import { onMounted } from 'vue';
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
// 原始缩放比例
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
// 当前鼠标位置
const pointer = stage.value?.getPointerPosition();
// 鼠标在画布平移量
const mousePointTo = {
x: (pointer!.x - stage.value?.x()) / scaleX,
y: (pointer!.y - stage.value?.y()) / scaleY,
};
// 判断鼠标是向上滚动还是向下滚动
const direction = ev.evt.deltaY > 0 ? -1 : 1;
// 设置新的缩放比例
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
// 设置新的鼠标位置，缩放时保持不变
const position = {
x: pointer!.x - mousePointTo.x * x,
y: pointer!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
stage.value.add(layer);
const text1 = new Konva.Text({
x: 50,
@ -40,7 +77,10 @@ const initial = () => {
keepRatio: false,
enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
});
layer.add(tr2);
zoomed();
};
onMounted(() => {
@ -52,4 +92,4 @@ onMounted(() => {
<div id="container"></div>
</template>
<style scoped lang="scss"></style>
<style lang="scss" scoped></style>

45
src/views/select/resize-limits/index.vue
View File

@ -1,16 +1,51 @@
<script setup lang="ts">
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const MAX_WIDTH = 200;
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
// 原始缩放比例
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
// 当前鼠标坐标
const pointerPosition = stage.value?.getPointerPosition();
// 鼠标移动位置
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
// 设置新的缩放比例
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
// 画布缩放保持位置不变
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
stage.value.add(layer);
zoomed();
const rect = new Konva.Rect({
x: 160,
y: 60,

56
src/views/select/resize-snaps/index.vue
View File

@ -1,25 +1,57 @@
<script setup lang="ts">
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
// 原始缩放比例
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
// 当前鼠标位置
const pointerPosition = stage.value?.getPointerPosition();
const mousePointTO = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
// 设置新的缩放比例
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
// 设置鼠标移动划不动
const position = {
x: pointerPosition!.x - mousePointTO.x * x,
y: pointerPosition!.y - mousePointTO.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
const xSnaps = Math.round(stage.width() / 100);
const ySnaps = Math.round(stage.height() / 100);
const cellWidth = stage.width() / xSnaps;
const cellHeight = stage.height() / ySnaps;
stage.value.add(layer);
zoomed();
const xSnaps = Math.round(stage.value.width() / 100);
const ySnaps = Math.round(stage.value.height() / 100);
const cellWidth = stage.value.width() / xSnaps;
const cellHeight = stage.value.height() / ySnaps;
for (let i = 0; i < xSnaps; i++) {
layer.add(
new Konva.Line({
x: i * cellWidth,
points: [0, 0, 0, stage.height()],
points: [0, 0, 0, stage.value.height()],
stroke: '#96e04d',
strokeWidth: 1,
}),
@ -31,7 +63,7 @@ const initial = () => {
new Konva.Line({
y: i * cellHeight,
// points: [0, 0, stage.width(), 0],
points: [0, 0, stage.width(), 0],
points: [0, 0, stage.value.width(), 0],
stroke: '#96e04d',
strokeWidth: 1,
}),
@ -111,4 +143,4 @@ onMounted(() => {
<div id="container"></div>
</template>
<style scoped lang="scss"></style>
<style lang="scss" scoped></style>

39
src/views/select/rotation-snaps/index.vue
View File

@ -1,15 +1,44 @@
<script setup lang="ts">
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
const pointerPosition = stage.value?.getPointerPosition();
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
stage.value.add(layer);
zoomed();
const text = new Konva.Text({ x: 50, y: 70, fontSize: 30, text: '旋转', draggable: true });
layer.add(text);

42
src/views/select/simultaneously/index.vue
View File

@ -1,16 +1,46 @@
<script setup lang="ts">
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
const pointerPosition = stage.value?.getPointerPosition();
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
stage.value.add(layer);
zoomed();
const text1 = new Konva.Text({
x: 50,
y: 70,
@ -51,4 +81,4 @@ onMounted(() => {
<div id="container"></div>
</template>
<style scoped lang="scss"></style>
<style lang="scss" scoped></style>

44
src/views/select/stop-transform/index.vue
View File

@ -1,14 +1,50 @@
<script setup lang="ts">
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
// 原始缩放比例
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
// 当前鼠标坐标
const pointerPosition = stage.value?.getPointerPosition();
// 鼠标移动位置
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
// 设置新的缩放比例
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
// 画布缩放保持位置不变
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
stage.value.add(layer);
zoomed();
const rect = new Konva.Rect({
x: 100,

50
src/views/select/styling/index.vue
View File

@ -1,15 +1,51 @@
<script setup lang="ts">
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
// 原始缩放比例
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
// 当前鼠标坐标
const pointerPosition = stage.value?.getPointerPosition();
// 鼠标移动位置
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
// 设置新的缩放比例
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
// 画布缩放保持位置不变
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.value.add(layer);
zoomed();
const circle = new Konva.Circle({
x: 150,
y: 150,
@ -40,4 +76,4 @@ onMounted(() => {
<div id="container"></div>
</template>
<style scoped lang="scss"></style>
<style lang="scss" scoped></style>

43
src/views/select/text-resizing/index.vue
View File

@ -1,16 +1,47 @@
<script setup lang="ts">
import { onMounted } from 'vue';
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { useWindowSize } from '@vueuse/core';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const MIN_WIDTH = 100;
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
const pointerPosition = stage.value?.getPointerPosition();
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.value.add(layer);
zoomed();
const text = new Konva.Text({
x: 50,
y: 60,

39
src/views/select/transform/index.vue
View File

@ -2,18 +2,49 @@
<div id="container"></div>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import Konva from 'konva/lib';
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import { Stage } from 'konva/lib/Stage';
const { width, height } = useWindowSize();
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
const pointerPosition = stage.value?.getPointerPosition();
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
const layer = new Konva.Layer();
stage.add(layer);
stage.value.add(layer);
zoomed();
// 绘制形状
const rect = new Konva.Rect({

40
src/views/shapes/image/index.vue
View File

@ -2,21 +2,51 @@
<div id="container"></div>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { Layer } from 'konva/lib/Layer';
import { Image as KonvaImage } from 'konva/lib/shapes/Image';
import { Stage } from 'konva/lib/Stage';
import { nextTick, onMounted } from 'vue';
import { nextTick, onMounted, ref } from 'vue';
const stage = ref<Stage>();
const SCALE_BY = 1.1;
const zoomed = () => {
stage.value?.on('wheel', ev => {
if (!stage.value) return;
const scaleX = stage.value?.scaleX();
const scaleY = stage.value?.scaleY();
const pointerPosition = stage.value?.getPointerPosition();
const mousePointTo = {
x: (pointerPosition!.x - stage.value?.x()) / scaleX,
y: (pointerPosition!.y - stage.value?.y()) / scaleY,
};
const direction = ev.evt.deltaY > 0 ? -1 : 1;
const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
stage.value?.scale({ x, y });
const position = {
x: pointerPosition!.x - mousePointTo.x * x,
y: pointerPosition!.y - mousePointTo.y * y,
};
stage.value?.position(position);
});
};
const initial = () => {
const stage = new Stage({
stage.value = new Stage({
container: 'container',
width: 500,
height: 500,
draggable: true,
});
const layer = new Layer({ draggable: true });
zoomed();
const imageObj = new Image();
const konvaImage = new KonvaImage({
x: 50,
@ -40,7 +70,7 @@ const initial = () => {
layer.add(darthNode);
});
stage.add(layer);
stage.value.add(layer);
};
onMounted(() => {