平铺组件

src/component/Canvas/pingpu.vue

@@ -3,32 +3,154 @@
 </template>
 
 <script setup>
-	import {
-		defineComponent,
-		ref,
-		reactive,
-		nextTick,
-		toRefs,
-		inject,
-		watch,
-		computed,
-	} from "vue";
+	import { fabric } from "fabric-with-all";
+	import { ref, watch, onMounted } from "vue";
 	const props = defineProps({
 		url: { type: String, required: true },
-		positionX: { type: Number, default: 0 },// px
-		positionY: { type: Number, default: 0 },// px
-		angle: { type: Number, default: 0 },// 角度
-		size: { type: Number, default: 100 },// %
-		gapX: { type: Number, default: 0 },// px
-		gapY: { type: Number, default: 0 },// px
+		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
 	});
-	console.log("==========", props);
+	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%;
-		background-color: #f00;
 	}
 </style>