如何计算缩放图像的偏移量？

Question

我在图像上使用 Animated 以在用户按下按钮时以编程方式缩放图像。

  handleZoomIn() {
    this.zoom += -0.25;
    Animated.spring(this.animatedValue, {
      toValue: this.zoom
    }).start()   }

  handleZoomOut() {
    this.zoom += 0.25;
    Animated.spring(this.animatedValue, {
      toValue: this.zoom,
      friction: 3,
      tension: 40
    }).start()   }
    const imageStyle = {
      transform: [{ scale: this.animatedValue}]
    } 

   render() {
      <Animated.Image source={{ uri: source }} style={[imgSize, { position: 'absolute' }, imageStyle]} />
   }

有一张图片和一张缩放后的图片。

如何计算两张图片左上角之间的距离？

偏移量不应该是？

(dx, dy) = ((originalWidth-(originalWidth X scale))/2, (originalWidth - (originalHeight X scale))/2)

Answer 1

(dx, dy) = ((originalWidth-(originalWidth X scale))/2, (originalWidth - (originalHeight X scale))/2)

基本上是的，但是你也有 copy/paste 在高度中使用 "width" 的拼写错误，即：(dx, dy) = ((originalWidth-(originalWidth * scale))/2, ( originalHeight - (originalHeight * scale))/2)

这可以在经典程序代码中稍微简化（？可能是个人偏见），例如：

offsetFactor = (1.0 - scale) / 2;
dx = originalWidth * offsetFactor;
dy = originalHeight * offsetFactor;

How do I calculate the distance between the top-left corner of the two images?

哦，但是你的问题是关于距离.. 那当然是 d = sqrt((dx*dx) + (dy*dy)); ... 但是一半的时间程序员需要这个，平方距离 (d_sq = (dx*dx) + (dy*dy);) 就足够了，例如用于排序，或检查某物是否在半径内（然后与平方半径值进行比较）等......然后可以避免根计算，这通常是主要的优化，以防涉及很多值。（其中一个不适用的情况是 3D 中的光着色模型，这使得 "phong shading" 成为早期 3D 渲染器的一项相当昂贵的功能，因为您至少无法避免不准确的每像素根计算那里）

如何计算缩放图像的偏移量？

How do I calculate the offset of a scaled image?

react-native

react-animated