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

news2024/11/15 12:16:31

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

文章目录

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

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

一、项目展示

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

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


二、首页

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

<!--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.coloradmin.cn/o/406130.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JS中let用法

JS中let用法

JS中let用法 基本用法 Let命令用来声明变量。它的用法类似于var&#xff0c;但是所声明的变量。只在let命令所在的代码块内有效。 上面代码块中&#xff0c;分别用let和var声明了两个变量。然后在代码块之外调用这两个变量&#xff0c;结果let声明的变量报错&#xff0c;var声…
阅读更多...
蓝桥杯刷题冲刺 | 倒计时28天

蓝桥杯刷题冲刺 | 倒计时28天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.卡片2.数字三角形3.购物单4.回文日期1.卡片 题目 链接&#xff1a; 卡片 - 蓝桥云课 (lanqiao…
阅读更多...
echarts 柱状堆叠图（图例和x轴都是动态的）

echarts 柱状堆叠图（图例和x轴都是动态的）

问题描述&#xff1a; echarts柱状堆叠图&#xff0c;是很常用的图表&#xff0c;官网的例子很简单 。图例&#xff08;legend&#xff09;&#xff0c;x轴&#xff08;xAxis&#xff09;都是写死的。但是一般实际应用中都是 动态的。下面就举个例子&#xff0c;实现图例和x轴…
阅读更多...
uniapp开发微信小程序自定义顶部导航栏

uniapp开发微信小程序自定义顶部导航栏

自定义导航栏渐变色&#xff0c;先上效果 使用uniapp开发小程序&#xff0c;在不同界面&#xff0c;要去对页面进行修改顶部导航栏。 比如说要去定义导航栏的背景颜色&#xff0c;常规的去定义导航栏背景颜色 全局定义导航栏 "window": {"navigationBarBackg…
阅读更多...
猿创征文｜一名大三学生的前端学习之路(真情流露)

猿创征文｜一名大三学生的前端学习之路(真情流露)

✅ 作者简介&#xff1a;一名大三的大学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&#xf…
阅读更多...
vue3中使用axios

vue3中使用axios

vue3中使用axios 1.axios在vue3.x中的基础入门使用 在不涉及使用axios进行请求拦截以及响应拦截的场景下&#xff0c;axios的使用可以简化为以下步骤。 step1. 使用npm安装axios npm install axiosstep2. 我们将要使用的axios实例单独编写成一个js文件&#xff0c;文件夹可以建…
阅读更多...
猿创征文｜【C++游戏引擎Easy2D】学C++还不会绘制一个简单的二维图形?一篇文章教会你

猿创征文｜【C++游戏引擎Easy2D】学C++还不会绘制一个简单的二维图形?一篇文章教会你

&#x1f9db;‍♂️iecne个人主页&#xff1a;&#xff1a;iecne的学习日志 &#x1f4a1;每天关注iecne的作品&#xff0c;一起进步 &#x1f4aa;学C必看iecne 本文专栏&#xff1a;【C游戏引擎】. &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; ✨前…
阅读更多...
【Vue组件间通信】 全局事件总线、订阅与发布

【Vue组件间通信】 全局事件总线、订阅与发布

目录 一、全局事件总线 作用 安装 组件使用案例 案例分析 组件一&#xff08;小明&#xff09; 组件二&#xff08;小红&#xff09; 效果展示 二、订阅与发布 安装 组件使用案例 案例分析 组件一&#xff08;小明&#xff09; 组件二&#xff08;小红&#xff…
阅读更多...
Python爬虫之Web自动化测试工具SeleniumChrome handless

Python爬虫之Web自动化测试工具SeleniumChrome handless

​ ​ 作者 : SYFStrive 博客首页 : HomePage &#x1f967; 上一篇续文传送门 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;如果觉得文章对你有帮助可以点点关注…
阅读更多...
Python流星雨代码

Python流星雨代码

前言 用Python画场流星雨看看&#xff0c;源码见文末公众号哈。 流星类 def __init__(self): self.r ra.randint(50,100) self.t ra.randint(1,3) self.x ra.randint(-2000,1000) #流星的横坐标 self.y ra.randint(0,500) #流星…
阅读更多...
出道即封神的ChatGPT，现在怎么样了？

出道即封神的ChatGPT，现在怎么样了？

从互联网的普及到智能手机&#xff0c;都让广袤的世界触手而及&#xff0c;如今身在浪潮中的我们&#xff0c;已深知其力。前阵子爆火的ChatGPT&#xff0c;不少人保持观望态度。现如今&#xff0c;国内关于ChatGPT的各大社群讨论&#xff0c;似乎沉寂了不少&#xff0c;现在怎…
阅读更多...
Web自动化测试怎么做？Web自动化测试的详细流程和步骤

Web自动化测试怎么做？Web自动化测试的详细流程和步骤

一、什么是web自动化测试 自动化&#xff08;Automation&#xff09;是指机器设备、系统或过程&#xff08;生产、管理过程&#xff09;在没有人或较少人的直接参与下&#xff0c;按照人的要求&#xff0c;经过自动检测、信息处理、分析判断、操纵控制&#xff0c;实现预期的目…
阅读更多...
使用node命令提示: ‘node‘ 不是内部或外部命令，也不是可运行的程序

使用node命令提示: ‘node‘ 不是内部或外部命令，也不是可运行的程序

报错&#xff1a;使用node命令提示: ‘node‘ 不是内部或外部命令&#xff0c;也不是可运行的程序 原因&#xff1a;没安装node.js 或者 没配置好环境变量 情况1&#xff1a;安装node.js&#xff1a; 在官网下载 .msi 文件&#xff1a;Node.js 中文网 (nodejs.cn) 步骤 1 : 下…
阅读更多...
使用Freemarker来生成pdf文件

使用Freemarker来生成pdf文件

2022-09-02 今天接到一个生成pdf的任务&#xff0c;并且web端要能下载&#xff1b;在网上也找了许多的工具如&#xff1a;itext等&#xff0c;感觉挺复杂的没那么好用&#xff0c;然后想起了之前使用Freemarker来生成world文档&#xff0c;挺好用的&#xff0c;然后调查发现也能…
阅读更多...
【JavaWeb】重新认识 Servlet 的初始化 [ 回顾 Servlet ]

【JavaWeb】重新认识 Servlet 的初始化 [ 回顾 Servlet ]

&#x1f947;作者 .29. 的✔博客主页✔ &#x1f947;记录JavaWeb学习的专栏&#xff1a;Web专栏 &#x1f947;向前走&#xff0c;不要回头。 您的点赞&#xff0c;收藏以及关注是对作者最大的鼓励喔 ~~ 重新认识Servlet的初始化一、回顾Servlet1.什么是Servlet2.Servlet规范…
阅读更多...
设置背景图片大小的方法

设置背景图片大小的方法

背景图片大小设置 语法&#xff1a;background-size:宽度 高度&#xff1b;作用&#xff1a;设置背景图片大小取值&#xff1a; 取值场景数字px简单方便&#xff0c;常用百分比相当于当前盒子自身的宽高百分比contain包含&#xff0c;将背景图片等比例缩放&#xff0c;直到不…
阅读更多...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）

Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）

Vue 之 echarts 图表数据可视化的基础使用&#xff08;简单绘制各种图表、地图&#xff09; 目录 Vue 之 echarts 图表数据可视化的基础使用&#xff08;简单绘制各种图表、地图&#xff09; 一、简单介绍 二、环境搭建 三、使用 echarts 四、自动缩放 echarts 五、数据更…
阅读更多...
【网络通信】websocket如何断线重连

【网络通信】websocket如何断线重连

Vue <template><div><button click"sendDevName(xxxxxxxx)">发送</button>{{data}}</div> </template><script> export default {name: HelloWorld,data () {return {data: null}},// html加载完成后执行initWebSocket()…
阅读更多...
Vue3-路由跳转专题详细总结

Vue3-路由跳转专题详细总结

一、基本路由 点击事件似乎可以使用模板更改视图中的内容&#xff0c;个人认为与路由的区别是路由能使网页中的地址栏发生变化 请先阅读基础第二篇 1.创建一个组件,并引入 2.js文件中配置路径 //name相当于别名{path:/tabView,component:TabView},{name:myComPany,path:compan…
阅读更多...
Vue3项目搭建全过程

Vue3项目搭建全过程

目录 一、前言 二、搭建准备 三、搭建项目 四、启动项目 一、前言 在2020年的9月19日&#xff0c;万众期待的Vue3终于发布了正式版&#xff0c;命名为“One Piece”。 它也带来了很多新的特性&#xff1a;更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023