
<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>