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

news/2024/7/20 3:36:59 标签: 微信小程序, 小程序, android, ios, 前端

小程序>微信小程序项目实例——我有一支画笔（画画）

文章目录

  • 小程序>微信小程序项目实例——我有一支画笔（画画）
  • 一、项目展示
  • 二、首页
  • 三、自由绘图
  • 四、照片绘图
  • 文末

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

一、项目展示

我有一支画笔是一款绘图小程序
用户可以在白板上自由画画，也可以选择一张本地的照片，在照片上画画
用户可以自由修改画笔宽度、颜色，同时绘画可以保存到本地

在这里插入图片描述
在这里插入图片描述


二、首页

首页由两张图片构成
代表自由绘图和照片绘图两个功能
用户点击选择不同功能

<!--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号是校草！！！
中意的请私信我发他微信号！

在这里插入图片描述


文末

具体的介绍就到这里了
小程序有时候会卡顿一下但是不多
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载 小程序

在这里插入图片描述


http://www.niftyadmin.cn/n/322214.html

相关文章

手写加强堆

手写加强堆

为什么要手写加强堆&#xff1f; 因为系统提供的堆(PriorityQueue)没有反向索引表&#xff0c;无法快速找到元素和删除某个元素&#xff0c;如果要实现的话查找的代价是O(N)&#xff0c;删除元素的代价是O(N*logN) 直接上代码&#xff0c;看不懂的私信我 package dataStruct…
阅读更多...
〖Python网络爬虫实战㉕〗- Ajax数据爬取之Ajax 案例实战

〖Python网络爬虫实战㉕〗- Ajax数据爬取之Ajax 案例实战

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付…
阅读更多...
[408] cache与主存的映射部分概念

[408] cache与主存的映射部分概念

涉及:基本理解 (防止误解映射规则cache 与 主存 的 "地址"构成主存块、cache块cache容量、cache的总容量有关计算的一些刁难名词不涉及:cache 与 主存映射规则基本理解:  首先我们需要明确的是我们之后针对的位数都是针对的 地址. 与实际的存储的 (01) 二进制无关. …
阅读更多...
通过注解获取和改变Bean的某变量值

通过注解获取和改变Bean的某变量值

Java有时需要通过自定义注解&#xff0c;获取某Bean的某变量的值&#xff0c;根据业务要求处理数据&#xff0c;然后再把新值设置回Bean的同一变量中&#xff0c;下面我们简要介绍一下&#xff0c;如何实现&#xff0c; 1&#xff0c;自定义注解的定义 import java.lang.anno…
阅读更多...
C语言设计扫雷（保姆级教学）

C语言设计扫雷（保姆级教学）

目录 引入&#xff1a; 游戏思路与逻辑&#xff1a; 游戏具体实现过程 整个程序的大体逻辑&#xff1a; 游戏的执行逻辑&#xff1a; game.h头文件内容&#xff1a; 具体函数讲解 menu&#xff08;菜单函数&#xff09; Initboard&#xff08;初始化棋盘函数&#xff09…
阅读更多...
实例35---字符串反转，如将字符串 “www.runoob.com“ 反转为 “moc.boonur.www“。

实例35---字符串反转，如将字符串 “www.runoob.com“ 反转为 “moc.boonur.www“。

文章目录 前言一、题目描述 二、题目分析 三、解题 1.解题方法一--- for循环来将字符的下标数值进行对每一个字符进行交换 ---程序运行代码 2.解题方法二------ 指针 ------ 程序运行代码(1)程序运行代码优化 总结 前言 本系列为C语言菜鸟100道基础经典例题详解刷题系列。点滴…
阅读更多...
什么是Java中的finalize()方法？它有什么作用

什么是Java中的finalize()方法？它有什么作用

在Java中&#xff0c;finalize()方法是一个由Object类定义的方法&#xff0c;用于在对象被垃圾回收器回收之前执行一些清理工作。finalize()方法是一个被保护的方法&#xff0c;可以被子类重写&#xff0c;但是通常情况下不需要显式地调用该方法。 finalize()方法的作用 在Jav…
阅读更多...
java中List与AbstractList

java中List与AbstractList

一、List 接口 List 接口继承了 Collection 接口&#xff0c;在 Collection 接口的基础上增加了一些方法。相对于 Collection 接口&#xff0c;我们可以很明显的看到&#xff0c;List 中增加了非常多根据下标操作集合的方法&#xff0c;我们可以简单粗暴的分辨一个方法的抽象方…
阅读更多...
最新文章

Copyright @ 2022~2023