Code Monkey home page Code Monkey logo

taro-poster-builder's Introduction

taro-vue3-poster-builder

基于taro3.x+vue3的小程序端海报生成器

概述

taro-vue3-poster-builder 基于taro3.x+vue3的微信小程序 canvas 绘图组件，封装了常用的操作, 通过配置的方式绘制海报。

生成效果

安装使用

方式一：通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# npmnpm
npm i poster-builder -S --production

# yarn
yarn add poster-builder --production

使用组件

import PosterBuilder from 'poster-builder';

方法二：下载代码

直接通过 git 下载 taro-poster-builder 源代码，并将src/component/PosterBuilder目录拷贝到自己的项目的 src/component目录中

使用组件

import PosterBuilder from '../../components/PosterBuilder/index.vue';

使用注意事项

  1. 图片的域名务必添加到 downloadFile 合法域名中（开发设置-服务器域名-downloadFile合法域名） 【P.s 开发时可 选中不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书】 【P.s 真机运行，可打开调试模式】

组件参数解释

config字段

字段 类型 必填 描述
width Number(单位:rpx) 是 画布宽度
height Number(单位:rpx) 是 画布高度
backgroundColor String 否 画布颜色
debug Boolean 否 false隐藏canvas，true显示canvas，默认false
blocks Object Array（对象数组） 否 看下文
texts Object Array（对象数组） 否 看下文
images Object Array（对象数组） 否 看下文
lines Object Array（对象数组） 否 看下文

blocks字段

字段名 类型 必填 描述
x Number(单位:rpx) 是 块的坐标
y Number(单位:rpx) 是 块的坐标
width Number(单位:rpx) 否 如果内部有文字，由文字宽度和内边距决定
height Number(单位:rpx) 是
paddingLeft Number(单位:rpx) 否 内左边距
paddingRight Number(单位:rpx) 否 内右边距
borderWidth Number(单位:rpx) 否 边框宽度
borderColor String 否 边框颜色
backgroundColor String 否 背景颜色
borderRadius Number(单位:rpx) 否 圆角
borderRadiusGroup Number[] 否 圆角数组
text Object 否 块里面可以填充文字，参考texts字段解释
zIndex Int 否 层级，越大越高

texts字段

字段名 类型 必填 描述
x Number(单位:rpx) 是 坐标
y Number(单位:rpx) 是 坐标
text String|Object 是 当Object类型时，参数为text字段的参数，marginLeft、marginRight这两个字段可用（示例请看下文）
fontSize Number(单位:rpx) 是 文字大小
color String 否 颜色
opacity Int 否 1为不透明，0为透明
lineHeight Number(单位:rpx) 否 行高
lineNum Int 否 根据宽度换行，最多的行数
width Number(单位:rpx) 否 没有指定为画布宽度
marginLeft Number(单位:rpx) 否 当text字段为Object可以使用，用来控制多行文字间距
marginRight Number(单位:rpx) 否 当text字段为Object可以使用，用来控制多行文字间距
textDecoration String 否 目前只支持 line-through（贯穿线），默认为none
baseLine String 否 top| middle|bottom基线对齐方式
textAlign String 否 left|center|right对齐方式
zIndex Int 否 层级，越大越高
fontFamily String 否 小程序默认字体为'sans-serif', 请输入小程序支持的字体，例如：'STSong'
fontWeight String 否 'bold'加粗字体，目前小程序不支持 100 - 900 加粗
fontStyle String 否 'italic'倾斜字体

images字段

字段 类型 必填 描述
x Number(单位:rpx) 是 右上角的坐标
y Number(单位:rpx) 是 右上角的坐标
url String 是 图片url（需要添加到下载白名单域名中）也支持本地图片
width Number(单位:rpx) 是 宽度（会根据图片的尺寸同比例缩放）
height Number(单位:rpx) 是 高度（会根据图片的尺寸同比例缩放）
borderRadius Number(单位:rpx) 否 圆角，跟css一样
borderRadiusGroup Number[] 否 圆角数组
borderWidth Number(单位:rpx) 否 边框宽度
borderColor String 否 边框颜色
zIndex Int 否 层级，越大越高

lines字段

字段 类型 必填 描述
startX Number(单位:rpx) 是 起始坐标
startY Number(单位:rpx) 是 起始坐标
endX Number(单位:rpx) 是 终结坐标
endY Number(单位:rpx) 是 终结坐标
width Number(单位:rpx) 是 线的宽度
color String 否 线的颜色
zIndex Int 否 层级，越大越高

问题反馈

有什么问题可以直接提issue

参考

taro-poster-builder's People

Contributors

bibbin avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

daheaths sladebiy

taro-poster-builder's Issues

请教下画布 

          const pageInstance = Taro.getCurrentInstance()?.page || {} // 拿到当前页面实例
          const query = Taro.createSelectorQuery().in(pageInstance) // 确定在当前页面内匹配子元素
          query
            .select(`#${canvasId}`)
            .fields({ node: true, size: true, context: true }, (res) => {
              const canvas = res.node
              const ctx = canvas.getContext("2d")
              resolve({ ctx, canvas })
            })
            .exec()

这样获取画布感觉挺麻烦的，不能用Taro.createCanvasContext的吗？

引用后，启动不了

./node_modules/poster-builder/src/components/PosterBuilder/index.vue?vue&type=script&lang=ts (./node_modules/vue-loader/dist??ref--10-0!./node_modules/poster-builder/src/components/PosterBuilder/index.vue?vue&type=script&lang=ts) 22:19
Module parse failed: Unexpected token (22:19)
File was processed with these loaders:

  • ./node_modules/vue-loader/dist/index.js
    You may need an additional loader to handle the result of these loaders.
    | },
    | config: {
  type: Object as PropType<DrawConfig>,

| default: () => ({}),
| },
@ ./node_modules/poster-builder/src/components/PosterBuilder/index.vue?vue&type=script&lang=ts 1:0-112 1:0-112 1:113-214 1:113-214
@ ./node_modules/poster-builder/src/components/PosterBuilder/index.vue
@ ./node_modules/poster-builder/src/index.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--10-0!./src/pages/promotion/register/index.vue?vue&type=script&lang=ts
@ ./src/pages/promotion/register/index.vue?vue&type=script&lang=ts
@ ./node_modules/@tarojs/taro-loader/lib/raw.js!./src/pages/promotion/register/index.vue
@ ./src/pages/promotion/register/index.vue,./node_modules/poster-builder/src/components/PosterBuilder/index.vue?vue&type=template&id=5896b600&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--10-0!./node_modules/poster-builder/src/components/PosterBuilder/index.vue?vue&type=template&id=5896b600&ts=true) 5:27
Module parse failed: Unexpected token (5:27)
File was processed with these loaders:

  • ./node_modules/vue-loader/dist/templateLoader.js
  • ./node_modules/vue-loader/dist/index.js
    You may need an additional loader to handle the result of these loaders.
    | const _hoisted_1 = ["id"]
    |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createElementBlock("canvas", {
| type: "2d",
@ ./node_modules/poster-builder/src/components/PosterBuilder/index.vue?vue&type=template&id=5896b600&ts=true 1:0-169 1:0-169
@ ./node_modules/poster-builder/src/components/PosterBuilder/index.vue
@ ./node_modules/poster-builder/src/index.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--10-0!./src/pages/promotion/register/index.vue?vue&type=script&lang=ts
@ ./src/pages/promotion/register/index.vue?vue&type=script&lang=ts
@ ./node_modules/@tarojs/taro-loader/lib/raw.js!./src/pages/promotion/register/index.vue
@ ./src/pages/promotion/register/index.vue

node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
code: 'ERR_UNHANDLED_REJECTION'
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.