标签：编辑 sse targe htm on() ref 放大 缩放 dde
在项目中需要对图片进行图片编辑，但是只涉及到图片的放大缩放和移动，所以并不想用插件。
缩放图片html代码
<div
class="current_picture"
id="moveImg"
@click="editHandle"
@mousedown="moveSonPicture"
@mousewheel.prevent="rollImg"
>
<img
src="../../assets/images/shejitu.png"
class="img"
ref="imgDiv"
id="moveItem"
:draggable="currentEditImg.draggable"
@mousedown="movePicture"
:style="{
cursor: currentEditImg.draggable ? ‘move‘ : ‘default‘
}"
/>
<!-- 图片标记 -->
<rectangleMarker
ref="imgDiv"
id="moveItem"
:imgUrl="currentEditImg.url"
></rectangleMarker>
</div>
缩放JS代码
rollImg() {
if (this.currentEditImg.draggable) {
var zoom = parseInt(this.$refs.backImg.style.zoom) || 100;
zoom += event.wheelDelta / 12;
if (zoom >= 10 && zoom < 500) {
this.$refs.backImg.style.zoom = zoom + "%";
}
return false;
}
},
移动图片HTML代码
//移动图片
movePicture(e) {
console.log(e.target.draggable);
if (e.target.draggable) {
e.preventDefault();
// 获取元素
var moveItem = document.getElementById("moveImg");
var img = document.getElementById("moveItem");
var x = e.pageX - img.offsetLeft;
var y = e.pageY - img.offsetTop;
// 添加鼠标移动事件
moveItem.addEventListener("mousemove", move);
function move(e) {
img.style.left = e.pageX - x + "px";
img.style.top = e.pageY - y + "px";
}
// 添加鼠标抬起事件，鼠标抬起，将事件移除
img.addEventListener("mouseup", function() {
moveItem.removeEventListener("mousemove", move);
});
// 鼠标离开父级元素，把事件移除
moveItem.addEventListener("mouseout", function() {
moveItem.removeEventListener("mousemove", move);
});
}
},
electron+vue项目 图片滚动缩放和移动
标签：编辑 sse targe htm on() ref 放大 缩放 dde
原文地址：https://www.cnblogs.com/mr-xiao0/p/14167692.html
