You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.6 KiB
119 lines
3.6 KiB
|
|
//页面加载完成之后的操作
|
|
window.onload=function(){
|
|
|
|
let tuoZhuaiState=0; //1表示可以拖拽 0表示不可以拖拽
|
|
let svg=document.getElementById('mySvg');
|
|
|
|
//viewbox的初始大小
|
|
let viewBox='';
|
|
|
|
//viewBOX的初始大小
|
|
let ChuShiDaXiaoX=0;
|
|
let ChuShiDaXiaoY=0;
|
|
|
|
//viewbox的初始 x y
|
|
let YuanDianX = 0;
|
|
let YuanDianY = 0;
|
|
|
|
console.log()
|
|
let multiple = $('#mySvg')[0].clientHeight/$('#mySvg')[0].clientWidth;
|
|
|
|
//存储viewbox变化之后的 x y
|
|
let WeiZhiXinXiX = 0;
|
|
let WeiZhiXinXiY = 0;
|
|
|
|
//鼠标按下之后的鼠标位置 x y
|
|
let mouseInit={
|
|
x:0,
|
|
y:0
|
|
};
|
|
|
|
//鼠标按下之后存储的viewbox的 x y 信息
|
|
let startWeiZhi={
|
|
x:0,
|
|
y:0
|
|
};
|
|
|
|
console.log()
|
|
console.log()
|
|
//初始化位置
|
|
function initLocal(){
|
|
//把viewbox的初始化大小存在变量中
|
|
ChuShiDaXiaoX=parseInt($('#mySvg')[0].clientWidth);
|
|
ChuShiDaXiaoY=parseInt($('#mySvg')[0].clientHeight);
|
|
|
|
//根据svg的大小确定viewbox的大小
|
|
viewBox=`0 0 ${parseInt($('#mySvg')[0].clientWidth)} ${parseInt($('#mySvg')[0].clientHeight)}`;
|
|
svg.setAttribute('viewBox',viewBox)
|
|
}
|
|
initLocal();
|
|
|
|
|
|
|
|
//鼠标按下事件 可以进行拖拽
|
|
$('#mySvg').on('mousedown',function(e){
|
|
tuoZhuaiState=1;
|
|
mouseInit.x=e.offsetX*(ChuShiDaXiaoX / $('#mySvg')[0].clientWidth);
|
|
mouseInit.y=e.offsetY*(ChuShiDaXiaoY / $('#mySvg')[0].clientHeight);
|
|
startWeiZhi.x=WeiZhiXinXiX;
|
|
startWeiZhi.y=WeiZhiXinXiY;
|
|
})
|
|
|
|
//鼠标悬浮事件，对svg的viewbox进行移动操作
|
|
$('#mySvg').on('mousemove',function(e){
|
|
if(tuoZhuaiState==1){
|
|
YuanDianX =mouseInit.x - e.offsetX * (ChuShiDaXiaoX / $('#mySvg')[0].clientWidth) + startWeiZhi.x;
|
|
YuanDianY = mouseInit.y - e.offsetY * (ChuShiDaXiaoY / $('#mySvg')[0].clientHeight) + startWeiZhi.y;
|
|
viewBox=`${YuanDianX} ${YuanDianY} ${ChuShiDaXiaoX} ${ChuShiDaXiaoY}`;
|
|
WeiZhiXinXiX=YuanDianX;
|
|
WeiZhiXinXiY=YuanDianY;
|
|
|
|
svg.setAttribute('viewBox',viewBox)
|
|
}
|
|
})
|
|
|
|
$('#mySvg').on('mouseout',function(e){
|
|
tuoZhuaiState=0
|
|
})
|
|
|
|
|
|
//鼠标抬起事件，取消拖拽
|
|
$('#mySvg').on('mouseup',function(e){
|
|
tuoZhuaiState=0;
|
|
})
|
|
|
|
//鼠标滚轮事件
|
|
$('#mySvg').on('mousewheel',function(e){
|
|
console.log(e)
|
|
if(e.originalEvent.wheelDelta>0){
|
|
console.log(multiple)
|
|
ChuShiDaXiaoX-=18;
|
|
ChuShiDaXiaoY=multiple*ChuShiDaXiaoX;
|
|
viewBox=`${YuanDianX+=2} ${YuanDianY+=2} ${ChuShiDaXiaoX} ${ChuShiDaXiaoY}`;
|
|
WeiZhiXinXiX = YuanDianX;
|
|
WeiZhiXinXiY = YuanDianY;
|
|
}else{
|
|
console.log('缩小')
|
|
ChuShiDaXiaoX+=18;
|
|
ChuShiDaXiaoY=multiple*ChuShiDaXiaoX;
|
|
viewBox=`${YuanDianX-=2} ${YuanDianY-=2} ${ChuShiDaXiaoX} ${ChuShiDaXiaoY}`;
|
|
WeiZhiXinXiX = YuanDianX;
|
|
WeiZhiXinXiY = YuanDianY;
|
|
}
|
|
svg.setAttribute('viewBox',viewBox)
|
|
})
|
|
|
|
//右键回到初始化
|
|
$('#mySvg').on('contextmenu',function(e){
|
|
e.preventDefault();
|
|
viewBox=`0 0 ${parseInt($('#mySvg')[0].clientWidth)} ${parseInt($('#mySvg')[0].clientHeight)}`;
|
|
WeiZhiXinXiX=0;
|
|
WeiZhiXinXiY=0;
|
|
YuanDianX=0;
|
|
YuanDianY=0;
|
|
ChuShiDaXiaoX=parseInt($('#mySvg')[0].clientWidth);
|
|
ChuShiDaXiaoY=parseInt($('#mySvg')[0].clientHeight);
|
|
svg.setAttribute('viewBox',viewBox)
|
|
})
|
|
}
|