当前位置:   article > 正文

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

微信出题小程序样式

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

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. <block wx:if="{{cancelChange}}">
  65. <i class="iconfont icon-huabi" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i>
  66. </block>
  67. <block wx:else>
  68. <i class="iconfont icon-huabi {{index == currentColor ?'active':''}}" wx:for="{{color}}" style="color:{{item}};" id="{{index}}" bindtap="changeColor"></i>
  69. </block>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="btn">
  74. <button bindtap="fabu">发布作品</button>
  75. </view>
  76. </view>

2、WXSS 代码

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

3、JS 代码

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

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

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

 

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

闽ICP备14008679号