https://github.com/mrminfive/wxapp-sketchpad
:art: 微信小程序快速绘画工具【已废弃】
https://github.com/mrminfive/wxapp-sketchpad
Last synced: 8 months ago
JSON representation
:art: 微信小程序快速绘画工具【已废弃】
- Host: GitHub
- URL: https://github.com/mrminfive/wxapp-sketchpad
- Owner: Mrminfive
- License: mit
- Created: 2018-06-05T03:03:55.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-07T09:31:55.000Z (almost 8 years ago)
- Last Synced: 2025-01-14T10:58:14.886Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 131 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# wxapp-sketchpad
微信小程序快速绘画工具
## 使用方式：
``` html
```
``` js
import {
Scene,
Element,
Label,
Background
} from 'sketchpad';
Page({
data: {
width: null,
height: null
},
render() {
this.canvasScene = new Scene('m-canvas', {
context: this,
original: [750, 1334],
initRect: rect => {
this.setData({
width: rect.width + 'px',
height: rect.height + 'px'
});
}
});
wx.showLoading();
this.canvasScene
.append(new Background({
color: '#dddddd',
image: 'http://img3.redocn.com/tupian/20150106/aixinxiangkuang_3797284.jpg'
}))
.append(new Label({
text: '这是我的内容啊这是我的',
color: '#aad375',
fontSize: 28,
maxWidth: '100%',
zIndex: 2
}))
.append(new Element({
left: 100,
top: 100,
width: '50%',
height: 180 * 1.3,
text: '这是自定义节点啊',
fontSize: 60,
border: '10px red',
color: 'blue',
backgroundColor: '#dddddd',
backgroundImage: 'http://img.zcool.cn/community/01ca8c573c04b832f8757cb97b2444.jpg@1280w_1l_2o_100sh.jpg',
textAlign: 'center',
textVerticalAlign: 'middle',
padding: [10, 20, 10, 20]
}))
.draw()
.then(() => {
wx.hideLoading();
});
}
})
```
## 预览
``` shell
git clone 当前项目
npm install && npm run dev
// 使用微信开发者工具打开 `example` 文件夹
```
具体 api 接口参见源码注释