数学吧 关注:877,701贴子:8,700,974
  • 11回复贴,共1

苦逼程序员跑来数学吧求助

只看楼主收藏回复

我是一名程序员,在开发一个需求,内容是这样
有一张图片在浏览器上,当你鼠标不在图片上进行缩放的时候,图片会以自身中心为原点,按照一定的比率进行缩放,当如果鼠标在图片上,则图片会以鼠标为中心进行缩放
这里有演示网站
网页链接
我想问的问题是 当鼠标在图片上的时候进行缩放 图片要移动多少距离 才能保持这个效果
这里有个参考公式
其中ratio是增长比率 网页里的那个默认是1.1
Result.width和height是图片的宽高
这个偏移量的计算我一直想不清楚
所以请求各位大佬来帮帮忙


IP属地:湖北来自Android客户端1楼2023-02-02 22:51回复
    e. ClientX - x 是鼠标相对于图片的x坐标 同理得y 在编程里 x轴向右 y轴向下


    IP属地:湖北来自Android客户端2楼2023-02-02 22:53
    回复
      css的scale属性啊,查一下


      IP属地:福建来自Android客户端6楼2023-02-02 23:10
      收起回复
        为啥不用chatGPT


        IP属地:上海7楼2023-02-02 23:17
        回复
          有没有可能,是他试出来的


          IP属地:上海来自iPhone客户端10楼2023-02-03 00:20
          回复
            这样的弹窗广告可够讨厌的


            IP属地:河北来自Android客户端12楼2023-02-03 10:40
            回复
              代码公式不是写的很清楚么
              你纠结的origin.x原因是图片以自身为中心放大了(ratio - 1),所以要将图片本身放大带来的偏移量加回来
              这个问题可以拆分成2步思考
              1.如果鼠标指在图片左上角,放大(ratio - 1)倍后,怎么偏移保证鼠标仍在左上角
              此时自然是x+=origin.x
              2.在1的基础上,鼠标在图片内,保证鼠标在图片相同相对位置
              此时是x -= (ratio - 1) * (e.clientX - x)
              两次计算相结合自然就变成x -= (ratio - 1) * (e.clientX - x) - origin.x了


              IP属地:上海13楼2023-02-03 11:16
              回复
                偏移量=(鼠标坐标-0.5*边长*缩放比)-原坐标
                鼠标是新图片中点,减去一半新的边长是图片新的左上角位置,新的边长是原边长*缩放比


                IP属地:新西兰来自Android客户端14楼2023-02-03 11:28
                回复
                  第一个需求不会导致图片位置移动吗?


                  IP属地:江苏来自iPhone客户端15楼2023-02-03 12:00
                  回复


                    IP属地:江苏16楼2023-02-03 12:52
                    收起回复