|
|
@@ -0,0 +1,142 @@
|
|
|
+<template>
|
|
|
+ <Viewer :options="viewerOptions">
|
|
|
+ <img :src="imageUrl" alt="Your Image">
|
|
|
+ </Viewer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Viewer from 'v-viewer';
|
|
|
+ export default {
|
|
|
+ name: "CanvasPreview",
|
|
|
+ props:{
|
|
|
+ clientWidth: {
|
|
|
+ default: 370,
|
|
|
+ type: Number
|
|
|
+ },
|
|
|
+ clientHeight: {
|
|
|
+ default: 567,
|
|
|
+ type: Number
|
|
|
+ },
|
|
|
+ imageUrl:{
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ 'v-viewer':Viewer,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ viewerOptions: {
|
|
|
+ zIndex: 9999,
|
|
|
+ zoomRatio: 0.1, // 缩放比例
|
|
|
+ zoomable: true, //是否可缩放
|
|
|
+ movable: true, // 是否限制移动范围
|
|
|
+ // 其他选项...
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.canvas = this.$refs.canvas;
|
|
|
+ // this.canvas.style.position = 'relative';
|
|
|
+ // this.canvas.style.cursor = 'move';
|
|
|
+ // this.initCanvas();
|
|
|
+ // // 添加鼠标事件监听
|
|
|
+ // this.$refs.canvas.addEventListener('mousedown', this.startDragging);
|
|
|
+ // this.$refs.canvas.addEventListener('mousemove', this.drag);
|
|
|
+ // this.$refs.canvas.addEventListener('mouseup', this.stopDragging);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dragImg(event){
|
|
|
+ const element = event.target; // 获取被拖拽的元素
|
|
|
+ const rect = element.getBoundingClientRect(); // 获取元素的矩形区域
|
|
|
+ const dx = event.clientX - rect.left; // 计算鼠标在元素内部的偏移量
|
|
|
+ const dy = event.clientY - rect.top;
|
|
|
+ const canvasRect = this.$refs.canvas.getBoundingClientRect(); // 获取画布的矩形区域
|
|
|
+
|
|
|
+ // 计算元素的新位置
|
|
|
+ let newX = event.clientX - dx;
|
|
|
+ let newY = event.clientY - dy;
|
|
|
+
|
|
|
+ // 确保元素在画布区域内
|
|
|
+ if (newX < 0) {
|
|
|
+ newX = 0;
|
|
|
+ } else if (newX + rect.width > canvasRect.width) {
|
|
|
+ newX = canvasRect.width - rect.width;
|
|
|
+ }
|
|
|
+ if (newY < 0) {
|
|
|
+ newY = 0;
|
|
|
+ } else if (newY + rect.height > canvasRect.height) {
|
|
|
+ newY = canvasRect.height - rect.height;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新元素的位置
|
|
|
+ element.style.left = newX + 'px';
|
|
|
+ element.style.top = newY + 'px';
|
|
|
+ },
|
|
|
+ initCanvas() {
|
|
|
+ const ctx = this.canvas.getContext('2d');
|
|
|
+ const image = new Image();
|
|
|
+ image.src = this.imageUrl;
|
|
|
+ image.onload = () => {
|
|
|
+ if(image.complete){
|
|
|
+ // ctx.save(); // 保存当前画布状态
|
|
|
+
|
|
|
+ // 根据图像重新设定了canvas的长宽
|
|
|
+ this.canvas.setAttribute("width", this.clientWidth)
|
|
|
+ this.canvas.setAttribute("height", this.clientHeight)
|
|
|
+ // 绘制图片
|
|
|
+ ctx.drawImage(image,0,0,this.clientWidth,this.clientHeight);
|
|
|
+ // ctx.rotate(this.angle / 2); // 旋转画布
|
|
|
+ // ctx.restore(); // 恢复画布状态
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 旋转图片
|
|
|
+ rotate() {
|
|
|
+ this.angle += Math.PI; // 每次旋转90度，可以根据需求调整角度
|
|
|
+ this.initCanvas(); // 重新绘制图片
|
|
|
+ },
|
|
|
+ // 开始拖动图片
|
|
|
+ startDragging(event) {
|
|
|
+ this.dragging = true;
|
|
|
+ this.lastX = event.clientX;
|
|
|
+ this.lastY = event.clientY;
|
|
|
+ },
|
|
|
+ // 拖动图片
|
|
|
+ drag(event) {
|
|
|
+ if (this.dragging) {
|
|
|
+ const dx = event.clientX - this.lastX;
|
|
|
+ const dy = event.clientY - this.lastY;
|
|
|
+ this.moveImage(dx, dy);
|
|
|
+ this.lastX = event.clientX;
|
|
|
+ this.lastY = event.clientY;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 停止拖动图片
|
|
|
+ stopDragging() {
|
|
|
+ this.dragging = false;
|
|
|
+ },
|
|
|
+ // 移动图片
|
|
|
+ moveImage(dx, dy) {
|
|
|
+ this.x += dx;
|
|
|
+ this.y += dy;
|
|
|
+ this.initCanvas(); // 重新绘制图片
|
|
|
+ },
|
|
|
+ // 缩放图片
|
|
|
+ scaleImage(scale) {
|
|
|
+ this.scaleX *= scale;
|
|
|
+ this.scaleY *= scale;
|
|
|
+ this.initCanvas(); // 重新绘制图片
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+
|
|
|
+ #myCanvas {
|
|
|
+ border: 1px solid rgb(199, 198, 198);
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
