javascript - 使用 p5.js 创建缩放效果
问题描述
我知道这个问题已经被问过好几次了,但我找到的答案都没有对我有用。我需要允许用户缩放到目前为止有效的图像,这只是一个scale(factor)
调用,但现在我想通过鼠标指针进行缩放。这证明更困难,因为我可以在指针效果上创建放大,但是当鼠标移动时,图像也会移动。可以在这个演示中看到:
https://editor.p5js.org/J-Cake/sketches/1r1wmWO60
我想我会将第二个平移的坐标乘以比例因子,但这似乎也无济于事。我错过了什么?
let sf = 1; // scaleFactor
let x = 0; // pan X
let y = 0; // pan Y
let mx, my; // mouse coords;
function setup() {
createCanvas(400, 400);
}
function draw() {
mx = mouseX;
my = mouseY;
background(255);
translate(mx, my);
scale(sf);
translate(-mx, -my);
translate();
rect(100, 100, 100, 100);
if (mouseIsPressed) {
x -= pmouseX - mouseX;
y -= pmouseY - mouseY;
}
}
window.addEventListener("wheel", function(e) {
if (e.deltaY > 0)
sf *= 1.05;
else
sf *= 0.95;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
解决方案
问题是您必须逐步应用比例。
s1
中心点 ( x1
, )的单个刻度 ( y1
) 可以通过以下方式计算:
model = translate(x1, y1) * scale(s1) * translate(-x1, -y1)
但是,如果您想在中心 ( , s2
) 周围应用新的比例 ( ),那么这是:x2
y2
model = translate(x2, y2) * scale(s2) * translate(-x2, -y2) * currentMode;
currentMode
之前的(比例)变换在哪里。
这与以下内容不同:
model = translate(x1+x2, y1+y2) * scale(s1*s2) * translate(-(x1+x2), -(y1+y2))
sf
从中心 ( mx
, ) 出发的单个刻度 ( my
) 可以通过以下方式计算:
let tx = mx - sf * mx;
let ty = my - sf * my;
translate(tx, ty);
scale(sf);
要连续执行更多此类操作,我建议实现 3x3矩阵乘法:
function matMult3x3(A, B) {
C = [0, 0, 0, 0, 0, 0];
for (let k = 0; k < 3; ++ k) {
for (let j = 0; j < 3; ++ j) {
C[k*3+j] = A[0*3+j] * B[k*3+0] + A[1*3+j] * B[k*3+1] + A[2*3+j] * B[k*3+2];
}
}
return C;
}
距离中心的比例可以用下面的 3x3 矩阵表示:
m = [ sf, 0, 0,
0, sf, 0,
tx, ty, 1];
这会导致以下鼠标滚轮事件:
window.addEventListener("wheel", function(e) {
let mx = mouseX;
let my = mouseY;
let s = e.deltaY > 0 ? 1.05 : 0.95;
let x = mx - s * mx;
let y = my - s * my;
m = matMult3x3([s,0,0, 0,s,0, x,y,1], [sf,0,0, 0,sf,0, tx,ty,1]);
sf = m[0];
tx = m[6];
ty = m[7];
} );
在这种情况下,这可以简化:
window.addEventListener("wheel", function(e) {
let mx = mouseX;
let my = mouseY;
let s = e.deltaY > 0 ? 1.05 : 0.95;
sf = sf * s;
tx = mx - s * mx + s * tx;
ty = my - s * my + s * ty;
} );
请参阅示例。矩形可以通过鼠标滚轮或+/-键从鼠标光标位置缩放:
let sf = 1, tx = 0, ty = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(127);
translate(tx, ty);
scale(sf);
rect(100, 100, 100, 100);
}
function applyScale(s) {
sf = sf * s;
tx = mouseX * (1-s) + tx * s;
ty = mouseY * (1-s) + ty * s;
}
window.addEventListener("wheel", function(e) {
applyScale(e.deltaY > 0 ? 1.05 : 0.95);
} );
function keyPressed() {
if (key == '-') {
applyScale(0.95);
} else if (key == '+') {
applyScale(1.05);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
推荐阅读
- html - html / css中移动视图中的水平滚动
- python - 如何在 MacOS 上彻底卸载 python 2.7
- javascript - 如何禁用和启用表 td 上的点击事件?
- google-bigquery - BigQuery 标准 SQL 错误,根本没有触及日期字段时的时间戳无效
- eclipse - Cherry pick 到 Eclipse git 中的另一个分支
- c# - 将 int 转换为小数选择放置小数位的位置
- docker - 我应该使用什么 Rebus 传输在 Docker 中运行,而不是 Azure
- apache - 在生成的源代码中从 Apache apache.cxf.tools.wsdlto.WSDLToJava 中删除类型
- python - 使用反射从包中加载和实例化模块?
- rest - 是否可以使用 Cloudinary API 创建空文件夹