svg标签我就不做细致的解释了,直接看问题。
第一步
1.首先我们要实现放大,缩小,和拖拽的前提是把图片利用svg显示。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150"></svg>
这样就可以直接加载svg文件格式的图片。
2.那如果不是svg格式的图片,我们还可以使用img标签加载图片。
<svg id="mySvg" width="730" height="588" >
<image width="730" id="Image" src="dfd.png"/>
</svg>
上面的图片路径是随便写的。
这样我们就完成了第一步,可以开心一下。
第二步
1.加载完成之后我们就可以去实现放大和缩小的功能了。实际上放大和缩小的功能差不多,就拖拽效果比较难实现一点。
2.说那么多,我们怎么去实现呢?这里我们就得提到svg自带的viewBox属性了。viewBox属性就跟我们手机截图的那个截图框差不多。放大就是把这个viewbox的长宽缩小,这样我们看到的图片就会像放大了一样,而缩小就相反。拖拽的话,等把放大和缩小功能实现之后,再去介绍。
3.那viewBox怎么用呢?话不多说,直接上代码。
<svg id="mySvg" width="730" height="588" viewBox="0,0,730,588" >
<image width="730" id="Image"/>
</svg>
4.这段代码表示这个”截图框“的大小和svg是一样大的,所以就不会有缩小和放大的效果。但是当我们把viewBox的属性改成 "0,0,315,294" 时,我们就会发现图片被放大两倍了。原因就是”截图框“变小了所以看到的内容就变大了。viewBox的前两个属性是截图框的位置,而后面的两个属性是”截图框“的大小。所以缩小,放大就是改变viewBox后面两个属性就好。大家可以去创建一个svg试一试。只要后面监听鼠标的滚动事件,向上就是把viewBox的后两个属性变小就会实现放大效果,线下就是把viewBox的后两个属性变大。大家可以参考我的代码试一试(只有js代码)。
<script>
let svg=document.getElementById("mysvg")
svg.addEventListener("mousewheel",function(e){
if(e){
if(e.wheelDelta>0){
console.log('向上滚动')
if(ChuShiDaXiaoX>150&&ChuShiDaXiaoY>120){ svg.setAttribute('viewBox',`${YuanDianX+=1},${YuanDianY+=1},${ChuShiDaXiaoX-=10},${ChuShiDaXiaoY-=8}`)
//YuanDianY是我定义的变量专门用来改变”截图框“的位置的。
}
}
if(e.wheelDelta<0){
console.log('向下滚动')
svg.setAttribute('viewBox',`${YuanDianX-=1},${YuanDianY-=1},${ChuShiDaXiaoX+=10},${ChuShiDaXiaoY+=8}`)
}
}
})
</script>
5.然后就到我们的拖拽效果的实现了。拖拽的实现只需要改变我们的viewBox前两个属性就可以了,viewBox的第一个属性是svg框的距离图片左上角的x,第二个是y 。(可能我的表达不是很清楚,大家不理解可以去搜一下 嘿嘿嘿)。但是我们得转换才能正确的是像拖拽效果。
这是我自己画的实现拖拽效果的坐标转换示意图。 我这边实现拖拽使用左边鼠标按下拖动的。
A点:表示鼠标一开始按下的点的位置。
B点:表示鼠标松开后的点的位置。
A点到放大后的图片的最左边的距离就是我们viewBox中的第一个属性x ,距离最上边那就是第二个属性y。所以我们要移到B点其实只是增大了鼠标的到svg框的距离。
上代码:
<svg width="730" height="588" id="mySvg">
<image src="sswd.png" width="730" id="image"/>
</svg>
<script>
let svg=document.getElementById('mySvg');
let StartWeiZhiXinXi=[]; //初始点的”截图框“到放大后的图片左上角的距离
let startPoint=[]; //初始点的鼠标距离”截图框“的左上角的距离
let tuoZhuai=false;//拖拽状态
//截图框的大小,也就是缩放的程度
let ChuShiDaXiaoX=0;
let ChuShiDaXiaoY=0;
//鼠标按下事件
svg.addEventListener('mousedown',function(){
StartWeiZhiXinXi=[];
startPoint=[];
tuoZhuai=true;
startPoint.push({x:event.offsetX*(ChuShiDaXiaoX/730),y:event.offsetY*(ChuShiDaXiaoY/588)})
StartWeiZhiXinXi.push({x:WeiZhiXinXiX,y:WeiZhiXinXiY})
})
//鼠标移动事件
svg.addEventListener("mousemove",function(){
if(tuoZhuai){
YuanDianX=startPoint[0].x-event.offsetX*(ChuShiDaXiaoX/730)+StartWeiZhiXinXi[0].x
YuanDianY=startPoint[0].y-event.offsetY*(ChuShiDaXiaoY/588)+StartWeiZhiXinXi[0].y
svg.setAttribute('viewBox',`${YuanDianX},${YuanDianY},${ChuShiDaXiaoX},${ChuShiDaXiaoY}`)
WeiZhiXinXiX=YuanDianX
WeiZhiXinXiY=YuanDianY
}
})
//鼠标松开事件
svg.addEventListener('mouseup',function(){
tuoZhuai=false;
})
//鼠标移出事件
svg.addEventListener('mouseleave',function(){
tuoZhuai=false;
})
//鼠标滚轮事件
svg.addEventListener("mousewheel",function(e){
if(e){
if(e.wheelDelta>0){
console.log('向上滚动')
if(ChuShiDaXiaoX>150&&ChuShiDaXiaoY>120){
svg.setAttribute('viewBox',`${YuanDianX+=1},${YuanDianY+=1},${ChuShiDaXiaoX-=10},${ChuShiDaXiaoY-=8}`)
WeiZhiXinXiX=YuanDianX
WeiZhiXinXiY=YuanDianY
}
}
if(e.wheelDelta<0){
console.log('向上滚动')
if(ChuShiDaXiaoX<730&&ChuShiDaXiaoY<588){
svg.setAttribute('viewBox',`${YuanDianX-=1},${YuanDianY-=1},${ChuShiDaXiaoX+=10},${ChuShiDaXiaoY+=8}`)
WeiZhiXinXiX=YuanDianX
WeiZhiXinXiY=YuanDianY
}
}
}
})
</script>
欧克,这个编写代码的编辑器有点垮,代码有点乱了。大家可以复制下来重新排版一下。
感谢观看!!!