前言:
而今你们对“js页面放大缩小”大约比较着重,咱们都需要剖析一些“js页面放大缩小”的相关资讯。那么小编同时在网摘上网罗了一些关于“js页面放大缩小””的相关文章,希望看官们能喜欢,兄弟们一起来学习一下吧!本文简介
点赞 + 关注 + 收藏 = 学会了
使用 canvas 开发的项目,滚轮缩放画布的需求应该不算少数,比如地图。
Fabric.js 也提供了缩放画布的功能,本文主要讲解设置画布大小的几种方法。
动手实现
在动手前先查查文档。
我把和本文相关的文档放在这
mouse:wheel:滚轮事件getZoom:获取画布当前缩放级别setZoom:设置画布缩放级别zoomToPoint:设置画布缩放比例及缩放原点
其中 setZoom 和 zoomToPoint 的应用场景不同。
起步
在使用缩放功能之前,先初始化一下画布。
我还会在画布上设置一个背景图,便于观察。
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas><!-- 引入 Fabric.js --><script src=";></script><script> // 初始化画布 canvas = new fabric.Canvas('canvasBox') // 添加背景图 // 第1个参数:图片路径 // 第2个参数:回调函数,回到函数里会返回图片对象 fabric.Image.fromURL('../../images/bg.jpg', img => { canvas.setBackgroundImage(img) canvas.renderAll() })</script>
缩放画布(以左上角为原点)
以左上角为原点进行缩放画布,推荐使用 getZoom 和 setZoom 组合。
getZoom 可以获取画布当前缩放级别,用 setZoom 设置一个新的缩放级别。
所以我在页面上再加2个按钮,一个放大,一个缩小。
<div> <button onclick="setzoom(1)">放大</button> <button onclick="setzoom(-1)">缩小</button></div><canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas><!-- 引入 Fabric.js --><script src=";></script><script> const canvas = new fabric.Canvas('canvasBox') fabric.Image.fromURL('../../images/bg.jpg', img => { canvas.setBackgroundImage(img) canvas.renderAll() }) // 设置画布缩放级别 function setzoom(val) { let zoom = canvas.getZoom() // 获取画布当前缩放级别 zoom += val canvas.setZoom(zoom) // 设置画布缩放级别 }</script>
放大时缩放级别加1,缩小时缩放级别减1。
缩放画布(以鼠标指针为原点)
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas><!-- 引入 Fabric.js --><script src=";></script><script> const canvas = new fabric.Canvas('canvasBox') fabric.Image.fromURL('../../images/bg.jpg', img => { canvas.setBackgroundImage(img) canvas.renderAll() }) // 监听鼠标滚轮缩放事件 canvas.on('mouse:wheel', opt => { const delta = opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下是 100 let zoom = this.canvas.getZoom() // 获取画布当前缩放值 zoom *= 0.999 ** delta if (zoom > 20) zoom = 20 // 限制最大缩放级别 if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别 // 以鼠标所在位置为原点缩放 this.canvas.zoomToPoint( { // 关键点 x: opt.e.offsetX, y: opt.e.offsetY }, zoom // 传入修改后的缩放级别 ) })</script>
使用 mouse:wheel 监听鼠标滚轮滚动,如果向上滚动,deltaY 的值是100,向下就是 -100,所以可以自己设置一条公式来控制滚动时的缩放级别。
zoomToPoint 可以理解为 setZoom 的增强版,第一个参数是原点坐标,本例传入鼠标当前所在的坐标;第二个参数是缩放级别。
代码仓库
⭐Fabric 滚轮缩放画布
标签: #js页面放大缩小 #滚轮样式css #html等比例缩小图片