Rumah  >  Artikel  >  applet WeChat  >  Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam)

Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam)

青灯夜游
青灯夜游ke hadapan
2021-09-13 18:36:173105semak imbas

Bagaimana untuk menggunakan program mini untuk menjana poster? Dalam artikel ini, saya akan mengesyorkan pemalam generasi poster - pelukis, dan melihat cara menggunakannya untuk menjana poster, saya harap ia akan membantu anda.

Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam)

Poster penjanaan kod asli program mini

Langkah pertama:

Muat turun pakej dan letakkan pakej pelukis dalam direktori komponen

 https://github.com/Kujiale-Mobile/Painter

[Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Langkah kedua:

Gunakan fail json halaman untuk mengimport

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  }
}

Langkah tiga:

Gunakan wxml halaman

接收海报的图片容器
<image mode="widthFix" src="{{ posterImg }}" id="goods_qr-code" alt />

<painter wx-if="{{showPainter}}" palette="{{data}}" bind:imgOK="firstImg" />
  
palette        字段作为画图数据的数据源, 图案数据以 json 形式存在
widthPixels    强制指定生成的图片的像素宽度

绘图完成后,可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片或失败的原因

Langkah 4:

Gunakan js halaman

生成海报的方法(){
this.setData({
        template: {
          width: "750rpx",
          height: "1500rpx",
          views: [
            {
              type: &#39;image&#39;,
              url: 图片路路径,
              css: {
                top: &#39;10rpx&#39;,
                left: &#39;10rpx&#39;,
                right: &#39;10rpx&#39;,
                width: &#39;730rpx&#39;,
                height: &#39;1500rpx&#39;
              }
            }
          ]
        }
     })
}

  海报生成完毕自动调用
  
  firstImg(e) {
    console.log(e.detail.path);
    this.setData({
      posterImg: e.detail.path
    })
  },

Pengenalan pemalam dan tapak web rasmi: Pelukis menjana poster

https://codechina.csdn.net/mirrors/Kujiale-Mobile/ Painter?utm_source=csdn_github_accelerator

Alamat asal: https://juejin.cn/post/6995356720125968398

Penulis: Huang Yongchao>

Lebih banyak pengetahuan berkaitan pengaturcaraan, Sila lawati:
Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan program kecil untuk menjana poster (disyorkan pemalam). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:掘金--黄勇超. Jika ada pelanggaran, sila hubungi admin@php.cn Padam