最近项目里有个基于 raphael.js 的功能要进行迭代，要求要可以对画布进行缩放和移动，类似于地图那种放大缩小移动，研究了一番，发现 raphael 并没有直接实现这些功能，看了手册，我发现了 paper 的 setViewBox 方法:
经过测试，这个方法类似于一个放大镜的功能，它在不改变画布 paper 的情况下，截取某一个区域，用这个区域来铺满 paper，于是我们可以使用它来实现放大、移动的效果，代码如下：
<html>
<head>
<title>raphael缩放移动画布/</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js" type="text/javascript"></script>
</head>
<body>
<div id="paper"></div>
</body>
</html>
<script>
$(function () {
//一些全局参数
const paperWidth = 500; //画布宽度
const paperHeight = 500; //画布高度
const maxSize = 3; //允许放大的最大倍数
const minSize = 0.5; //允许缩小的最大倍数
var mouseOnBackGround = false; //鼠标是否悬浮在画布上
var mouseOnObject = false; //鼠标是否悬浮在画布的某个对象上
var mouseDown = false; //鼠标是否得按住状态
var lastMouseLocation = {}; //记录鼠标移动之前的坐标
//缩放相关参数
//coef:每次放大、缩小的增量;
//zoom:目前的大小与原来大小的比例;
//(x,y):目前缩放图的左上角坐标;
//w,h:以(x,y)为原点取得宽度和高度;
const scale = {coef: 0.05, zoom: 1, x: 0, y: 0, w: paperWidth, h: paperHeight};
//创建一个画布
var paper = new Raphael("paper", paperWidth, paperHeight);
//创建一个跟paper一样尺寸的rect模拟背景图
paper.rect(0, 0, paperWidth, paperHeight)
.attr({
"stroke": "blue",
"stroke-width": 4,
"fill": "#e1e1e1"
}
)
.hover(
function () {
//鼠标进入背景
mouseOnBackGround = true;
},
function () {
//鼠标移出背景
mouseOnBackGround = false;
}
);
//创建一个圆
paper.circle(150, 150, 40)
.attr({
"stroke": "red",
"stroke-width": 4,
"fill": "blue",
"opacity": 0.5
})
.hover(
function () {
//鼠标进入
mouseOnObject = true;
},
function () {
//鼠标移出
mouseOnObject = false;
}
);
//创建一个圆角方形
paper.rect(250, 250, 50, 50, 10)
.attr({
"stroke": "blue",
"stroke-width": 4,
"fill": "green"
}
)
.hover(
function () {
//鼠标进入
mouseOnObject = true;
},
function () {
//鼠标移出
mouseOnObject = false;
}
);
//更新Scale
function updateScale(x, y, w, h) {
scale.w = w;
scale.h = h;
scale.x = x;
scale.y = y;
}
//获取操作前的viewbox中心点
function getLastCenterPoint() {
var centerPoint = {};
centerPoint.x = scale.x + scale.w / 2;
centerPoint.y = scale.y + scale.h / 2;
return centerPoint;
}
/**
*鼠标滚轮缩放
*
*/
function onMouseWheeling(e) {
var dtl;
if (!mouseOnBackGround && !mouseOnObject) {
return;
}
if (e.wheelDelta) { //chrome
dtl = e.wheelDelta;
} else if (e.detail) {//firefox or others
dtl = -e.detail;
}
if (dtl < 0) {
//缩小,
if (scale.zoom < minSize) {
return;
}
scale.zoom -= scale.coef;
} else {
//放大
if (scale.zoom > maxSize) {
return;
}
scale.zoom += scale.coef;
}
//计算新的视图参数
var w = paperWidth / scale.zoom;
var h = paperHeight / scale.zoom;
var lastCenterPoint = getLastCenterPoint();
var x = lastCenterPoint.x - w / 2;
var y = lastCenterPoint.y - h / 2;
updateScale(x, y, w, h);
paper.setViewBox(x, y, w, h, false);
}
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', onMouseWheeling, false);
window.onmousewheel = document.onmousewheel = onMouseWheeling;//IE/Opera/Chrome/Safari
} else {
alert("鼠标滚轮监听事件绑定失败");
}
//监听鼠标移动
$(document).bind('mousedown', function (e) {
lastMouseLocation.x = e.clientX;
lastMouseLocation.y = e.clientY;
mouseDown = true;
}).bind('mouseup', function (e) {
lastMouseLocation = {};
mouseDown = false;
}).bind('mousemove', function (e) {
if (!mouseDown) {
return;
}
if (!mouseOnBackGround && !mouseOnObject) {
return;
}
var dx = e.clientX - lastMouseLocation.x;
var dy = e.clientY - lastMouseLocation.y;
var x = scale.x - dx;
var y = scale.y - dy;
updateScale(x, y, scale.w, scale.h);
lastMouseLocation.x = e.clientX;
lastMouseLocation.y = e.clientY;
paper.setViewBox(x, y, scale.w, scale.h, false);
})
});
</script>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于