Springbrand Editor

第 1 个
点击元素可选中,拖拽可移动

API 原始数据

模板: Demo Template (1080×1920)

{
  "id": 1,
  "name": "Demo Template",
  "category": "Demo",
  "content": {
    "meta": {
      "name": "Demo Template",
      "aiElements": []
    },
    "snapshot": {
      "store": {
        "page:page": {
          "id": "page:page",
          "meta": {},
          "name": "Page 1",
          "index": "a1",
          "typeName": "page"
        },
        "document:document": {
          "id": "document:document",
          "meta": {},
          "name": "",
          "gridSize": 10,
          "typeName": "document"
        },
        "shape:frame": {
          "x": 0,
          "y": 0,
          "id": "shape:frame",
          "meta": {},
          "type": "frame",
          "index": "a1",
          "props": {
            "h": 1920,
            "w": 1080,
            "fill": {
              "type": "solidColor",
              "color": "#ffffff",
              "opacity": 1
            },
            "name": "",
            "caption": null,
            "position": 1,
            "isEditable": true,
            "isAutoUpdatable": true
          },
          "opacity": 1,
          "isLocked": false,
          "parentId": "page:page",
          "rotation": 0,
          "typeName": "shape"
        },
        "shape:bg": {
          "x": 0,
          "y": 0,
          "id": "shape:bg",
          "meta": {},
          "type": "geometric",
          "index": "a2",
          "props": {
            "h": 1920,
            "w": 1080,
            "geo": "rectangle",
            "fill": {
              "type": "solidColor",
              "color": "#3b82f6",
              "opacity": 1
            },
            "shadow": null,
            "isEditable": true,
            "strokeColor": "#000000",
            "strokeWidth": 0,
            "cornerRounding": 0,
            "isAutoUpdatable": true
          },
          "opacity": 1,
          "isLocked": false,
          "parentId": "shape:frame",
          "rotation": 0,
          "typeName": "shape"
        },
        "shape:card": {
          "x": 90,
          "y": 460,
          "id": "shape:card",
          "meta": {},
          "type": "geometric",
          "index": "a3",
          "props": {
            "h": 1000,
            "w": 900,
            "geo": "rectangle",
            "fill": {
              "type": "solidColor",
              "color": "#ffffff",
              "opacity": 1
            },
            "shadow": {
              "x": 0,
              "y": 10,
              "blur": 30,
              "color": "#000000",
              "opacity": 0.2
            },
            "isEditable": true,
            "strokeColor": "#000000",
            "strokeWidth": 0,
            "cornerRounding": 24,
            "isAutoUpdatable": true
          },
          "opacity": 1,
          "isLocked": false,
          "parentId": "shape:frame",
          "rotation": 0,
          "typeName": "shape"
        },
        "shape:title": {
          "x": 140,
          "y": 560,
          "id": "shape:title",
          "meta": {},
          "type": "textBox",
          "index": "a4",
          "props": {
            "w": 800,
            "text": "Canvas Editor",
            "align": "start",
            "color": "#1f2937",
            "italic": false,
            "shadow": null,
            "autoSize": true,
            "fontSize": 96,
            "underline": false,
            "uppercase": false,
            "fontFamily": "Inter",
            "fontWeight": 700,
            "isEditable": true,
            "lineHeight": 1.1,
            "strokeColor": "#000000",
            "strokeWidth": 0,
            "letterSpacing": -20,
            "strikethrough": false,
            "verticalAlign": "top",
            "isAutoUpdatable": true
          },
          "opacity": 1,
          "isLocked": false,
          "parentId": "shape:frame",
          "rotation": 0,
          "typeName": "shape"
        },
        "shape:subtitle": {
          "x": 140,
          "y": 700,
          "id": "shape:subtitle",
          "meta": {},
          "type": "textBox",
          "index": "a5",
          "props": {
            "w": 800,
            "text": "基于 Fabric.js 的画板编辑器\n支持文本编辑、拖拽移动、缩放调整",
            "align": "start",
            "color": "#6b7280",
            "italic": false,
            "shadow": null,
            "autoSize": true,
            "fontSize": 42,
            "underline": false,
            "uppercase": false,
            "fontFamily": "Inter",
            "fontWeight": 400,
            "isEditable": true,
            "lineHeight": 1.5,
            "strokeColor": "#000000",
            "strokeWidth": 0,
            "letterSpacing": 0,
            "strikethrough": false,
            "verticalAlign": "top",
            "isAutoUpdatable": true
          },
          "opacity": 1,
          "isLocked": false,
          "parentId": "shape:frame",
          "rotation": 0,
          "typeName": "shape"
        },
        "shape:button": {
          "x": 140,
          "y": 1200,
          "id": "shape:button",
          "meta": {},
          "type": "geometric",
          "index": "a6",
          "props": {
            "h": 80,
            "w": 300,
            "geo": "rectangle",
            "fill": {
              "type": "solidColor",
              "color": "#3b82f6",
              "opacity": 1
            },
            "shadow": null,
            "isEditable": true,
            "strokeColor": "#000000",
            "strokeWidth": 0,
            "cornerRounding": 12,
            "isAutoUpdatable": true
          },
          "opacity": 1,
          "isLocked": false,
          "parentId": "shape:frame",
          "rotation": 0,
          "typeName": "shape"
        },
        "shape:buttonText": {
          "x": 200,
          "y": 1215,
          "id": "shape:buttonText",
          "meta": {},
          "type": "textBox",
          "index": "a7",
          "props": {
            "w": 200,
            "text": "开始使用",
            "align": "middle",
            "color": "#ffffff",
            "italic": false,
            "shadow": null,
            "autoSize": true,
            "fontSize": 32,
            "underline": false,
            "uppercase": false,
            "fontFamily": "Inter",
            "fontWeight": 600,
            "isEditable": true,
            "lineHeight": 1,
            "strokeColor": "#000000",
            "strokeWidth": 0,
            "letterSpacing": 0,
            "strikethrough": false,
            "verticalAlign": "middle",
            "isAutoUpdatable": true
          },
          "opacity": 1,
          "isLocked": false,
          "parentId": "shape:frame",
          "rotation": 0,
          "typeName": "shape"
        }
      },
      "schema": {
        "storeVersion": 4,
        "schemaVersion": 1,
        "recordVersions": {}
      }
    }
  },
  "created_at": "2024-01-01T00:00:00.000Z",
  "description": "",
  "element_type": "Template",
  "height": 1920,
  "width": 1080,
  "position": 1,
  "preview_url": "",
  "source_id": 1,
  "style": [],
  "type": "video",
  "types": [
    "video"
  ],
  "updated_at": "2024-01-01T00:00:00.000Z",
  "status": "published",
  "basic_layout": false,
  "has_replaceable": false,
  "replaceable_has_background": false,
  "template_binder_id": 1
}
加载中...
100%

拖拽图片到此处

或点击选择文件

支持 JPG、PNG、GIF、WebP 格式

模板:Demo Template尺寸:1080 × 1920