• 请不要在回答技术问题时复制粘贴 AI 生成的内容
edis0n0
V2EX  ›  程序员

求推荐点击图片变暗剩余部分,弹出选中区域介绍的前端组件

  •  
  •   edis0n0 · Sep 27, 2022 · 2233 views
    This topic created in 1501 days ago, the information mentioned may be changed or developed.
    要求能通过鼠标滚轮缩放图片,然后通过鼠标拖拽。

    随手画的效果图:
    i.ibb.co/DrFhhKC/Untitled.png
    10 replies  •  2022-09-29 12:34:33 +08:00
    johnnyNg
    johnnyNg
    Sep 27, 2022
    1
    自己写吧
    RealJacob
    RealJacob
    Sep 27, 2022
    2
    driver.js 感觉可以满足
    RealJacob
    RealJacob
    Sep 27, 2022
    3
    @RealJacob 没注意到滚轮和拖拽,这个就不清楚了,感觉得自己实现下
    zyronon
    zyronon
    Sep 27, 2022
    4
    现成的没有。鼠标滚轮缩放图片,以图片中心点缩放最简单,如果要以 hover 点缩放,需要用到矩阵。其他就是普通的 js 了
    TMaize
    TMaize
    Sep 27, 2022
    5
    用 fabricjs 画吧
    jifengg
    jifengg
    Sep 28, 2022
    6
    你要找的是不是”viewerjs“
    edis0n0
    edis0n0
    OP
    Sep 28, 2022
    7
    @jifengg 看来下这个没办法点击指定不规则区域变暗剩余区域呀
    dudubaba
    dudubaba
    Sep 28, 2022
    8
    自己写也不难吧,选中图片 ,蒙层出现,计算图片的实际位置,复制图片然后 z-index 定位在蒙层上面,看起来就像其他区域变暗了。然后加手势对新图片缩放等操作。
    cangcang
    cangcang
    Sep 28, 2022
    9
    d3.js
    SmiteChow
    SmiteChow
    Sep 29, 2022
    10
    svg 层
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1950 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 01:15 · PVG 09:15 · LAX 17:15 · JFK 20:15
    ♥ Do have faith in what you're doing.