realty/virgo.wzfrontend/console/src/views/common/ui.vue

<template>
	<div id="fabricContainer" class="fabric-container">
		<div id="canvas-container">
			<canvas id="myCanvas"></canvas>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				boxWidth: 100,
				boxHeight: 100,
				canvas: null,
				position: [],
				backgroundImageUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/01a0120395b249ecbae565600f2fb3ce'
			}
		},
		beforeDestroy() {
			let _self = this;
			window.removeEventListener('resize', function() {
				_self.initResize();
			});
		},
		mounted() {
			let _self = this;

			_self.init();
			// 监听窗口大小变化
			window.addEventListener('resize', function() {
				_self.initResize();
			});
		},
		methods: {
			init() {
				let box = document.getElementById('fabricContainer');
				if (!box) return;
				let boxWidth = box.offsetWidth,
					boxHeight = box.offsetHeight;
				let imgObj = new Image();
				imgObj.src = this.backgroundImageUrl;
				imgObj.onload = () => {
					let imgWidth = imgObj.width,
						imgHeight = imgObj.height;
					let scale = imgWidth / imgHeight;
					let canvasWidth = boxWidth >= boxHeight ? boxHeight * scale : boxWidth,
						canvasHeight = boxWidth < boxHeight ? boxWidth / scale : boxHeight;
					this.canvas = new fabric.Canvas('myCanvas', {
						fireRightClick: true, // 启用右键，button的数字为3
						stopContextMenu: true, // 禁止默认右键菜单
						controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
						preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
						width: canvasWidth, // 设置画布宽度
						height: canvasHeight, // 设置画布高度
					});
					document.getElementById('canvas-container').style.width = canvasWidth;
					document.getElementById('canvas-container').style.hight = canvasWidth;
					this.initBackgroundImage();
					this.clickFunction();

				}
			},
			initResize() {
				let box = document.getElementById('fabricContainer');
				if (!box) return;
				let boxWidth = box.offsetWidth,
					container = document.getElementById('myCanvas').offsetWidth;
				let scale = boxWidth / container >= 1 ? 1 : boxWidth / container;
				document.getElementById('canvas-container').style.transform = 'scale(' + scale + ')';
			},
			clickFunction() {
				let _self = this;
				// 监听点击事件
				_self.canvas.on('mouse:down', function(options) {
					console.log(options);
					// // 获取点击位置的坐标
					// const pointer = _self.canvas.getPointer(options.e);
					// const x = pointer.x;
					// const y = pointer.y;
					// _self.position.push({
					// 	x: x,
					// 	y: y
					// })
					// console.log(_self.position);

					// // 在点击位置添加一个圆形标记
					// const circle = new fabric.Circle({
					// 	radius: 5,
					// 	fill: 'red',
					// 	left: x,
					// 	top: y,
					// 	selectable: false // 禁止选中
					// });
					// _self.canvas.add(circle);
					// _self.canvas.renderAll();
				});
			},
			initBackgroundImage() {
				let _self = this;
				let bg = 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/01a0120395b249ecbae565600f2fb3ce'
				fabric.Image.fromURL(bg, function(img) {
					// 获取画布的宽度和高度
					const canvasWidth = _self.canvas.getWidth();
					const canvasHeight = _self.canvas.getHeight();
					// 计算图片的缩放比例
					const scaleX = canvasWidth / img.width;
					const scaleY = canvasHeight / img.height;
					const scale = scaleX < scaleY ? scaleX : scaleY;
					// 设置图片的缩放比例
					img.scale(scale);
					img.set({
						left: 0,
						top: 0,
						selectable: false
					})
					_self.canvas.add(img);
					_self.addPolygon();
				});
			},
			addPolygon() {
				const starPoints = [{
					"x": 705,
					"y": 213
				}, {
					"x": 855,
					"y": 216
				}, {
					"x": 855,
					"y": 354
				}, {
					"x": 705,
					"y": 354
				}];
				const star = new fabric.Polygon(starPoints, {
					fill: 'rgba(113, 179, 255, 0.6)',
					stroke: 'rgba(113, 179, 255, 1.0)',
					strokeWidth: 1,
					selectable: false,
					id:1
				});
				star.on('click', function(e) {
					console.log(e);
				});
				this.canvas.add(star);
				this.canvas.renderAll();
			}
		}
	}
</script>

<style lang="scss">
	.fabric-container {
		width: 100%;
		height: 100%;
		overflow: hidden;

		#canvas-container {
			transform-origin: 0% 0%;
		}
	}
</style>