All Projects → jsososo → Wx App Painting

jsososo / Wx App Painting

Licence: mit
微信小程序:涂鸦 (涂鸦、涂鸦照片、像素涂鸦)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Wx App Painting

Planmaster
套餐助手:手机套餐对比选购小程序
Stars: ✭ 487 (+396.94%)
Mutual labels:  wechat-mini-program, wechat-app, weixin
Weixin Java Miniapp Demo
基于Spring Boot 和 WxJava 实现的微信小程序Java后端Demo
Stars: ✭ 779 (+694.9%)
Mutual labels:  wechat-mini-program, wechat-app, weixin
scrum-planning-poker
Please feel FREE to try it and give feedback by searching Scrum敏捷估算 in WeChat mini program.
Stars: ✭ 30 (-69.39%)
Mutual labels:  weixin, wechat-app, wechat-mini-program
Wepy Mall
微信小程序--基于wepy 商城(微店)微信小程序 欢迎学习交流
Stars: ✭ 3,224 (+3189.8%)
Mutual labels:  wechat-mini-program, wechat-app, weixin
Python Weixin
微信(weixin|wechat) Python SDK 支持开放平台和公众平台 支持微信小程序云开发
Stars: ✭ 746 (+661.22%)
Mutual labels:  wechat-app, weixin
Quietweather
☀️ Develop a weather wechat mini program application in two days - 两天撸一个天气应用微信小程序
Stars: ✭ 677 (+590.82%)
Mutual labels:  wechat-mini-program, weixin
Supermarketmini
基于wepy2.x 仿苏宁小店小程序,API采用go开发(已开源),项目正在开发中,欢迎加群:160301726
Stars: ✭ 73 (-25.51%)
Mutual labels:  wechat-mini-program, wechat-app
Masterwechatapp
『微信小程序』优秀教程、轮子、开源项目 资源汇总
Stars: ✭ 826 (+742.86%)
Mutual labels:  wechat-mini-program, wechat-app
Alaweb
一套 Vue 代码,多端可用(H5、小程序、苹果App、安卓App、头条等)。系统含150+页面,200+组件(5端通用),30+元件(每个终端独立完成)
Stars: ✭ 837 (+754.08%)
Mutual labels:  wechat-mini-program, wechat-app
Taro scaffold
基于 Taro / dva / redux-saga / react 的微信小程序脚手架,同时集成了 sprite 。
Stars: ✭ 24 (-75.51%)
Mutual labels:  wechat-mini-program, weixin
Weixin Minigame Tutorial
Flappy Bird adaptation on Wechat Minigame using PhaserJS + English Wechat Minigames Tutorial
Stars: ✭ 56 (-42.86%)
Mutual labels:  wechat-mini-program, weixin
Agora Miniapp Tutorial
Hello world for Agora SDK running in https://en.wikipedia.org/wiki/WeChat#WeChat_Mini_Program
Stars: ✭ 75 (-23.47%)
Mutual labels:  wechat-mini-program, weixin
Wechat Miniprogram Examples
WeChat mini program examples. 微信小程序示例
Stars: ✭ 634 (+546.94%)
Mutual labels:  wechat-app, weixin
Juejin
💰 Unofficial JueJin wechat mini program application - 掘金非官方微信小程序
Stars: ✭ 771 (+686.73%)
Mutual labels:  wechat-mini-program, weixin
Scuplus Wechat
We川大小程序[scuplus] 使用wepy开发的完善的校园综合小程序, 40+页面,前后端开源,包括成绩、课表、失物招领、图书馆、新闻资讯等等常见校园场景功能
Stars: ✭ 545 (+456.12%)
Mutual labels:  wechat-mini-program, wechat-app
Mpvue Animated Number
微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue
Stars: ✭ 33 (-66.33%)
Mutual labels:  wechat-mini-program, wechat-app
Mina Webpack
🍱 Mina single-file-component meets Webpack
Stars: ✭ 77 (-21.43%)
Mutual labels:  wechat-mini-program, weixin
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+1076.53%)
Mutual labels:  wechat-mini-program, weixin
Wechat Mini Shop
微信小程序商城,微信小程序微店,接口基于FaShop
Stars: ✭ 328 (+234.69%)
Mutual labels:  wechat-mini-program, wechat-app
Hioshop Admin
海风小店,开源商城,微信小程序商城管理后台,后台管理,VUE
Stars: ✭ 452 (+361.22%)
Mutual labels:  wechat-mini-program, wechat-app

微信小程序:涂鸦

涂鸦小程序,可以在白板上画画,也可以选择涂鸦照片。可以自由修改画笔宽度、颜色。画画代码位于painting、涂鸦照片代码位于painting2

可以通过搜索 soso涂鸦 或者扫面下面的二维码体验效果。 soso 涂鸦

由于考虑到canvas在小程序中层级最高,因此采用动态调整高度的方法显示底部调整栏。

为了解决涂鸦照片的橡皮擦不会破坏原图,采用先为canvas设置background,在保存时先保存绘制的效果,然后清空canvas先绘制原图,再绘制手绘结果图。(利用canvas输出图片背景可以透明的特性)

版本更新

  • v1.2.3 采用曲线绘制,解决折线问题

  • v1.2.2 新增荧光涂鸦(代码与普通涂鸦为同一页,入口页通过参数 pageType 进行区分, 主要实现代码参考小程序apisetShadow

  • v1.2 新增像素涂鸦(根据原来的普通涂鸦改写而成,将lineTo改为fillRect)  于18.2.24提交微信审核

  • v1.1 修改图片来源路径,优化无权限提醒

兼容性/性能问题:

1、安卓下涂鸦稍微多一点就会存在卡顿现象,估计是由安卓端使用qq浏览器的x5内核所致,ios上表现正常。(1.2.3,采用曲线绘制的方法已解决)

2、在开发者工具中动态修改画布高度的功能有问题,安卓、ios表现正常。

3、开发者工具中修改完画笔宽度、颜色后会导致之前画的部分缺失,手机端正常。

4、像素涂鸦中过快的移动可能会导致中间部分的涂鸦缺失,目前已上线的其他类似小程序中也存在同样问题 (18.2.24)

未来版本预计添加功能

  • 新增黑板模式,模仿在黑板上写字

感觉模仿粉笔的效果可能有点麻烦,想办法中

  • 可以调整普通涂鸦、荧光涂鸦、像素涂鸦的画板颜色

具体实现打算同图片涂鸦

  • 半透明画笔

1、 半透明在自由绘画时效果不好

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].