Question

我正在尝试实现以下解决方案：https://matthiasberth.com/tech/stable-zoom-and-pan-in-paperjs。

我目前有：

var toolPan = new paper.Tool();
toolPan.onMouseDrag = function(event) {
    var a = event.downPoint.subtract(event.point);
    a = a.add(paper.view.center);
    paper.view.center = a;
};

window.addEventListener("wheel", function(e) {
    var dir = Math.sign(e.deltaY),
        factor = 1.05;

    if ( dir < 0 ) {
        paper.view.zoom *= factor;

    } else if ( dir > 0 ) {
        paper.view.zoom /= factor;
    }

    offset = new paper.Point(e.deltaX,-e.deltaY);
    offset = offset.multiply(factor);
    a = paper.view.center.add(offset);
    paper.view.center = a; 
});

平底锅工作正常。问题在于缩放。它会缩放，但不会平移到中心。数学公式错误吗？

Answer 1

在我看来，我已经发布了该问题的答案，但找不到。
这是关于discussion中实现的解决方案的http://sketch.paperjs.org（关于缩放工具）。
这是fiddle，演示了我对稳定平移/缩放的实现。

<script id="vertexShader" type="x-shader/x-vertex">
void main() {
    gl_Position = vec4( position, 1.0 );
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec3 colorA = vec3(0.905,0.045,0.045);
vec3 colorB = vec3(0.995,0.705,0.051);

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    float interval = 2000.0; // 2000 milliseconds = 2 seconds
    float p = clamp(st.y + sin(2.0*3.1415 * u_time / interval), 0.0, 1.0);

    vec3 pct = vec3(p);

    vec3 color = vec3(0.0);

    color = mix(colorA, colorB, pct);

    gl_FragColor = vec4(color,1);
}
</script>

<div id="container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>

缩放和平移

1 个答案: