willnewii / Json2canvas
通过json直接在canvas上绘制图像,支持小程序和浏览器.
Stars: ✭ 189
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Json2canvas
Wxdraw
A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼
Stars: ✭ 1,625 (+759.79%)
Mutual labels: weapp, canvas
Lemonjournal
A WeChat mini program demo based on Wafer2 framework - 微信小程序Demo：柠檬手帐 - 界面简洁的图片编辑应用，支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图
Stars: ✭ 341 (+80.42%)
Mutual labels: weapp, canvas
Cax
HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎
Stars: ✭ 1,864 (+886.24%)
Mutual labels: weapp, canvas
Streakjs Weapp
微信小程序Canvas开发——微信小程序使用多端JavaScript Canvas框架streakjs示例
Stars: ✭ 558 (+195.24%)
Mutual labels: weapp, canvas
Picasso.js
A charting library streamlined for building interactive visualizations for the Qlik product suites.
Stars: ✭ 175 (-7.41%)
Mutual labels: canvas
React Native Signature Canvas
✒️ React Native Signature Component based WebView Canvas for Android && IOS && expo
Stars: ✭ 169 (-10.58%)
Mutual labels: canvas
Drawingboard.js
A canvas based drawing app that you can integrate easily on your website.
Stars: ✭ 2,072 (+996.3%)
Mutual labels: canvas
Online Privacy Test Resource List
Privacy Online Test and Resource Compendium (POTARC) 🕵🏻
Stars: ✭ 185 (-2.12%)
Mutual labels: canvas
Vue Grid Canvas
A vue component, it can generate a similar excel form for you
Stars: ✭ 179 (-5.29%)
Mutual labels: canvas
React Countdown Clock
HTML5 canvas countdown clock React component
Stars: ✭ 182 (-3.7%)
Mutual labels: canvas
概述
通过json直接在canvas上绘制图像.基于cax,借鉴(抄袭)了mp_canvas_drawer.比canvas_drawer多了图片圆角支持,圆形,缩放,分组等功能.文本支持动态高度,竖排.同时支持小程序和浏览器.
预览
-
小程序demo
git clone https://github.com/willnewii/json2canvas.git
微信开发者工具导入项目 example/weapp/
功能说明
- 支持缩放 如果设计稿是750,而画布只有375时.不需要任何换算,只需要将scale设置为0.5
- 支持图片圆角
- 支持圆型,矩形,矩形圆角(背景色支持线性渐变)
- 文本支持竖排,长文本自动换行
- 支持动态文本
- 支持分组(cax里很好用的一个功能) 说明
- 支持旋转
小程序添加json2canvas组件
require：SDKVersion>=2.6.1 小程序已经支持使用 npm 安装第三方包，详见 npm 支持
1.npm i json2canvas
2.微信开发者工具->工具->构建npm
3.在需要使用的界面引入Component
{
"usingComponents": {
"json2canvas":"/miniprogram_npm/json2canvas/index"
}
}
元素属性说明
借鉴和引用
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].