V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
OkabeRintaro
V2EX  ›  程序员

请问下,这种效果前端是怎么做的?前端商品衣服标签标注.....

  •  
  •   OkabeRintaro · 2022-10-28 16:23:50 +08:00 · 1593 次点击
    这是一个创建于 775 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请问下,这种效果前端是怎么做的?
    点击这些衣服上的标签跳转到商品详情页.

    1 、前端-商品衣服标签标注? 是一个模板吗?标签的位置只能固定吗?

    2 、还是可以由商家自己排版标签的位置,以及标签风格?

    3 、如果可以自定义,是如何做到的呢??

    <img src="https://pic1.imgdb.cn/item/635b907e16f2c2beb10b5bfd.png"/>
    
    10 条回复    2022-10-28 18:02:48 +08:00
    OkabeRintaro
        1
    OkabeRintaro  
    OP
       2022-10-28 16:29:13 +08:00
    leoQaQ
        2
    leoQaQ  
       2022-10-28 16:47:38 +08:00
    我个人猜测有两种情况:
    1. 商家上传图片设置标签位置;
    2. 后台图片识别自动添加
    zhouyg
        3
    zhouyg  
       2022-10-28 16:51:22 +08:00   ❤️ 1
    商家上传图片的圈个热区,加个链接就好了吧
    weixind
        4
    weixind  
       2022-10-28 16:53:18 +08:00
    1.位置可以自定义调整。
    2. 商家可以自定义。
    3. 用 canvas 搞一个编辑系统。基本上就是几张图和线的叠加。绑定点击时间做跳转。svg 应该也可以。推荐 canvas 。
    dtdths1
        5
    dtdths1  
       2022-10-28 16:55:04 +08:00
    实现不难,应该是模版组件拖拽标签做出来的,也就是所谓的低代码
    yhxx
        7
    yhxx  
       2022-10-28 17:04:17 +08:00   ❤️ 1
    https://www.zhangxinxu.com/wordpress/2017/05/html-area-map/

    <img src="mm1.jpg" alt="美女" usemap="#MM">
    <map id="MM" name="MM">
    <area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
    <area shape="circle" coords="200,50,50" href="#circle" alt="圆形">
    <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多边形">
    </map>
    OkabeRintaro
        8
    OkabeRintaro  
    OP
       2022-10-28 17:38:25 +08:00
    请问有做过这种样子的经验的大佬吗?有什么能推荐的 比如使用样示例板,或者 基于什么做的,或者有什么路子能做出相似效果...
    PS:估计是要做到小程序里面的 canvas 可能不行
    OkabeRintaro
        9
    OkabeRintaro  
    OP
       2022-10-28 18:02:39 +08:00
    这感觉就像是要做一个图片编辑器出来啊
    OkabeRintaro
        10
    OkabeRintaro  
    OP
       2022-10-28 18:02:48 +08:00
    vue 可以吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5522 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 01:58 · PVG 09:58 · LAX 17:58 · JFK 20:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.