小さなプログラムは共有ポスターを生成して、1つのjsonで十分です.Webの同時サポート

需要
プロジェクトにいくつかのcanvas生成共有ポスターページを書いた後、これは繰り返して冗長な仕事だと思った.そこでjsonのようなポスターを直接生成できるライブラリがあるかどうか考えた.
githubで2つのプロジェクトが見つかりました

wxa-plugin-canvasは、プロファイルの書き方があまり好きではありません.

はあまり知られていません

mp_canvas_drawer、使い方は直感的ですが、残念ながら機能は少し少ないです.

そして自分で車輪を作れるかどうか考えました.そこでこのプロジェクトjson 2 canvasがあり、簡単にmp_と理解できます.canvas_drawerの強化版でしょう.
json 2 canvas canvasポスターを描いて、jsonを書けば十分です.
プロジェクトのcanvas描画はcaxに基づいて実現される.だから天然の利益をもたらして、json 2 canvasは同時に小さいプログラムとwebをサポートします
機能

はスケーリングをサポートする.設計原稿が750である、キャンバスが375時のみである.換算は必要ありません.scaleを0.5に設定するだけです.

サポートテキスト(長いテキストは自動的に改行します.ありがとうございます.coolzjy@v2ex提供された正則https://regexr.com/4f12l,改行の計算方式を最適化した(乱暴に単語を折らない))

は、画像(フィレット)

をサポートします.

は、円形、矩形、矩形のフィレット

をサポートする.

サポートパケット(caxで使いやすい機能)

は、ウィジェットとweb

を同時にサポートします.
例
web-demoインタフェース左のjsonは、編集して、直接効果を見ることができますよ~
ウィジェット-demo

git clone https://github.com/willnewii/json2canvas.git
            example/weapp/

アプレットのインストール

npm i json2canvas
       ->  ->  npm

必要なインタフェースにComponentを導入

{
  "usingComponents": {
    "json2canvas":"/miniprogram_npm/json2canvas/index"
  }
}

効果図
このようなポスターを生成するには、どうすればいいですか?△赤枠は画像要素、青枠は文字要素、残りは背景図です.
一人のjsonで終わります.サポートされている要素とパラメータは、プロジェクトreadmeを参照してください.

{
        "width": 750,
        "height": 1334,
        "scale": 0.5,
        "children": [
            {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/bg_concerts_1.jpg",
                "width": 750,
                "height": 1334
            }, {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
                "width": 100,
                "x": 48,
                "y": 44,
                "isCircular": true,
            }, {
                "type": "circle",
                "r": 50,
                "lineWidth": 5,
                "strokeStyle": "#CCCCCC",
                "x": 48,
                "y": 44,
            }, {
                "type": "text",
                "text": "   ",
                "font": "30px Arial",
                "color": "#FFFFFF",
                "x": 168,
                "y": 75,
                "shadow": {
                    "color": "#000",
                    "offsetX": 2,
                    "offsetY": 2,
                    "blur": 2
                }
            }, {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/medal_concerts_1.png",
                "width": 300,
                "x": "center",
                "y": 361
            }, {
                "type": "text",
                "text": "         ",
                "font": "38px Arial",
                "color": "#FFFFFF",
                "x": "center",
                "y": 838,
                "shadow": {
                    "color": "#000",
                    "offsetX": 2,
                    "offsetY": 2,
                    "blur": 2
                }
            }, {
                "type": "text",
                "text": "  6 ，  2 ，  ，  ，         ？",
                "font": "24px Arial",
                "color": "#FFFFFF",
                "x": "center",
                "y": 888,
                "shadow": {
                    "color": "#000",
                    "offsetX": 2,
                    "offsetY": 2,
                    "blur": 2
                }
            }, {
                "type": "rect",
                "width": 750,
                "height": 193,
                "fillStyle": "#FFFFFF",
                "x": 0,
                "y": "bottom"
            }, {
                "type": "image",
                "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
                "width": 117,
                "height": 117,
                "x": 47,
                "y": 1180
            }, {
                "type": "text",
                "text": "          ",
                "font": "26px Arial",
                "color": "#858687",
                "x": 192,
                "y": 1202
            }, {
                "type": "text",
                "text": "            ",
                "font": "18px Arial",
                "color": "#A4A5A6",
                "x": 192,
                "y": 1249
            }]
    }

問題フィードバック
何か問題があったらissueに直接言ってください.