拖拽
var offX = 0,
offY = 0;
onMouseDown(ev) {
var svgId = document.getElementById("svgId");
svgId.style.cursor = "move";
ev.preventDefault(); //阻止浏览器动作,有些浏览器试图拖拽图片的时候,是会把图片单独到一个页
//面来查看的。
var oevent = ev || event; //兼容性处理 firefox/google
var distanceX = oevent.clientX; //记录鼠标点击x位置
var distanceY = oevent.clientY; //记录鼠标点击y位置
document.onmousemove = function (ev) {
var oevent = ev || event;
var x1 = oevent.clientX - distanceX; //oevent.clientX是鼠标移动到的x位置, oevent.clientX-distanceX是移动的距离
var y1 = oevent.clientY - distanceY;
distanceX = oevent.clientX; //更新distanceX的位置信息。
distanceY = oevent.clientY;
svgId.style.marginLeft = x1 + offX + "px"; //若x1为正,则鼠标向右移动,设置图片的margin-left为正,向右偏移;为负同理向左偏移。
svgId.style.marginTop = y1 + offY + "px";
//offX和offY为前一次的偏移,本次移动是在前一次的基础上发生的,
//要加上偏移值才是鼠标本次移动后图片的位置。
offX = x1 + offX; //记录此时图片的偏移位置
offY = y1 + offY;
};
document.onmouseup = function () {
svgId.style.cursor = "default";
document.onmousemove = null;
};
},
滚轮放大缩小
onMouseWheel(ev) {
var svgId = document.getElementById("svgId");
var down = true; // 定义一个标志,当滚轮向下滚时,执行一些操作
down = ev.wheelDelta < 0 || ev.detail > 0 ? true : false;
if (down) {
if (this.scal >= 2) {
this.scal = 2;
svgId.style.transform = "scale(" + this.scal + ")";
//svgId.style.transformOrigin = "0 0";
return;
} else {
this.scal += 0.1;
//console.log("放大系数: " + this.scal);
if (this.scal <= 2 && this.scal >= 0.3)
svgId.style.transform = "scale(" + this.scal + ")"; //scale()在这里要使用拼接
//的方式才能生效
}
} else {
if (this.scal <= 0.3) {
this.scal = 0.3;
svgId.style.transform = "scale(" + this.scal + ")";
return;
} else {
this.scal -= 0.1; // (parseFloat(this.scal) - 0.1).toFixed(2);
}
//console.log("缩小系数: " + this.scal);
svgId.style.transform = "scale(" + this.scal + ")";
//svgId.style.transformOrigin = "0 0";
}
// if (ev.preventDefault) {
// /*FF 和 Chrome*/
// ev.preventDefault(); // 阻止默认事件
// }
// return false;
},