|
@@ -9,6 +9,16 @@ const props = defineProps({
|
|
|
});
|
|
|
|
|
|
const zoom = ref(0.05)
|
|
|
+const current = ref(0);
|
|
|
+const width = ref(220);
|
|
|
+
|
|
|
+const rateimg = () => {
|
|
|
+ current.value = (current.value+90)%360;
|
|
|
+ document.getElementById("scream").style.transform = `rotate(${current.value}deg)`;
|
|
|
+ var c=document.getElementById("myCanvas");
|
|
|
+ var ctx=c.getContext("2d");
|
|
|
+ c.style.transform = `rotate(${current.value}deg)`;
|
|
|
+}
|
|
|
|
|
|
onMounted(()=>{
|
|
|
var c=document.getElementById("myCanvas");
|
|
@@ -17,15 +27,20 @@ onMounted(()=>{
|
|
|
var img1=document.getElementById("scream2");
|
|
|
img1.onload = () => {
|
|
|
img.style.width=220;
|
|
|
- img.style.height=img1.height*(img.style.width/img1.style.width);
|
|
|
+ img.style.height=img1.height*(220/img1.width);
|
|
|
+ width.value= 220> img1.height*(220/img1.width)?220:img1.height*(220/img1.width);
|
|
|
+ console.log(width.value)
|
|
|
};
|
|
|
img.addEventListener("mousemove", (e)=>{
|
|
|
// let zoom = 0.05;//相对原图的放大倍数
|
|
|
//计算放大后的位置 %
|
|
|
+
|
|
|
let x= e.offsetX/img.width;
|
|
|
let y= e.offsetY/img.height;
|
|
|
+
|
|
|
ctx.clearRect(0, 0, c.width, c.height);
|
|
|
ctx.drawImage(img,img1.width*x-img1.width*zoom.value/2,img1.height*y-img1.width*zoom.value/2,img1.width*zoom.value,img1.width*zoom.value,0,0,c.width, c.height);
|
|
|
+
|
|
|
})
|
|
|
})
|
|
|
|
|
@@ -34,19 +49,28 @@ onMounted(()=>{
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="product-image">
|
|
|
- <div style="display:flex;flex-direction: column;width: 220px">
|
|
|
- <img id="scream" :src="props.src" width="220" />
|
|
|
+ <div :style="`display:flex;flex-direction: column;width: ${width}px;`">
|
|
|
+
|
|
|
<div>
|
|
|
<div>
|
|
|
- <el-descriptions title="设置">
|
|
|
- <el-descriptions-item label="放大倍数"> <el-input v-model="zoom" placeholder="请输入放大倍数" type="number" /></el-descriptions-item>
|
|
|
+ <el-descriptions title="设置" direction="vertical" :column="1">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <el-button type="primary" @click="rateimg">旋转</el-button>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="放大倍数">
|
|
|
+ <el-select v-model="zoom" placeholder="请选择放大倍数">
|
|
|
+ <el-option v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,30]" :value="1/item" :label="item" ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
</el-descriptions>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <img id="scream" :src="props.src" width="220" />
|
|
|
</div>
|
|
|
|
|
|
<img id="scream2" :src="props.src" style="display: none;"/>
|
|
|
- <canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;margin-left: 10px">
|
|
|
+ <canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;margin-left: 15px">
|
|
|
您的浏览器不支持 HTML5 canvas 标签。</canvas>
|
|
|
</div>
|
|
|
</template>
|