微信小程序Demo:柠檬手帐 - 界面简洁的图片编辑应用,支...

微信小程序Demo:柠檬手帐 - 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图

分 类:

作 者:猫七街1

演示地址:暂无

价格:免费

微信小程序Demo:柠檬手帐 - 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图



一篇手帐包含的组件类型包括 sticker(软件自带的贴纸)、image(用户上传的图片)和 text(自定义文字)三种,全部保存在一个如下格式的 json 对象中,每个独立组件都包含了一个不重复的 id 以及相关的信息,保存时由客户端生成该对象并编码成 json 字符串存储在数据库,恢复编辑状态时通过解析 json 字符串获得对象,再由编辑页面渲染

  • {
  • “backgroundId”: “5”, 背景图id
  • “assemblies”: [
  • {
  • “id”: “jhjg”, 组件id
  • “component_type”: “image”, 组件类型(自定义图片)
  • “image_url”: “https://example.com/jhjg.png“, 图片地址
  • “stickerCenterX”: 269, 中心横坐标
  • “stickerCenterY”: 664, 中心纵坐标
  • “scale”: 1.7123667831396403, 缩放比例
  • “rotate”: -3.0127875041833434, 旋转角度
  • “wh_scale”: 1, 图片宽高比
  • “z_index”: 19 组件层级
  • },
  • {
  • “id”: “gs47”,
  • “component_type”: “text”, 组件类型(文字)
  • “text”: “test”, 文字内容
  • “stickerCenterX”: 479,
  • “stickerCenterY”: 546,
  • “scale”: 1.808535318980528,
  • “rotate”: 29.11614626607893,
  • “z_index”: 10
  • },
  • {
  • “id”: “chjn”,
  • “component_type”: “sticker”, 组件类型(贴纸)
  • “sticker_type”: “food”, 贴纸类型
  • “sticker_id”: “1”, 贴纸id
  • “image_url”: “https://example.com/weapp/stickers/food/1.png“,
  • “stickerCenterX”: 277,
  • “stickerCenterY”: 260,
  • “scale”: 1.3984276885130673,
  • “rotate”: -16.620756913892055,
  • “z_index”: 5
  • }
  • ]
  • }
  • 暂无相关内容,如使用遇到困难,请点此提问