devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序实现在线画板_微信出题小程序样式

作者：代码探险家 | 2024-08-09 20:38:15

赞

踩

微信出题小程序样式

本文实例为大家分享了微信小程序实现手指触摸画板的具体代码，供大家参考，具体内容如下

1、WXML 代码

  1. <!--index.wxml-->
  2. <!-- 弹出框 -->
  3. <view class='alert' hidden='{{alertShow}}' bindtap="alertClick">
  4. <!-- catchtap 阻止冒泡事件 -->
  5.   <view class="alert-main" catchtap='qwe'>
  6.     <form bindsubmit='fabuProject'>
  7.       <view class="timu qwe">
  8.         <view>题目：</view>
  9.         <input type="text" name="name" placeholder='1-6个字（例：中国）'/>
  10.       </view>
  11.       <view class="tishi qwe">
  12.         <view>提示：</view>
  13.         <input type="text" name="notice" placeholder='1-10个字（例：国家）'/>
  14.       </view>
  15.       <view class='form-btn qwe'>
  16.         <button form-type='submit'>提交</button>
  17.         <button form-type='reset'>重置</button>
  18.       </view>
  19.     </form> 
  20.   </view>
  21. </view>
  22. <!-- 内容主题 -->
  23. <view class="container">
  24.   <!-- 头部 -->
  25.   <view class="header d-f w100p">
  26.     <view class="left d-f">题目《 {{project.name}} 》
  27.     <image class="icon" bindtap="getProject" src="../../imgs/icon_refresh.png" />
  28.     </view>
  29.     <view class="right d-f" bindtap="diy">自己出题<image class="icon" src="../../imgs/icon_topic.png" /></view>
  30.   </view>
  31.   <!-- 绘图区域 -->
  32.   <view class="canvas">
  33.     <canvas hidden='{{!alertShow}}' class="mycanvas bxz-bb w100p" canvas-id="canvas" bindtouchstart="canvasStart" bindtouchmove='canvasMove' bindtouchend='canvasEnd'></canvas>
  34.   </view>
  35.   <!-- 操作面板 -->
  36.   <view class="tool_bar d-f w100p bxz-bb">
  37.     <!-- <view class="cancel"><image class="icon" src="../../imgs/icon_cancel.png" />上一步</view> -->
  38.     <!-- chengCancel 点击橡皮擦 -->
  39.     <view class="cancel" bindtap="chengCancel"><image class="icon" src="../../imgs/icon_eraser.png" />橡皮擦</view>
  40.     <view class="cancel" bindtap="clearCanvas"><image class="icon" src="../../imgs/icon_del.png" />清除</view>
  41.   </view>
  42.   <!-- 粗细和颜色 -->
  43.   <view class="set_bar bxz-bb w100p">
  44.     <!-- 粗细 -->
  45.     <view class="linewidth_bar d-f">
  46.       <text class="title">粗细</text>
  47.       <view class="right_demo d-f">
  48.       <!-- 判断橡皮擦是否被选中 -->
  49.         <block wx:if="{{cancelChange}}">
  50.           <view wx:for="{{linewidth}}" class="linewidth_demo bdrs50p {{index == currentLinewidth ?'active':''}}" bindtap="changeLineWidth" id="{{index}}" style="width:{{item*2}}rpx;height:{{item*2}}rpx;background:#fff"></view>
  51.         </block>
  52.         <block wx:else>
  53.           <view wx:for="{{linewidth}}" class="linewidth_demo bdrs50p {{index == currentLinewidth ?'active':''}}" bindtap="changeLineWidth" id="{{index}}" style="width:{{item*2}}rpx;height:{{item*2}}rpx;background:{{color[currentColor]}};"></view>
  54.         </block>
  55.       </view>
  56.     </view>
  57.     <!-- 颜色 -->
  58.     <view class="color_bar d-f">
  59.       <text class="title">颜色</text>
  60.       <view class="right_demo d-f">
  61.         <!-- wx:for 遍历颜色 -->
  62.         <!-- index 每一个颜色的编号 -->
  63.         <!-- 三元运算符 判断那个颜色是被选中的 -->
  64.  
  65.         <block wx:if="{{cancelChange}}">
  66.           <i class="iconfont icon-huabi" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i>
  67.         </block>
  68.         <block wx:else>
  69.           <i class="iconfont icon-huabi {{index == currentColor ?'active':''}}" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i>
  70.         </block>
  71.       </view>
  72.     </view>
  73.   </view>
  74.  
  75.   <view class="btn">
  76.     <button bindtap="fabu">发布作品</button>
  77.   </view> 
  78. </view>

2、WXSS 代码

  1. @import 'iconfont.wxss';
  2.  
  3. .container {
  4.   padding: 0 24rpx;
  5.   background: #eaeaea;
  6. }
  7. .bxz-bb { box-sizing: border-box; }
  8. .d-f { display: flex; }
  9. .d-b { display: block; }
  10. .w100p { width: 96%;margin:0 auto }
  11. .bdrs50p { border-radius: 50%; }
  12. .container {
  13.   display: flex;
  14.   flex-direction: column;
  15.   align-items: center;
  16.   height: 100vh;
  17.   padding: 0;
  18.   box-sizing: border-box;
  19. } 
  20.  
  21.  
  22. .container > .header {
  23.   justify-content: space-between;
  24.   padding-top: 40rpx;
  25.   padding-bottom: 32rpx;
  26.   font-size: 30rpx;
  27. }
  28.  
  29. .container > .header .left {
  30.   align-items: center;
  31.   color: #e22;
  32. }
  33.  
  34. .container .left .icon {
  35.   width: 44rpx;
  36.   height: 44rpx;
  37. }
  38.  
  39. .container > .header .right {
  40.   align-items: center;
  41.   color: #333;
  42. }
  43.  
  44. .container .right .icon {
  45.   width: 40rpx;
  46.   height: 40rpx;
  47.   padding-left: 18rpx;
  48. }
  49.  
  50. .mycanvas {
  51.   height: 700rpx;
  52.   margin-bottom: 22rpx;
  53.   background: #fff;
  54.   box-shadow: 0 0 10rpx #ccc;
  55. }
  56. .canvas{
  57.   height: 700rpx;
  58.   margin-bottom: 22rpx;
  59.   width:100%;  
  60. }
  61. .tool_bar {
  62.   justify-content: space-between;
  63.   padding: 0 12rpx;
  64.   margin-bottom: 30rpx;
  65.   font-size: 28rpx;
  66. }
  67.  
  68. .tool_bar .icon {
  69.   width: 40rpx;
  70.   height: 40rpx;
  71.   padding-right: 8rpx;
  72.   vertical-align: bottom;
  73. }
  74. .set_bar { padding: 0 64rpx; }
  75. .set_bar .title {
  76.   padding-right: 30rpx;
  77. }
  78. .set_bar .right_demo { align-items: center; }
  79. .color_bar .right_demo {
  80.   justify-content: space-between;
  81.   flex: 1;
  82. }
  83. .linewidth_bar .linewidth_demo {
  84.   border: 5rpx solid transparent;
  85.   margin: 0 22rpx;
  86. }
  87. .linewidth_bar .linewidth_demo.active { border-color: #fff;box-shadow: 0rpx 0rpx 10rpx orange }
  88. .icon-huabi { font-size: 44rpx; }
  89. .icon-huabi.active { font-size: 64rpx; }
  90. .btn{
  91.   margin-top:20rpx;
  92. }
  93. .btn button{
  94.   border:0rpx;
  95.   border-radius: 10rpx;
  96.   height:80rpx;
  97.   line-height: 80rpx;
  98.   background: orange;
  99.   color:#fff;
  100. }
  101.  
  102. /* 弹出框 */
  103. .alert{
  104.   width:100%;
  105.   height:100vh;
  106.   background:rgba(0,0,0,0.3);
  107.   position: fixed;
  108.   left:0;
  109.   top:100rpx;
  110.   z-index:999;
  111. }
  112. .alert-main{
  113.   width:95%;
  114.   height:400rpx;
  115.   position: absolute;
  116.   left:0;
  117.   top:20rpx;
  118.   right:0;
  119.   margin:auto;
  120.   background:#fff;
  121. }
  122. .alert-main .qwe{
  123.   display: flex;
  124.   height:100rpx;
  125.   margin:0 auto;
  126.   margin-top:20rpx;
  127.   line-height: 100rpx;
  128.   width:96%;
  129. }
  130. .alert-main .tishi{
  131. }
  132. .alert-main .form-btn{
  133. }
  134. .alert-main input{
  135.   width:500rpx;
  136.   height:80rpx;
  137.   background: #fff;
  138.   margin: 10rpx 0;
  139.   border:1px solid #7d7d7d;
  140.   border-radius: 5rpx;
  141. }
  142. .alert-main button{
  143.   width:200rpx;
  144.   height:50rpx;
  145.   text-align: center;
  146.   line-height: 50rpx;
  147.   margin-top:25rpx;
  148.   margin-bottom:25rpx;
  149. }

3、JS 代码

  1. let app = getApp();
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     // 弹框是否显示
  9.     alertShow:true,
  10.     // 初始化标题
  11.     project: '太阳',
  12.     // 绘图线的粗细
  13.     linewidth: [2, 3, 4, 5,6,7,8,9],
  14.     // 当前默认的粗细
  15.     currentLinewidth: 0,
  16.     // 绘图的颜色
  17.     color: ['#da1c34', '#8a3022', '#ffc3b0', '#ffa300', '#66b502', '#148bfd', '#000', '#9700c2', '#8a8989'],
  18.     // 当前默认的颜色
  19.     currentColor: 0,
  20.     // 橡皮擦是否被点击
  21.     cancelChange:false,
  22.     // 判断是否开始绘画
  23.     isStart:false
  24.   },
  25.   // 点击自己出题
  26.   diy:function(){
  27.     this.setData({
  28.       "alertShow":false
  29.     });
  30.   },
  31.   // 点击弹框的灰色区域
  32.   alertClick:function(){
  33.     this.setData({
  34.       "alertShow": true
  35.     });
  36.   },
  37.   // 改变颜色的事件
  38.   changeColor:function(e){
  39.     // 获取点击画笔的编号
  40.     let colorIndex = e.currentTarget.id;
  41.     // 修改默认的颜色编号
  42.     this.setData({
  43.       cancelChange: false,
  44.       currentColor: colorIndex
  45.     });
  46.     // 设置颜色
  47.     this.mycanvas.setStrokeStyle(this.data.color[this.data.currentColor]);
  48.   },
  49.   // 改变线的粗细
  50.   changeLineWidth:function(e){
  51.     // 获取点击粗细的编号
  52.     let widthIndex = e.currentTarget.id;
  53.     // 修改当前的粗细
  54.     this.setData({ currentLinewidth:widthIndex});
  55.     // 设置粗细
  56.     this.mycanvas.setLineWidth(this.data.linewidth[this.data.currentLinewidth]);
  57.   },
  58.  
  59.   // 点击橡皮擦
  60.  
  61.   chengCancel:function(){
  62.     // 设置橡皮擦被选中
  63.     this.setData({
  64.       cancelChange:true
  65.     });
  66.     // 画笔颜色设置成白色
  67.     this.mycanvas.setStrokeStyle("#fff");
  68.   },
  69.   /**
  70.    * 生命周期函数--监听页面加载
  71.    */
  72.   onLoad: function (options) {
  73.     // 获取题目的
  74.   
  75.   },
  76.  
  77.   /**
  78.    * 生命周期函数--监听页面初次渲染完成
  79.    */
  80.   onReady: function () {
  81.   },
  82.  
  83.   /**
  84.    * 生命周期函数--监听页面显示
  85.    */
  86.   // 获取标题的函数
  87.  
  88.   onShow: function () {
  89.     
  90.  
  91.     let data = this.data;
  92.  
  93.     // 创建画板
  94.     this.mycanvas = wx.createCanvasContext("canvas");
  95.     // 设置线的样式
  96.     this.mycanvas.setLineCap("round");
  97.     this.mycanvas.setLineJoin("round");
  98.     // 初始化颜色
  99.     this.mycanvas.setStrokeStyle(data.color[data.currentColor]);
  100.     // 初始化粗细
  101.     this.mycanvas.setLineWidth(data.linewidth[data.currentLinewidth]);
  102.  
  103.   },
  104.   // 绘画开始
  105.   canvasStart:function(e){
  106.     // 获取触摸点的x，y位置
  107.     let x = e.touches[0].x;
  108.     let y = e.touches[0].y;
  109.  
  110.     // 将画笔移动到指定坐标
  111.     this.mycanvas.moveTo(x,y);
  112.   },
  113.   // 绘画进行中
  114.   canvasMove:function(e){
  115.     // 获取移动过程中的x,y位置
  116.     let x = e.touches[0].x;
  117.     let y = e.touches[0].y;
  118.     // 指定移动的位置
  119.     this.mycanvas.lineTo(x,y);
  120.     // 开始画线
  121.     this.mycanvas.stroke();
  122.     // 将绘画绘制到canvas
  123.     this.mycanvas.draw(true);
  124.     // 绘制完成，将起始点进行移动
  125.     this.mycanvas.moveTo(x,y);
  126.  
  127.  
  128.   },
  129.   // 绘画结束
  130.   canvasEnd:function(){
  131.     // 判断是否开始绘画
  132.     this.setData({
  133.       isStart:true
  134.     });
  135.  
  136.   },
  137.   // 清除画板
  138.   clearCanvas:function(){
  139.     // 清除区域
  140.     this.mycanvas.clearRect(0,0,400,400);
  141.     this.mycanvas.draw(true);
  142.   },
  143.  
  144. })

以上是本文全部内容，本文为小程序你猜我画部分功能，如需了解全部请留言。

了解更多，可以查看相关课程

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/955065
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号