微信小程序项目实例——我有一支画笔(画画)

简介: 微信小程序项目实例——我有一支画笔(画画)

微信小程序项目实例——我有一支画笔(画画)

文章目录

项目代码见文字底部,点赞关注有惊喜


一、项目展示

我有一支画笔是一款绘图小程序

用户可以在白板上自由画画,也可以选择一张本地的照片,在照片上画画

用户可以自由修改画笔宽度、颜色,同时绘画可以保存到本地


二、首页

首页由两张图片构成

代表自由绘图和照片绘图两个功能

用户点击选择不同功能

<!--index.wxml-->
<view class="painting" bindtap="toPainting">
  <image src="../../images/paint3.png" mode="aspectFit"/>
</view>
<view class="painting2" bindtap="toPainting2">
  <image src="../../images/paint2.png" mode="aspectFit"/>
</view>
/**index.wxss**/
page{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.painting{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  width: 260rpx;
  height: 260rpx;
  /* background-color: red; */
}
.painting2{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  width: 260rpx;
  height: 260rpx;
  /* background-color: red; */
}

首页效果如下:


三、自由绘图

用户可以在空白页面上进行绘图

用户可以调整画笔粗细,画笔颜色

也可以使用橡皮擦来擦除

最后可以将画好的图保存到本地

下面仅展示UI界面代码

<!--painting.wxml-->
<canvas canvas-id="myCanvas" style="height: calc(100vh - {{canvasHeight}}px)" disable-scroll="true" bindtouchend="toucheEnd" bindtouchstart="touchStart" bindtouchmove="touchMove"/>
<view class="bottom">
  <block wx:for="{{btnInfo}}" wx:key="{{index}}">
    <view class="list-item" data-type="{{item.type}}" style="background: {{item.background}}" bindtap="tapBtn"></view>
  </block>
</view>
<view class="choose-box" wx:if="{{width}}">
<view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view>
  <slider min="1" max="50" step="1" show-value="true" value="{{w}}" bindchange="changeWidth"/>
</view>
<view class="choose-box" wx:if="{{color}}">
  <view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view>
  <slider min="0" max="255" step="1" show-value="true" activeColor="red" value="{{r}}" data-color="r" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{{g}}" data-color="g" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{{b}}" data-color="b" bindchange="changeColor"/>
</view>
<view class="choose-box-flex" wx:if="{{clear}}">
  <view class="choose-item" bindtap="chooseEraser">
    <view class="choose-img" style='background: url("https://s1.ax1x.com/2022/05/25/XkppBF.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px; border: {{eraser ? "2px solid red" : "2px solid transparent"}}'></view>
    <view>橡皮擦</view>
  </view>
  <view class="choose-item" bindtap="clearCanvas">
    <view class="choose-img" style='background: url("https://s1.ax1x.com/2022/05/25/XkpDCn.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px;'></view>
    <view>清空</view>
  </view>
</view>
/* painting.wxss */
page {
  background: rgba(153, 204, 255, 0.1);
}
canvas {
  width: 100vw;
}
.bottom {
  width: 100vw;
  height: 50px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}
.list-item {
  width: 30px;
  height: 30px;
  margin: 10px 0;
  border-radius: 50%;
}
.choose-box {
  width: 100vw;
  position: absolute;
  bottom: 50px;
}
.color-box {
  width: 50vw;
  margin: 20px auto;
}
slider {
  margin: 20px 30px;
}
.choose-box-flex {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  position: absolute;
  bottom: 50px;
  font-size: 16px;
  color: #666;
  text-align: center;
}
.choose-img {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-radius: 50%;
  background: white;
}

下面我将给大家演示一下我的室友!!!

(喜欢我室友的可以私信我,送微信号!!!)


四、照片绘图

用户可以选择一张照片

在照片的基础上进行绘画

其余功能和自由绘画一致

下面仅展示UI界面代码

<!--painting-2.wxml-->
<canvas canvas-id="myCanvas" disable-scroll="true" bindtouchstart="touchStart"
  bindtouchmove="touchMove" bindtouchend="touchEnd" wx:if="{{hasChoosedImg}}"
  style="height: {{(canvasHeightLen == 0) ? canvasHeight : canvasHeightLen}}px; width: {{canvasWidth}}px;" 
/>
<view class="failText" wx:if="{{!hasChoosedImg}}" click="">没有选择照片,点击重新选择</view>
<view class="bottom">
  <block wx:for="{{btnInfo}}" wx:key="{{index}}">
    <view class="list-item" data-type="{{item.type}}" style="background: {{item.background}}" bindtap="tapBtn"></view>
  </block>
</view>
<view class="choose-box" wx:if="{{width}}">
<view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view>
  <slider min="1" max="50" step="1" show-value="true" value="{{w}}" bindchange="changeWidth"/>
</view>
<view class="choose-box" wx:if="{{color}}">
  <view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view>
  <slider min="0" max="255" step="1" show-value="true" activeColor="red" value="{{r}}" data-color="r" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{{g}}" data-color="g" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{{b}}" data-color="b" bindchange="changeColor"/>
</view>
/* painting-2.wxss */
page {
  background: rgba(153, 204, 255, 0.1);
}
.failText {
  margin-top: 100px;
  text-align: center;
  color: #888;
}
.bottom {
  width: 100vw;
  height: 50px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}
.list-item {
  width: 30px;
  height: 30px;
  margin: 10px 0;
  border-radius: 50%;
}
.choose-box {
  width: 100vw;
  position: absolute;
  bottom: 50px;
}
.color-box {
  width: 50vw;
  margin: 20px auto;
}
slider {
  margin: 20px 30px;
}
.choose-box-flex {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  position: absolute;
  bottom: 50px;
  font-size: 16px;
  color: #666;
  text-align: center;
}
.choose-img {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-radius: 50%;
  background: white;
}

下面我将画我的室友2号!!

我的室友2号是校草!!!

中意的请私信我发他微信号!


文末

具体的介绍就到这里了

小程序有时候会卡顿一下但是不多

有兴趣的同学可以继续研究

代码放到下面链接里了

点击下载 小程序

相关文章
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
349 3
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
46 1
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
116 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
2月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
38 0
|
4月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
96 1
|
4月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
4月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
4月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
4月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试