111
This commit is contained in:
李志鹏
@@ -1,156 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="pingpu" ref="el"><canvas ref="canvasRef"></canvas></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { fabric } from "fabric-with-all";
|
|
||||||
import { ref, watch, onMounted } from "vue";
|
|
||||||
const props = defineProps({
|
|
||||||
url: { type: String, required: true },
|
|
||||||
offsetX: { type: Number, default: 0 }, // px
|
|
||||||
offsetY: { type: Number, default: 0 }, // px
|
|
||||||
angle: { type: Number, default: 0 }, // 角度
|
|
||||||
scale: { type: Number, default: 100 }, // %
|
|
||||||
gapX: { type: Number, default: 0 }, // px
|
|
||||||
gapY: { type: Number, default: 0 }, // px
|
|
||||||
});
|
|
||||||
watch(
|
|
||||||
() => props.url,
|
|
||||||
() => getOriginalImage()
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => [
|
|
||||||
props.offsetX,
|
|
||||||
props.offsetY,
|
|
||||||
props.angle,
|
|
||||||
props.scale,
|
|
||||||
props.gapX,
|
|
||||||
props.gapY,
|
|
||||||
],
|
|
||||||
() => setCanvasData()
|
|
||||||
);
|
|
||||||
const el = ref(null);
|
|
||||||
const canvasRef = ref(null);
|
|
||||||
const canvas = ref(null);
|
|
||||||
const observer = ref(null);
|
|
||||||
const id = "asfs123121sfe";
|
|
||||||
onMounted(async () => {
|
|
||||||
initCanvas();
|
|
||||||
await getOriginalImage();
|
|
||||||
setCanvasData();
|
|
||||||
let throttleTimeout = null;
|
|
||||||
let lastRunTime = 0;
|
|
||||||
let trailingTimeout = null;
|
|
||||||
observer.value = new ResizeObserver((entries) => {
|
|
||||||
const now = Date.now();
|
|
||||||
const throttleDelay = 100;
|
|
||||||
if (!throttleTimeout) {
|
|
||||||
updateCanvasSize();
|
|
||||||
lastRunTime = now;
|
|
||||||
throttleTimeout = setTimeout(() => {
|
|
||||||
throttleTimeout = null;
|
|
||||||
}, throttleDelay);
|
|
||||||
} else {
|
|
||||||
clearTimeout(trailingTimeout);
|
|
||||||
trailingTimeout = setTimeout(() => {
|
|
||||||
updateCanvasSize();
|
|
||||||
lastRunTime = Date.now();
|
|
||||||
}, throttleDelay);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
observer.value.observe(el.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
observer.value.disconnect();
|
|
||||||
});
|
|
||||||
const initCanvas = () => {
|
|
||||||
canvas.value = new fabric.Canvas(canvasRef.value, {
|
|
||||||
selection: false,
|
|
||||||
evented: false,
|
|
||||||
});
|
|
||||||
canvas.value.setWidth(el.value.offsetWidth);
|
|
||||||
canvas.value.setHeight(el.value.offsetHeight);
|
|
||||||
};
|
|
||||||
const updateCanvasSize = () => {
|
|
||||||
canvas.value.setWidth(el.value.offsetWidth);
|
|
||||||
canvas.value.setHeight(el.value.offsetHeight);
|
|
||||||
setCanvasData();
|
|
||||||
};
|
|
||||||
const originalImage = ref(null);
|
|
||||||
const getOriginalImage = () => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
fabric.Image.fromURL(
|
|
||||||
props.url,
|
|
||||||
(object) => {
|
|
||||||
const imgElement = object.getElement();
|
|
||||||
// 创建透明 Canvas
|
|
||||||
const tcanvas = document.createElement("canvas");
|
|
||||||
tcanvas.width = imgElement.width;
|
|
||||||
tcanvas.height = imgElement.height;
|
|
||||||
const ctx = tcanvas.getContext("2d");
|
|
||||||
ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
|
|
||||||
ctx.drawImage(imgElement, 0, 0);
|
|
||||||
originalImage.value = tcanvas;
|
|
||||||
resolve(tcanvas);
|
|
||||||
},
|
|
||||||
{ crossOrigin: "anonymous" }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const setCanvasData = () => {
|
|
||||||
canvas.value.getObjects().forEach((obj) => {
|
|
||||||
if (obj.id === id) canvas.value.remove(obj);
|
|
||||||
});
|
|
||||||
const image = originalImage.value;
|
|
||||||
const cwidth = canvas.value.width;
|
|
||||||
const cheight = canvas.value.height;
|
|
||||||
const offsetX = props.offsetX;
|
|
||||||
const offsetY = props.offsetY;
|
|
||||||
const scaleX = ((cwidth / image.width) * (props.scale / 100)) / 5;
|
|
||||||
const scaleY = ((cheight / image.height) * (props.scale / 100)) / 5;
|
|
||||||
const scale = cwidth > cheight ? scaleX : scaleY;
|
|
||||||
const angle = props.angle;
|
|
||||||
const gapX = props.gapX;
|
|
||||||
const gapY = props.gapY;
|
|
||||||
const patternTransform = fabric.util.composeMatrix({
|
|
||||||
scaleX: scale,
|
|
||||||
scaleY: scale,
|
|
||||||
angle: angle,
|
|
||||||
});
|
|
||||||
// 创建透明 Canvas
|
|
||||||
const tcanvas = document.createElement("canvas");
|
|
||||||
tcanvas.width = image.width + gapX;
|
|
||||||
tcanvas.height = image.height + gapY;
|
|
||||||
const ctx = tcanvas.getContext("2d");
|
|
||||||
ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
|
|
||||||
ctx.drawImage(image, 0, 0);
|
|
||||||
const pattern = new fabric.Pattern({
|
|
||||||
source: tcanvas,
|
|
||||||
repeat: "repeat",
|
|
||||||
patternTransform,
|
|
||||||
offsetX, // 水平偏移
|
|
||||||
offsetY, // 垂直偏移
|
|
||||||
});
|
|
||||||
const rect = new fabric.Rect({
|
|
||||||
id,
|
|
||||||
width: cwidth,
|
|
||||||
height: cheight,
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
// scaleX: 1,
|
|
||||||
// scaleY: 1,
|
|
||||||
fill: pattern,
|
|
||||||
// evented: false,
|
|
||||||
// selectable: false,
|
|
||||||
});
|
|
||||||
canvas.value.add(rect);
|
|
||||||
canvas.value.renderAll();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='less' scoped>
|
|
||||||
.pingpu {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="test">
|
|
||||||
<!-- <div class="control" v-for="(item, index) in list" :key="index">
|
|
||||||
<div>
|
|
||||||
<span>偏移X</span>
|
|
||||||
<input type="number" v-model="item.offsetX" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>偏移Y</span>
|
|
||||||
<input type="number" v-model="item.offsetY" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>角度</span>
|
|
||||||
<input type="number" v-model="item.angle" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>缩放</span>
|
|
||||||
<input type="number" v-model="item.scale" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>水平间距</span>
|
|
||||||
<input type="number" v-model="item.gapX" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>垂直间距</span>
|
|
||||||
<input type="number" v-model="item.gapY" />
|
|
||||||
</div>
|
|
||||||
<h2>---------整体--------</h2>
|
|
||||||
<div>
|
|
||||||
<span>缩放</span>
|
|
||||||
<input type="number" v-model="item.object.scale" step="0.1" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>X</span>
|
|
||||||
<input type="number" v-model="item.object.left" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>Y</span>
|
|
||||||
<input type="number" v-model="item.object.top" />
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="box">
|
|
||||||
<pingpu :list="list" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import pingpu from "./pingpu.vue";
|
|
||||||
const list = ref([
|
|
||||||
{
|
|
||||||
ifSingle: false,
|
|
||||||
level2Type: "Pattern",
|
|
||||||
designType: "Library",
|
|
||||||
path: "/src/assets/images/canvas/yinhua1.jpg",
|
|
||||||
location: [0, 0],
|
|
||||||
scale: [1, 1],
|
|
||||||
angle: 0,
|
|
||||||
name: "Print2",
|
|
||||||
priority: 1,
|
|
||||||
object: {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
scaleX: 1,
|
|
||||||
scaleY: 1,
|
|
||||||
opacity: 1,
|
|
||||||
angle: 0,
|
|
||||||
flipX: false,
|
|
||||||
flipY: false,
|
|
||||||
blendMode: "multiply",
|
|
||||||
gapX: 0,
|
|
||||||
gapY: 0,
|
|
||||||
},
|
|
||||||
gap: [0, 0],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='less' scoped>
|
|
||||||
.test {
|
|
||||||
> .control {
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
> span {
|
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
> input {
|
|
||||||
padding-left: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .box {
|
|
||||||
width: 300px;
|
|
||||||
height: 500px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user