在项目中需要对
图片进行
图片编辑，但是只涉及到
图片的放大缩放和移动，所以并不想用
插件。
缩放
图片HTML代码
<div
class="current_picture"
id="moveImg"
@click="editHandle"
@mousedown="moveSonPicture"
@mousewheel.prevent="rollImg"
>
<img
src="../../assets/images/shejitu.png"
alt=""
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("mou
SEOut", function() {
moveItem.removeEventListener("mousemove", move);
});
}
},
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
