添加画板

package.json

@@ -62,6 +62,7 @@
     "deploy-cli-service": "^1.2.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "fabric": "^5.0.0",
     "glslify": "^7.1.1",
     "handtrackjs": "^0.1.5",
     "jsmpeg": "^1.0.0",

src/components/ar/hit.vue

@@ -39,6 +39,16 @@ export default {
 	},
 	created() {},
 	mounted() {
+		if (window.deviceInfo.system == "IOS") {
+			alert("您当前系统不支持该AR特性");
+			this.$router.replace({
+				name: "Home",
+				params: {},
+			});
+			return false;
+		} else if (window.deviceInfo.app == "WX") {
+			alert("您当前浏览器不支持,请在大于v81版chrome浏览器中打开预览");
+		}
 		this.initStage();
 
 		// 循环动画

src/components/ar/index.vue

@@ -36,6 +36,16 @@ export default {
 	},
 	created() {},
 	mounted() {
+		if (window.deviceInfo.system == "IOS") {
+			alert("您当前系统不支持该AR特性");
+			this.$router.replace({
+				name: "Home",
+				params: {},
+			});
+			return false;
+		} else if (window.deviceInfo.app == "WX") {
+			alert("您当前浏览器不支持,请在大于v81版chrome浏览器中打开预览");
+		}
 		this.initStage();
 		// 循环动画
 		this.animate();

src/page/index/Drawing/index.vue

@@ -0,0 +1,100 @@
+
+<template>
+	<div class="drawing">
+		<canvas id="canvas" ref="canvas"></canvas>
+
+		<button id="add" class="add" @click="Add">Add</button>
+	</div>
+</template>
+<script>
+// @ is an alias to /src
+import { fabric } from "fabric";
+export default {
+	name: "Curve",
+	components: {},
+	data() {
+		return {
+			deleteIcon:
+				"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E",
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			fabric.Object.prototype.transparentCorners = false;
+			fabric.Object.prototype.cornerColor = "rgba(90,175,119,0.75)";
+			fabric.Object.prototype.cornerStyle = "circle";
+
+			var img = document.createElement("img");
+			img.src = this.deleteIcon;
+			// create fabric canvas
+			this.$refs.canvas.width = window.innerWidth;
+			this.$refs.canvas.height = window.innerHeight;
+			var canvas = (this.canvas = new fabric.Canvas("canvas"));
+
+			this.Add();
+
+			function deleteObject(eventData, transform) {
+				var target = transform.target;
+				var canvas = target.canvas;
+				canvas.remove(target);
+				canvas.requestRenderAll();
+			}
+
+			function renderIcon(ctx, left, top, styleOverride, fabricObject) {
+				var size = this.cornerSize;
+				ctx.save();
+				ctx.translate(left, top);
+				ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+				ctx.drawImage(img, -size / 2, -size / 2, size, size);
+				ctx.restore();
+			}
+
+			// 添加自定义控制
+			fabric.Object.prototype.controls.deleteControl = new fabric.Control(
+				{
+					x: 0.5,
+					y: -0.5,
+					offsetY: 16,
+					cursorStyle: "pointer",
+					mouseUpHandler: deleteObject,
+					render: renderIcon,
+					cornerSize: 24,
+				}
+			);
+		},
+		Add() {
+			let rect = new fabric.Rect({
+				left: 100,
+				top: 50,
+				fill: "yellow",
+				width: 200,
+				height: 100,
+				objectCaching: false,
+				stroke: "lightgreen",
+				strokeWidth: 4,
+			});
+
+			this.canvas.add(rect);
+			this.canvas.setActiveObject(rect);
+		},
+	},
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.drawing {
+	.prLayout(100%,100%);
+	overflow: hidden;
+	color: #fff;
+	background-color: #cda2bf;
+	.add {
+		.paCenterBottom(30px,100px,100px,10);
+		border-radius: 50%;
+		background: #cda2bf;
+		box-shadow: 20px 20px 60px #ae8aa2, -20px -20px 60px #ecbadc;
+	}
+}
+</style>

src/page/index/Home/index.vue

@@ -8,7 +8,7 @@
 -->
 <template>
 	<div class="home">
-		<Shader class="shader"></Shader>
+		<!-- <Shader class="shader"></Shader> -->
 		<div class="overlay"></div>
 		<div
 			class="page grid js_show dialog"
@@ -45,12 +45,12 @@
 <script>
 // @ is an alias to /src
 import { gsap } from "gsap";
-import Shader from "@/components/shader/index.vue";
+// import Shader from "@/components/shader/index.vue";
 
 export default {
 	name: "Index",
 	components: {
-		Shader,
+		// Shader,
 	},
 	data() {
 		return {
@@ -98,6 +98,12 @@ export default {
 					name: "三维文字曲线运动",
 					active: false,
 				},
+				{
+					fontIconCode: "&#xe606;",
+					target: "Drawing",
+					name: "画板",
+					active: false,
+				},
 			],
 		};
 	},

src/page/index/router/index.js

@@ -16,6 +16,7 @@ import Camera from '../Camera/index.vue'
 import HandTrack from '../HandTrack/index.vue'
 import Video from '../Video/index.vue'
 import Curve from '../modifier_curve/index.vue'
+import Drawing from '../Drawing/index.vue'
 
 
 
@@ -103,7 +104,15 @@ const routes = [
 			keepAlive: false, // 是否保持活跃
 		},
 	},
-
+	{
+		path: "/drawing",
+		name: "Drawing",
+		component: Drawing,
+		meta: {
+			title: "Drawing Board", // 标题
+			keepAlive: false, // 是否保持活跃
+		},
+	},
 
 	// {
 	//   path: "/example",