如何解决如何缩放转换x,y值?
我正在使用具有比例触摸功能的2d网格。我设法设置了平移边界,以使屏幕视口不会超出网格边界。我现在正在努力在缩放两个手指触摸和鼠标滚轮事件时确定新的转换值的算法。
touchStarted 设置两次初始触摸之间的矢量角度。 lastTouchAngle 用于在touchMoved中进行比较。
function touchStarted() {
if(touches.length == 2) {
let touchA = createVector(touches[0].x,touches[0].y);
let touchB = createVector(touches[1].x,touches[1].y);
lastTouchAngle = touchA.angleBetween(touchB);
}
return false;
}
touchMoved 会生成当前的触摸矢量,比较角度,然后进行相应缩放。
t_MinX 和 t_MinY 为约束设置最低的转换值,但要确定新的转换价值应该是我迷路的地方。我知道这将需要当前的比例,两次触摸之间的中心点以及“画布”的宽度和高度。
function touchMoved() {
if(touches.length == 1) {
panTranslate(translateX,translateY,mouseX,mouseY,pmouseX,pmouseY);
} else if (touches.length == 2) {
let touchA = createVector(touches[0].x,touches[1].y);
scl = (abs(lastTouchAngle) < abs(touchA.angleBetween(touchB)) ? (scl+sclStep < sclMax ? scl+sclStep : sclMax) : (scl-sclStep > sclMin ? scl-sclStep : sclMin));
let t_MinX = (screenH/sclMin) * (sclMin-scl);
let t_MinY = (screenW/sclMin) * (sclMin-scl);
let tX = translateX;
let tY = translateY;
if(abs(lastTouchAngle) > abs(touchA.angleBetween(touchB))) {
console.log("Scale out");
translateX = constrain(tX+mX,t_MinX,0);
translateY = constrain(tY+mY,t_MinY,0);
} else {
console.log("Scale in");
if(scl != sclMax) {
translateX = constrain(tX-mX,0);
translateY = constrain(tY-mY,0);
}
}
// Set current touch angle to lastTouchAngle
lastTouchAngle = touchA.angleBetween(touchB);
}
return false;
}
这让我感到困惑:
translateX = constrain(tX+mX,0);
完整代码:https://editor.p5js.org/OMTI/sketches/9ux6Rq6n5
解决方法
https://stackoverflow.com/questions/5713174
我在上面的链接中找到了答案,并能够从那里得到答案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。