├── app.wxss ├── components └── wx-scale │ ├── wx-scale.json │ ├── wx-scale.wxml │ ├── wx-scale.wxss │ └── wx-scale.js ├── pages └── canvas │ ├── canvas.json │ ├── canvas.wxss │ ├── canvas.js │ └── canvas.wxml ├── app.json ├── utils ├── util.js ├── shake.js └── wxdraw.min.js ├── app.js ├── project.config.json └── README.md /app.wxss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/wx-scale/wx-scale.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /pages/canvas/canvas.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "scale":"/components/wx-scale/wx-scale" 4 | } 5 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/canvas/canvas" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black" 10 | } 11 | } -------------------------------------------------------------------------------- /pages/canvas/canvas.wxss: -------------------------------------------------------------------------------- 1 | /* pages/canvas/canvas.wxss */ 2 | 3 | text { 4 | display: block; 5 | width: 100%; 6 | text-align: center; 7 | } 8 | 9 | .wrap { 10 | width: 90%; 11 | margin: 30rpx auto; 12 | border: 1px #ccc solid; 13 | } 14 | 15 | ::-webkit-scrollbar { 16 | width: 0; 17 | height: 0; 18 | color: transparent; 19 | display: none; 20 | } 21 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /pages/canvas/canvas.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | value: 0, 4 | val: 0, 5 | value2: 0, 6 | styles: [{ 7 | line: '#dbdbdb', 8 | bginner: '#fbfbfb', 9 | bgoutside: '#dbdbdb', 10 | lineSelect: '#52b8f5', 11 | font: '#404040' 12 | }, { 13 | line: '#dbdbdb', 14 | bginner: '#fbfbfb', 15 | bgoutside: '#dbdbdb', 16 | lineSelect: '#52b8f5', 17 | font: '#404040' 18 | }] 19 | }, 20 | bindvalue: function(e) { 21 | console.log(e.detail.value) 22 | this.setData({ 23 | value: e.detail.value 24 | }) 25 | }, 26 | bindvalue2: function(e) { 27 | // console.log(e) 28 | this.setData({ 29 | value2: e.detail.value 30 | }) 31 | }, 32 | assignment() { 33 | this.setData({ 34 | val: 50 35 | }) 36 | } 37 | }) -------------------------------------------------------------------------------- /components/wx-scale/wx-scale.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /components/wx-scale/wx-scale.wxss: -------------------------------------------------------------------------------- 1 | /* pages/test/test.wxss */ 2 | 3 | .wrapper { 4 | position: relative; 5 | width: 100%; 6 | box-sizing: border-box; 7 | background: #dbdbdb; 8 | } 9 | 10 | .zz { 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | width: 0px; 16 | /* height: 40px; */ 17 | margin: auto; 18 | border: 1px #52b8f5 solid; 19 | z-index: 999; 20 | } 21 | 22 | .scroll-wrapper { 23 | display: flex; 24 | } 25 | 26 | .scale-image { 27 | flex-shrink: 0; 28 | height: 70px; 29 | box-sizing: border-box; 30 | /* border: 1px red solid; */ 31 | } 32 | 33 | .scale-image image { 34 | width: 100%; 35 | height: 100%; 36 | } 37 | 38 | .seat { 39 | flex-shrink: 0; 40 | box-sizing: border-box; 41 | } 42 | 43 | .canvas { 44 | position: absolute; 45 | overflow: hidden; 46 | box-sizing: border-box; 47 | top: -100%; 48 | left: 0; 49 | z-index: -1; 50 | } 51 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null 38 | } 39 | }) -------------------------------------------------------------------------------- /pages/canvas/canvas.wxml: -------------------------------------------------------------------------------- 1 | 20 | 刻度{{value}} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 刻度{{value2}} 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.91", 12 | "appid": "wx9dcdaed5b2bc94ad", 13 | "projectname": "%E5%BE%AE%E4%BF%A1%E5%88%BB%E5%BA%A6%E5%B0%BA", 14 | "condition": { 15 | "search": { 16 | "current": -1, 17 | "list": [] 18 | }, 19 | "conversation": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "game": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "plugin": { 28 | "current": -1, 29 | "list": [] 30 | }, 31 | "miniprogram": { 32 | "current": 3, 33 | "list": [ 34 | { 35 | "id": 0, 36 | "name": "贺卡", 37 | "pathName": "pages/greetingCard/greetingCard", 38 | "query": "" 39 | }, 40 | { 41 | "id": 1, 42 | "name": "刻度", 43 | "pathName": "pages/test/test", 44 | "query": "" 45 | }, 46 | { 47 | "id": 2, 48 | "name": "翻页", 49 | "pathName": "pages/index/index", 50 | "query": "" 51 | }, 52 | { 53 | "id": -1, 54 | "name": "刻度", 55 | "pathName": "pages/canvas/canvas", 56 | "query": "" 57 | }, 58 | { 59 | "id": 4, 60 | "name": "测试", 61 | "pathName": "pages/mode/mode", 62 | "query": "" 63 | } 64 | ] 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /utils/shake.js: -------------------------------------------------------------------------------- 1 | //首先定义一下，全局变量 2 | let audioCtx = wx.createAudioContext('myAudio') 3 | let lastTime = 0;//此变量用来记录上次摇动的时间 4 | let x = 0, 5 | y = 0, 6 | z = 0, 7 | lastX = 0, 8 | lastY = 0, 9 | lastZ = 0;//此组变量分别记录对应x、y、z三轴的数值和上次的数值 10 | let shakeSpeed = 210;//设置阈值 11 | //编写摇一摇方法 12 | function shake(acceleration) { 13 | var nowTime = new Date().getTime();//记录当前时间 14 | //如果这次摇的时间距离上次摇的时间有一定间隔 才执行 15 | if (nowTime - lastTime > 100) { 16 | var diffTime = nowTime - lastTime;//记录时间段 17 | lastTime = nowTime;//记录本次摇动时间，为下次计算摇动时间做准备 18 | x = acceleration.x;//获取x轴数值，x轴为垂直于北轴，向东为正 19 | y = acceleration.y;//获取y轴数值，y轴向正北为正 20 | z = acceleration.z;//获取z轴数值，z轴垂直于地面，向上为正 21 | //计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度 22 | var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000; 23 | console.log(speed) 24 | if (speed > shakeSpeed) {//如果计算出来的速度超过了阈值，那么就算作用户成功摇一摇 25 | 26 | wx.stopAccelerometer() 27 | 28 | 29 | audioCtx.setSrc('http://123.207.0.183/application/images/s.mp3') 30 | audioCtx.play() 31 | wx.showLoading({ 32 | title: '寻找大神中...' 33 | }) 34 | 35 | setTimeout(function () { 36 | //console.log(e.data) 37 | audioCtx.setSrc('http://123.207.0.183/application/images/r.mp3') 38 | audioCtx.play() 39 | wx.hideLoading(); 40 | wx.startAccelerometer() 41 | 42 | 43 | }, 2000) 44 | 45 | 46 | } 47 | lastX = x;//赋值，为下一次计算做准备 48 | lastY = y;//赋值，为下一次计算做准备 49 | lastZ = z;//赋值，为下一次计算做准备 50 | } 51 | } 52 | 53 | module.exports = shake; 54 | //wx.startAccelerometer() -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 最近需要用到一个 刻度选择的一个组件，真是翻遍了全网，都没有找到合适的这种刻度尺的做法。索性，干脆自己开发一个吧。既满足自己的要求，也可以作为组件 供大家使用。 2 | 3 | `在使用过程中如果有什么问题的话，在最下面的 [问题答疑] 中寻找问题答案，或者直接发布评论吧，我看到的话会及时解决的` 4 | 5 | #### *1.先看一下效果* 6 | ###### 整体来说分为两个模式，一个整数模式，一个小数模式 7 | 8 | ![整数模式.gif](https://upload-images.jianshu.io/upload_images/4472817-951b5c7940e708f2.gif?imageMogr2/auto-orient/strip) 9 | 10 | ![小数模式.gif](https://upload-images.jianshu.io/upload_images/4472817-1cc9548b9129b817.gif?imageMogr2/auto-orient/strip) 11 | 12 | 13 | ###### 刻度除了上面最小单位的展示，还有两种展现方式，两个单位一格，五个单位一格，十个单位一个格 14 | 15 | ![不同刻度展示1.gif](https://upload-images.jianshu.io/upload_images/4472817-33649300fcee4d97.gif?imageMogr2/auto-orient/strip) 16 | 17 | ![不同刻度展示2.gif](https://upload-images.jianshu.io/upload_images/4472817-59342c7eafc887e6.gif?imageMogr2/auto-orient/strip) 18 | 19 | ###### 可以改变大小，颜色 20 | ![不同颜色大小展示.gif](https://upload-images.jianshu.io/upload_images/4472817-020ee844a974e97a.gif?imageMogr2/auto-orient/strip) 21 | 22 | 23 | #### *2.用起来* 24 | > 在使用之前，先说一下实现思路。首先利用的是canvas 通过传入的值，画出一张图片 。其实滚动的是这张图片 25 | 26 | 1.引入组件 `wx-scale` 假设您当前的目录跟我一样是这样 27 | ![image.png](https://upload-images.jianshu.io/upload_images/4472817-287676842ed1144d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 28 | 29 | 30 | 2.canvas.json 中声明使用组件 31 | ``` 32 | // canvas 33 | { 34 | "usingComponents": { 35 | "scale":"/components/wx-scale/wx-scale" 36 | } 37 | } 38 | ``` 39 | 40 | 41 | 3. canvas.wxml 中使用组件 42 | 43 | ```html 44 | 45 | 刻度{{value}} 46 | 47 | 48 | 49 | ``` 50 | 51 | 52 | 3.参数说明 53 | 54 | | 参数名 | 默认值 | 说明 | 55 | | :-: | :-----: | :----: | 56 | |`min` | 0 | 最小值 | 57 | |`max` | 100 | 最大值 | 58 | | `int` | true | 是否开启整数模式 ，false为小数模式 整数模式 step最小单位是 1 ，小数模式，step的最小单位是 0.1 | 59 | |`step ` | 1 | 步长，相对传入的值，每个格子代表几个值（值只能是能被10整除的 整数 ，1，2，5, 10） | 60 | |`fiexNum ` | 60 | 刻度尺左右余量 | 61 | |`single ` | 10 | 单个格子的实际长度（单位px）一般不建议修改 | 62 | |`h` | 80 | 自定义高度 | 63 | |`active ` | center | 自定义选中位置 （三个值 min, max ,center , 范围内合法数值） | 64 | |`styles ` | {...} | 自定义卡尺颜色 注意： 仅支持 #dbdbdb 或者red 这种 颜色 不支持简写 如 #333 | 65 | 66 | ``` 67 | // 参数styles 的默认值 68 | styles = { 69 | line: '#dbdbdb', // 刻度颜色 70 | bginner: '#fbfbfb', // 前景色颜色 71 | bgoutside: '#dbdbdb', // 背景色颜色 72 | lineSelect: '#52b8f5', // 选中线颜色 73 | font: '#404040' // 刻度数字颜色 74 | { 75 | ``` 76 | 4.事件 77 | 78 | | 事件名 | 返回值 | 说明 | 79 | | :-: | :-----: | :----: | 80 | |`bindvalue` | 当前选择刻度 | 返回当前选择刻度 | 81 | 82 | ```js 83 | Page({ 84 | data: { 85 | value: 0, 86 | styles: { 87 | line: '#dbdbdb', 88 | bginner: '#fbfbfb', 89 | bgoutside: '#dbdbdb', 90 | lineSelect: '#52b8f5', 91 | font: '#404040' 92 | } 93 | }, 94 | bindvalue: function (e) { 95 | // console.log(e) 96 | this.setData({ 97 | value: e.detail.value 98 | }) 99 | } 100 | }) 101 | ``` 102 | 103 | 104 | 105 | 以上，就是组件的时候方法了，如果使用过程中，有问题可以联系我。 106 | 107 | `wx-scale 组件` : [代码下载](https://github.com/mehaotian/wx-scale/releases/tag/1.0.0) 108 | 109 | ![image.png](https://upload-images.jianshu.io/upload_images/4472817-5a81d789b0003358.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 110 | 111 | 如果觉得有用，就给颗星吧 [点我点我点我](https://github.com/mehaotian/wx-scale) 112 | 113 | 114 | 115 | #问题答疑 116 | ###### 1. 在开发工具中只正常显示第一个组件刻度图片，这是一个编辑器已知问题 ，在手机中不影响使用 117 | ###### 2. 部分手机会显示滚动条 ，在父页面（使用组件页面）wxss 中添加如下样式，组件样式添加无效 118 | 119 | ```css 120 | ::-webkit-scrollbar { 121 | width: 0; 122 | height: 0; 123 | color: transparent; 124 | display: none; 125 | } 126 | ``` 127 | ###### 3. 关于遮罩问题 ，在这不解答。自己动手写一下吧，没问题的 128 | ###### 4. 动态赋值的变量，最好不要与` bindvalue` 事件返回的值 使用同一个变量 129 | 因为动态赋值监听 到新值之后 ，是要改变滚动组件的位置的，这时候如果使用同一个变量，会多次触发动态赋值，所以不建议使用同一个变量 130 | ![image.png](https://upload-images.jianshu.io/upload_images/4472817-011a5f27a58374e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 131 | ###### 5. 因为性能问题 ，不能连续滑动 ，请等待第一次 归位之后，在进行第二次滑动。因为每次归位有一个200ms的等待时间，待优化问题 132 | 133 | # 更新日志 134 | ##v1.0.1 (2018-12-12更新) 135 | ##### 1.修复一屏多组件问题 ，可以同一个页面使用多个组件了。 136 | ##### 2. 添加动态赋值的功能，修改`active`属性即可，注意获取到的值 和动态赋值 不要使用同一个变量 137 | -------------------------------------------------------------------------------- /components/wx-scale/wx-scale.js: -------------------------------------------------------------------------------- 1 | 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | // 最小值 8 | min: { 9 | type: Number, 10 | value: 0 11 | }, 12 | //最大值 13 | max: { 14 | type: Number, 15 | value: 100 16 | }, 17 | // 是否开启整数模式 18 | "int": { 19 | type: Boolean, 20 | value: true 21 | }, 22 | // 每个格子的长度（只能是 1 ，2 ，5 一个能被10整除的数字 ） 23 | step: { 24 | type: Number, 25 | value: 1 26 | }, 27 | // 每个格子的实际行度 （单位px ，相对默认值） 28 | single: { 29 | type: Number, 30 | value: 10 31 | }, 32 | // 卡尺左右的余量 ，最为60 33 | fiexNum: { 34 | type: Number, 35 | value: 60 36 | }, 37 | // 高度 38 | h: { 39 | type: Number, 40 | value: 80 41 | }, 42 | // 当前选中 43 | active: { 44 | type: null, 45 | value: '0', 46 | observer(newVal, oldVal, changedPath) { 47 | console.log(oldVal) 48 | let rul = this.data.rul 49 | rul.active = newVal 50 | console.log(newVal, 'new') 51 | let centerNum = this.assignValue(this, rul) 52 | this.setData({ 53 | centerNum, 54 | rul 55 | }) 56 | } 57 | }, 58 | styles: { 59 | type: Object, 60 | value: { 61 | line: '#dbdbdb', 62 | bginner: '#fbfbfb', 63 | bgoutside: '#dbdbdb', 64 | lineSelect: '#52b8f5', 65 | font: '#404040' 66 | } 67 | } 68 | 69 | }, 70 | 71 | /** 72 | * 组件的初始数据 73 | */ 74 | data: { 75 | imageWidth: '', 76 | fiexNum: '', 77 | bgoutside: '#dbdbdb', 78 | lineSelect: '#52b8f5', 79 | scaleId: '', 80 | rul: {}, 81 | assingOldVal: -1 82 | }, 83 | ready() { 84 | // 每次初始化 全局变量 85 | this._init() 86 | }, 87 | 88 | /** 89 | * 组件的方法列表 90 | */ 91 | methods: { 92 | /** 93 | * 绘制 94 | * 生成卡尺 95 | */ 96 | draw(num, total, { 97 | self, 98 | rul 99 | }) { 100 | let canvasHeight = 80; 101 | let ctx = wx.createCanvasContext('canvas', self); 102 | // 绘制背景 103 | ctx.save() 104 | ctx.setFillStyle(rul.styles.bginner) 105 | ctx.fillRect(0, 0, total, canvasHeight) 106 | ctx.restore() 107 | ctx.beginPath() 108 | ctx.setLineWidth(1) 109 | ctx.setStrokeStyle(rul.styles.line) 110 | ctx.moveTo(rul.FIXED_NUM / 2, 0) 111 | ctx.lineTo(total - rul.FIXED_NUM / 2, 0) 112 | ctx.stroke() 113 | for (let i = 0; i < rul.unitNum + 1; i++) { 114 | // 绘制文字 115 | if (i % (rul.single / rul.step) === 0) { 116 | ctx.setFontSize(18) 117 | ctx.setFillStyle(rul.styles.font) 118 | ctx.setTextAlign('center') 119 | if (self.data.int) { 120 | ctx.fillText(i * rul.step + rul.minNum, rul.FIXED_NUM / 2 + (i * rul.spa), canvasHeight - 15) 121 | } else { 122 | ctx.fillText(i / (rul.single / rul.step) + rul.minNum, rul.FIXED_NUM / 2 + (i * rul.spa), canvasHeight - 15) 123 | } 124 | } 125 | // 绘制刻度 126 | if (i % 5 === 0) { 127 | ctx.beginPath() 128 | ctx.setLineWidth(2) 129 | ctx.setStrokeStyle(rul.styles.line) 130 | ctx.moveTo(rul.FIXED_NUM / 2 + (i * rul.spa), 0) 131 | ctx.lineTo(rul.FIXED_NUM / 2 + (i * rul.spa), canvasHeight / 2) 132 | ctx.stroke() 133 | } else { 134 | ctx.beginPath() 135 | ctx.setLineWidth(1) 136 | ctx.setStrokeStyle(rul.styles.line) 137 | ctx.moveTo(rul.FIXED_NUM / 2 + (i * rul.spa), 0) 138 | ctx.lineTo(rul.FIXED_NUM / 2 + (i * rul.spa), canvasHeight - 50) 139 | ctx.stroke() 140 | } 141 | } 142 | ctx.draw(true, setTimeout(() => { 143 | wx.canvasToTempFilePath({ 144 | x: 0, 145 | y: 0, 146 | width: total, 147 | height: canvasHeight, 148 | // destWidth: total * 4, 149 | // destHeight: canvasHeight * 4, 150 | canvasId: 'canvas', 151 | success: (res) => { 152 | // 改变高度重新计算 153 | rul.total = rul.total / 80 * rul.h 154 | rul.FIXED_NUM = rul.FIXED_NUM / 80 * rul.h 155 | // let centerNum = self.data.int ? 156 | // ((rul.active - rul.minNum) / rul.step) * 157 | // parseInt(rul.total - rul.FIXED_NUM) / rul.num * rul.step : 158 | // ((rul.active - rul.minNum) * 10 / rul.step) * 159 | // parseFloat((rul.total - rul.FIXED_NUM)) / rul.num / (rul.single / rul.step) 160 | let centerNum = this.assignValue(this, rul) 161 | self.setData({ 162 | ruler: res.tempFilePath, 163 | centerNum, 164 | width: rul.total, 165 | h: rul.h, 166 | fiexNum: rul.FIXED_NUM, 167 | round: self.data.int ? rul.minNum : rul.minNum.toFixed(1), 168 | bgoutside: rul.styles.bgoutside, 169 | lineSelect: rul.styles.lineSelect, 170 | }) 171 | self.triggerEvent('value', { 172 | value: self.data.round 173 | }) 174 | }, 175 | fail(e) { 176 | console.log(e) 177 | } 178 | }, this) 179 | }, 500)); 180 | }, 181 | /** 182 | * 获取滑动的值 183 | */ 184 | bindscroll: function(e) { 185 | let rul = this.data.rul 186 | // 移动距离 187 | let left = e.detail.scrollLeft; 188 | // 单格的实际距离 189 | let spa; 190 | // 判断是否是整数 191 | if (this.data.int) { 192 | spa = parseInt(rul.total - rul.FIXED_NUM) / rul.num * rul.step; 193 | } else { 194 | spa = parseFloat(rul.total - rul.FIXED_NUM) / rul.num / (rul.single / rul.step); 195 | } 196 | // 当前显示值 197 | let resultNum = Math.round(left / spa); 198 | // 还原为实际数值 199 | let redNum = Math.round(resultNum * spa) 200 | // 小数位处理 201 | resultNum = this.data.int ? resultNum * rul.step + rul.minNum : ((resultNum * rul.step) / 10 + rul.minNum).toFixed(1) 202 | if (this.data.assingOldVal === resultNum) return 203 | this.setData({ 204 | round: resultNum, 205 | assingOldVal: resultNum 206 | }) 207 | this.triggerEvent('value', { 208 | value: resultNum 209 | }) 210 | clearTimeout(rul.Timer); 211 | rul.Timer = setTimeout(() => { 212 | // console.log("执行了定时器") 213 | this.setData({ 214 | centerNum: redNum, 215 | round: resultNum, 216 | active: resultNum, 217 | assingOldVal: resultNum 218 | }) 219 | this.triggerEvent('value', { 220 | value: resultNum 221 | }) 222 | 223 | }, 200) 224 | }, 225 | /** 226 | * 初始化卡尺 227 | */ 228 | _init() { 229 | let self = this 230 | let rul = { 231 | spa: '', // 单个格子的距离 232 | unitNum: '', // 格子总数 233 | minNum: this.data.min, 234 | maxNum: this.data.max, 235 | num: this.data.max - this.data.min, // 仿数据总数 236 | FIXED_NUM: this.data.fiexNum, // 标尺左右空余部分 237 | single: this.data.single, 238 | step: this.data.step, 239 | h: this.data.h, 240 | active: '', 241 | styles: this.data.styles 242 | } 243 | this._getErro(rul) 244 | // 获取节点信息，获取节点宽度 245 | var query = this.createSelectorQuery().in(this) 246 | query.select('#scale-wrapper').boundingClientRect((res) => { 247 | res.top // 这个组件内 #the-id 节点的上边界坐标 248 | }).exec((e) => { 249 | // 获节点宽度 250 | rul.windowWidth = e[0].width; 251 | // 判断是否使用整数类型 252 | if (self.data.int) { 253 | rul.unitNum = rul.num / rul.step; 254 | } else { 255 | rul.unitNum = rul.num * (rul.single / rul.step); 256 | } 257 | // 设置单个格子的长度 258 | rul.spa = rul.single * rul.step; 259 | rul.total = rul.spa * rul.unitNum + rul.FIXED_NUM 260 | self.setData({ 261 | windowWidth: e[0].width, 262 | width: rul.total, 263 | fiexNum: rul.FIXED_NUM, 264 | rul 265 | }) 266 | self.draw(rul.num, rul.total, { 267 | self, 268 | rul 269 | }); 270 | }) 271 | }, 272 | /** 273 | * 输出错误信息 274 | */ 275 | _getErro(rul) { 276 | // 判断 最大值 最小值 是否 正确 277 | if (rul.minNum >= rul.maxNum) { 278 | console.error("您输入的最大值 小于最小值，请检查 minNum ， maxNum") 279 | rul.minNum = 0; 280 | rul.maxNum = 100 281 | rul.num = rul.maxNum - rul.minNum 282 | } 283 | // 判断 是否开启整数类型 284 | if (rul.step !== 1 && rul.step !== 2 && rul.step !== 5) { 285 | console.error("步长只能是 1 ，2 ，5 ,请检查 step") 286 | rul.step = 1 287 | } 288 | if (rul.FIXED_NUM < 60) { 289 | console.warn('左右余量 输入小于 60 ，可能影响显示效果，请检查 fiexNum') 290 | if (!rul.FIXED_NUM) { 291 | rul.FIXED_NUM = 60 292 | } 293 | if (rul.FIXED_NUM < 0) { 294 | console.error('左右余量最小为0 ，请检查 fiexNum') 295 | rul.FIXED_NUM = 0; 296 | } 297 | } 298 | if (rul.single < 10) { 299 | console.warn('格子单位小于10 ，可能影响显示效果，请检查 single') 300 | if (!rul.single) { 301 | rul.single = 10 302 | } 303 | } 304 | if (rul.h < 50) { 305 | console.warn('格子单位小于50 ，可能影响显示效果，请检查 h') 306 | if (!rul.h) { 307 | rul.h = 80 308 | } 309 | if (rul.h < 20) { 310 | console.error('高度最小为20 ，请检查 h') 311 | rul.h = 20; 312 | } 313 | } 314 | // 当前选中位置设置 315 | if (this.data.active === 'min') { 316 | rul.active = rul.minNum 317 | } else if (this.data.active === 'max') { 318 | rul.active = rul.maxNum 319 | } else if (this.data.active === 'center') { 320 | rul.active = (rul.maxNum + rul.minNum) / 2 321 | } else { 322 | rul.active = this.data.active 323 | } 324 | if (this.data.active !== 'min' && this.data.active !== 'max' && this.data.active !== 'center') { 325 | // console.log("任意数值") 326 | if (rul.active < rul.minNum || rul.active > rul.maxNum) { 327 | console.error('您输入的数值（active）超入范围，请检查 active') 328 | } 329 | if (rul.active % rul.step !== 0 && rul.int) { 330 | console.warn("您输入的数值（active）不是合法数值，请检查，所以导致结果可能有错误") 331 | } 332 | if (rul.active * 10 % rul.step !== 0 && !rul.int) { 333 | console.warn("您输入的数值（active）不是合法数值，请检查，所以导致结果可能有错误") 334 | } 335 | } 336 | 337 | if (!rul.styles) { 338 | rul.styles = {} 339 | if (!rul.styles.line) { 340 | rul.styles.line = '#dbdbdb' 341 | } 342 | if (!rul.styles.lineSelect) { 343 | rul.styles.lineSelect = '#52b8f5' 344 | } 345 | if (!rul.styles.bginner) { 346 | rul.styles.bginner = '#fbfbfb' 347 | } 348 | if (!rul.styles.bgoutside) { 349 | rul.styles.bgoutside = '#dbdbdb' 350 | } 351 | if (!rul.styles.font) { 352 | rul.styles.font = '#404040' 353 | } 354 | } else { 355 | if (!rul.styles.line) { 356 | rul.styles.line = '#dbdbdb' 357 | } 358 | if (!rul.styles.lineSelect) { 359 | rul.styles.lineSelect = '#52b8f5' 360 | } 361 | if (!rul.styles.bginner) { 362 | rul.styles.bginner = '#fbfbfb' 363 | } 364 | if (!rul.styles.bgoutside) { 365 | rul.styles.bgoutside = '#dbdbdb' 366 | } 367 | if (!rul.styles.font) { 368 | rul.styles.font = '#404040' 369 | } 370 | } 371 | }, 372 | assignValue(self, rul) { 373 | return self.data.int ? 374 | ((rul.active - rul.minNum) / rul.step) * 375 | parseInt(rul.total - rul.FIXED_NUM) / rul.num * rul.step : 376 | ((rul.active - rul.minNum) * 10 / rul.step) * 377 | parseFloat((rul.total - rul.FIXED_NUM)) / rul.num / (rul.single / rul.step) 378 | } 379 | } 380 | }) -------------------------------------------------------------------------------- /utils/wxdraw.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function Line(t){var i=_extends({strokeStyle:"#000000",points:[[1,2],[23,45],[2,45],[230,205]]},commonAttr()),n=_extends({smooth:!0},commonUnAttr()),s=util.extend(t,i),e=util.extend(t,n);this.Option=s,this.UnOption=e,this.max={maxX:null,maxY:null,minX:null,minY:null},this.massCenter=this.genMassCenter(this.Option.points),this.posPoints=this.genPointsPositiveLoc(),this.oriPoints=this.Option.points,this._Points=this.Option.points,this._CurvePoints=this.Option.points,this.detectPoints=this.getDetectPoints(),this.getMax(),this._isChoosed=!1,this.rotateOrigin=null,this._dirty=!0,this._type="line",this._canRotateOrigin=!0}function Watch(){this.startTime=0,this.running=!1,this.goesBytime=0,this.goesBy=void 0,this.DEFAULT_ELASTIC=2}function genExe(t,i,n){if(specialAtrr[i])return specialAtrr[i].getIncre(specialAtrr[i].get(n.Shape.Option[i]),t,n);if(!isNaN(Number(t)))return n.Shape.Option[i]||0===n.Shape.Option[i]?parseFloat(t)-parseFloat(n.Shape.Option[i]):parseFloat(t)-parseFloat(n.Shape[specialOption[n.type][i]][i]);if(0==t.indexOf("+=")){return t.split("=")[1]}if(0==t.indexOf("-=")){return-1*t.split("=")[1]}}function fakeAnimationFrame(t){var i;setTimeout(function(){i=+new Date,t(i)},16)}function WxDraw(t,i,n,s,e){this.canvas=t,this.wcid=guid(),this.store=new Store,this.bus=new eventBus,this.animation=new Animation(this.bus),this.x=i,this.y=n,this.w=s,this.h=e,this.bus.add("addAnimation",this,this.addAnimationFrag),this.bus.add("update",this,this.update),this.bus.add("getDetectedLayers",this,this.getDetectedLayers),this.bus.add("clearDetectedLayers",this,this.clearDetectedLayers),this.bus.add("updateLayer",this,this.updateLayer),this.bus.add("destory",this,this.destroy),this.animation.start(),Shape.bus=this.bus,this.detectedLayers=[]}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},classCallCheck=function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,i){for(var n=0;n0&&(this.turnColorLock(!0),i=t.createLinearGradient.apply(t,toConsumableArray(this.getGradientOption(n).lg)),this.UnOption.gra.forEach(function(t){i.addColorStop(t[0],t[1])},this),t.setFillStyle(i)),this.UnOption.needGra&&"circle"==this.UnOption.needGra&&this.UnOption.gra&&this.UnOption.gra.length>0&&(this.turnColorLock(!0),i=t.createCircularGradient.apply(t,toConsumableArray(this.getGradientOption(n).cg)),this.UnOption.gra.forEach(function(t){i.addColorStop(t[0],t[1])},this),t.setFillStyle(i)),(!this._colorLock||this.needGra&&"no"==his.UnOption.needGra)&&t.setFillStyle(this.Option.fillStyle),"miter"==this.UnOption.lineJoin&&t.setMiterLimit(this.Option.miterLimit),t.setStrokeStyle(this.Option.strokeStyle),t.setLineWidth(this.Option.lineWidth),t.setGlobalAlpha(this.Option.opacity),this.UnOption.needShadow&&this.Option.shadow&&t.setShadow(this.Option.shadow.offsetX,this.Option.shadow.offsetY,this.Option.shadow.blur,this.Option.shadow.color),this.UnOption.isLineDash&&t.setLineDash&&(this.Option.lineDash instanceof Array||(this.Option.lineDash[0]=objToArray(this.Option.lineDash[0])),t.setLineDash(this.Option.lineDash[0],this.Option.lineDash[1]))},stroke:function(t){return"text"==this._type?(this.fill(t),!1):"image"==this._type?(this._draw(t),!1):(t.save(),this._drawLine=!0,this._draw(t),this.setCommonstyle(t),t.stroke(),void t.restore())},fill:function(t){return"line"==this._type?(this.stroke(t),!1):"text"==this._type?(t.save(),t.setGlobalAlpha(this.Option.opacity),t.beginPath(),t.setFontSize(this.Option.fontSize),t.setTextAlign(this.UnOption.align),t.setTextBaseline(this.UnOption.textBaseline),t.setFillStyle(this.Option.fillStyle),this.UnOption.needShadow&&this.Option.shadow&&t.setShadow(this.Option.shadow.offsetX,this.Option.shadow.offsetY,this.Option.shadow.blur,this.Option.shadow.color),this._draw(t),t.closePath(),t.restore(),!1):"image"==this._type?(this._draw(t),!1):(t.save(),this._drawLine=!1,this._draw(t),this.setCommonstyle(t),t.fill(),void t.restore())},mixDraw:function(t){return"line"==this._type?(this.stroke(t),!1):"text"==this._type?(this.fill(t),!1):"image"==this._type?(this._draw(t),!1):(t.save(),this._drawLine=!0,this._draw(t),this.setCommonstyle(t),t.fill(),t.stroke(),void t.restore())},turnColorLock:function(t){this._colorLock=!!t},getGradientOption:function(t){return{circle:"circle"==t?{lg:[this.Option.x-this.Option.r,0,this.Option.x+this.Option.r,0],cg:[this.Option.x,this.Option.y,this.Option.r]}:{},rect:"rect"==t?{lg:[this.Option.x-this.Option.w/2,this.Option.y-this.Option.h/2,this.Option.x+this.Option.w/2,this.Option.y-this.Option.h/2],cg:[this.Option.x,this.Option.y,Math.sqrt(Math.pow(this.Option.w/2,2)+Math.pow(this.Option.h/2,2))]}:{},polygon:"polygon"==t?{lg:[this.max.minX,this.max.minY,this.max.maxX,this.max.minY],cg:[this.Option.x,this.Option.y,this.Option.r]}:{},cshape:"cshape"==t?{lg:[this.max.minX,this.max.minY,this.max.maxX,this.max.minY],cg:[this.massCenter.x,this.massCenter.y,Math.sqrt(Math.pow((this.max.maxX-this.max.minX)/2,2)+Math.pow((this.max.maxY-this.max.minY)/2,2))]}:{},ellipse:"ellipse"==t?{lg:[this.max.minX,this.max.minY,this.max.maxX,this.max.minY],cg:[this.Option.x,this.Option.y,Math.sqrt(Math.pow((this.max.maxX-this.max.minX)/2,2)+Math.pow((this.max.maxY-this.max.minY)/2,2))]}:{}}[t]},_drawHelperPoints:function(t){t.save(),t.setFillStyle("#F34739"),t.beginPath(),this._detectPoints?this._detectPoints.forEach(function(i){t.arc(i[0],i[1],5,2*Math.PI,0,2*Math.PI,!1)}):this._Points.forEach(function(i){t.arc(i[0],i[1],5,2*Math.PI,0,2*Math.PI,!1)}),t.closePath(),t.fill(),t.restore()},closeRotateOrigin:function(){this._canRotateOrigin=!1}},Polygon=function(t){var i=_extends({x:10,y:10,r:10,sides:7},commonAttr()),n=util.extend(t,i),s=util.extend(t,commonUnAttr());this.Option=n,this.UnOption=s,this.max={maxX:null,maxY:null,minX:null,minY:null},this.oriPoints=null,this._Points=[],this._drawLine=!1,this.detectOriPoints=[],this._detectPoints=[],this.getOriPoints(),this.getMax(this.oriPoints),this._isChoosed=!1,this.rotateOrigin=null,this._dirty=!0,this._type="polygon",this._canRotateOrigin=!0};Polygon.prototype=_extends({getOriPoints:function(){for(var t=[],i=[],n=this.Option.startAngle||0,s=0;sthis.max.maxX&&(this.max.maxX=t[0]),this.max.minX||0===this.max.minX||(this.max.minX=t[0]),this.max.minX&&t[0]this.max.maxY&&(this.max.maxY=t[1]),this.max.minY||0===this.max.minY||(this.max.minY=t[1]),this.max.minY&&t[1]this.max.minX&&tthis.max.minY&&ii!=u>i&&t<(a-h)*(i-r)/(u-r)+h&&(n=!n)}return n}},commonMethods);var Ellipse=function(t){var i=_extends({x:10,y:10,a:10,b:10},commonAttr()),n=util.extend(t,i),s=util.extend(t,commonUnAttr());this.Option=n,this.UnOption=s,this.max={maxX:null,maxY:null,minX:null,minY:null},this.oriPoints=null,this._Points=[],this._isChoosed=!1,this.rotateOrigin=null,this._drawLine=!1,this.detectOriPoints=[],this._detectPoints=[],this.getOriPoints(),this.getMax(),this._dirty=!0,this._type="ellipse",this._canRotateOrigin=!0};Ellipse.prototype=_extends({getOriPoints:function(){for(var t=[],i=[],n=this.Option.startAngle||0,s=0;s<100;++s)t.push([this.Option.x+this.Option.a/2*Math.sin(n),this.Option.y-this.Option.b/2*Math.cos(n)]),i.push([this.Option.x+(this.Option.a/2+this.Option.lineWidth/2)*Math.sin(n),this.Option.y-(this.Option.b+this.Option.lineWidth)/2*Math.cos(n)]),n+=2*Math.PI/100;this.oriPoints=t,this.detectOriPoints=i},getPoints:function(){var t=[],i=[],n=null;return n=this.rotateOrigin?this.rotateOrigin:[this.Option.x,this.Option.y],this.oriPoints.forEach(function(i){t.push(this.getPointTodraw(i[0],i[1],n))},this),this.detectOriPoints.forEach(function(t){i.push(this.getPointTodraw(t[0],t[1],n))},this),this._Points=matrixToarray(t),this._detectPoints=matrixToarray(i),this._Points},getMax:function(){var t=this._detectPoints;this.max={maxX:null,maxY:null,minX:null,minY:null},t.forEach(function(t){t[0]>this.max.maxX&&(this.max.maxX=t[0]),this.max.minX||0===this.max.minX||(this.max.minX=t[0]),this.max.minX&&t[0]this.max.maxY&&(this.max.maxY=t[1]),this.max.minY||0===this.max.minY||(this.max.minY=t[1]),this.max.minY&&t[1]this.max.minX&&tthis.max.minY&&ii!=u>i&&t<(a-h)*(i-r)/(u-r)+h&&(n=!n)}return n}},commonMethods);var baseline=function(t,i){return{normal:2,bottom:-i/2,middle:0,top:i/2}[t]},align=function(t,i){return{left:i/2,center:0,right:-i/2}[t]},Text=function(t){String(t.text)||(t.text="no text");var i={x:100,y:200,fontSize:12,shadow:{offsetX:5,offsetY:5,blur:5,color:"#000000"},fillStyle:"#000000",strokeStyle:"#000000",rotate:0,opacity:1},n={textBaseline:"normal",align:"left",needShadow:!1};this.text=String(t.text),this.Option=util.extend(t,i),this.UnOption=util.extend(t,n),this.boxOption={x:0,y:0},this.boxOriPoints=[],this.boxPoints=[],this.rotateOrigin=null,this.offset={x:0,y:0},this._offsetX=0,this._offsetY=0,this.getOriPoints(),this.getPoints(),this._dirty=!0,this._type="text",this._canRotateOrigin=!0};Text.prototype=_extends({getOriPoints:function(){for(var t=[],i=/^[\u4e00-\u9fa5]/,n=String(this.text).length,s=0,e=this.Option.fontSize,o=0;oi!=u>i&&t<(a-h)*(i-r)/(u-r)+h&&(n=!n)}return n},move:function(t,i){this.boxOption.x=t,this.boxOption.y=i,this.Option.x=t-this.offset.x,this.Option.y=i-this.offset.y,this._dirty=!0},detected:function(t,i){return this._offsetX=this.boxOption.x-t,this._offsetY=this.boxOption.y-i,!!this._pnpolyTest(t,i)&&(this._isChoosed=!0,!0)},_draw:function(t){this._dirty&&(this.getOriPoints(),this.getPoints()),t.save(),this.rotateOrigin?(t.translate(this.rotateOrigin[0],this.rotateOrigin[1]),t.rotate(this.Option.rotate),t.fillText(this.text,this.boxOption.x-this.rotateOrigin[0]-this.offset.x,this.boxOption.y-this.rotateOrigin[1]-this.offset.y)):(t.translate(this.boxOption.x,this.boxOption.y),t.rotate(this.Option.rotate),t.fillText(this.text,-this.offset.x,-this.offset.y)),t.restore(),this._dirty=!1},moveDetect:function(t,i){1==this._isChoosed&&this.move(t+this._offsetX,i+this._offsetY)},updateText:function(t){this.text=t,this._dirty=!0}},commonMethods);var getCurvePoints=function(t,i,n,s){i=void 0!==i?i:.5,n=n||!1,s=s||16;var e,o,h,r,a,u,p,c,l,m,f,x,d,g=[],O=[];for(g=t.slice(0),n?(g.unshift(t[t.length-1]),g.unshift(t[t.length-1]),g.push(t[0])):(g.unshift(t[1]),g.push(t[t.length-1])),d=1;dthis.max.maxX&&(this.max.maxX=t[0]),this.max.minX||0===this.max.minX||(this.max.minX=t[0]),this.max.minX&&t[0]this.max.maxY&&(this.max.maxY=t[1]),this.max.minY||0===this.max.minY||(this.max.minY=t[1]),this.max.minY&&t[1]this.max.minX&&tthis.max.minY&&ii!=u>i&&t<(a-h)*(i-r)/(u-r)+h&&(n=!n)}return n}},commonMethods);var Circle=function(t){var i=_extends({x:10,y:10,r:10,sA:0,eA:2*Math.PI},commonAttr()),n=_extends({},commonUnAttr(),{counterclockwise:!1,closePath:!1}),s=util.extend(t,i),e=util.extend(t,n);this.Option=s,this.UnOption=e,this._isChoosed=!1,this._offsetX=0,this._offsetY=0,this.fullCircle=!0,this._colorLock=!1,this._canRotateOrigin=!0,this.max={maxX:null,maxY:null,minX:null,minY:null},this.oriPoints=null,this._Points=[],this._isChoosed=!1,this.rotateOrigin=null,this._drawLine=!1,this.detectOriPoints=[],this._detectPoints=[],this.getOriPoints(),this.getMax(),this._dirty=!0,this._type="circle"};Circle.prototype=_extends({getOriPoints:function(){var t=[],i=[],n=this.Option.sA||0,s=this.Option.eA||2*Math.PI,e=s-n;e>=2*Math.PI?this.fullCircle=!0:this.fullCircle=!1;for(var o=0;o<=100;++o)n=this.Option.sA+o*e/100,t.push([this.Option.x+this.Option.r*Math.sin(n),this.Option.y-this.Option.r*Math.cos(n)]),i.push([this.Option.x+(this.Option.r+this.Option.lineWidth/2)*Math.sin(n),this.Option.y-(this.Option.r+this.Option.lineWidth/2)*Math.cos(n)]);t.unshift([this.Option.x,this.Option.y]),i.unshift([this.Option.x,this.Option.y]),this.oriPoints=t,this.detectOriPoints=i},getPoints:function(){var t=[],i=[],n=null;return n=this.rotateOrigin?this.rotateOrigin:[this.Option.x,this.Option.y],this.oriPoints.forEach(function(i){t.push(this.getPointTodraw(i[0],i[1],n))},this),this.detectOriPoints.forEach(function(t){i.push(this.getPointTodraw(t[0],t[1],n))},this),this._Points=matrixToarray(t),this._detectPoints=matrixToarray(i),this._Points},getMax:function(){var t=this.detectOriPoints;this.max={maxX:null,maxY:null,minX:null,minY:null},t.forEach(function(t){t[0]>this.max.maxX&&(this.max.maxX=t[0]),this.max.minX||0===this.max.minX||(this.max.minX=t[0]),this.max.minX&&t[0]this.max.maxY&&(this.max.maxY=t[1]),this.max.minY||0===this.max.minY||(this.max.minY=t[1]),this.max.minY&&t[1]i!=u>i&&t<(a-h)*(i-r)/(u-r)+h&&(n=!n)}return n}},commonMethods);var Rect=function(t){var i=_extends({x:10,y:10,w:10,h:10},commonAttr()),n=util.extend(t,i),s=util.extend(t,commonUnAttr());this.Option=util.extend({},n),this.UnOption=s,this._isChoosed=!1,this._offsetX=0,this._offsetY=0,this.bus=null,this.rotateOrigin=null,this.oriPoints=[],this._Points=[],this._drawLine=!1,this.detectOriPoints=[],this._detectPoints=[],this.max={maxX:null,maxY:null,minX:null,minY:null},this.getOriPoints(),this.getPoints(),this.getMax(),this._dirty=!0,this._type="rect",this._rotateOriginOver=!1,this._canRotateOrigin=!0};Rect.prototype=_extends({_draw:function(t){this._dirty&&(this.getOriPoints(),this.getPoints(),this.getMax()),this.createPath(t),this._dirty=!1},getOriPoints:function(){var t=[],i=[];t.push([this.Option.x-this.Option.w/2,this.Option.y-this.Option.h/2]),t.push([this.Option.x-this.Option.w/2,this.Option.y+this.Option.h/2]),t.push([this.Option.x+this.Option.w/2,this.Option.y+this.Option.h/2]),t.push([this.Option.x+this.Option.w/2,this.Option.y-this.Option.h/2]),i.push([this.Option.x-this.Option.w/2-this.Option.lineWidth/2,this.Option.y-this.Option.h/2-this.Option.lineWidth/2]),i.push([this.Option.x-this.Option.w/2-this.Option.lineWidth/2,this.Option.y+this.Option.h/2+this.Option.lineWidth/2]),i.push([this.Option.x+this.Option.w/2+this.Option.lineWidth/2,this.Option.y+this.Option.h/2+this.Option.lineWidth/2]),i.push([this.Option.x+this.Option.w/2+this.Option.lineWidth/2,this.Option.y-this.Option.h/2-this.Option.lineWidth/2]),this.oriPoints=t,this.detectOriPoints=i},getPoints:function(){var t=[],i=[],n=null;return n=this.rotateOrigin?this.rotateOrigin:[this.Option.x,this.Option.y],this.oriPoints.forEach(function(i){t.push(this.getPointTodraw(i[0],i[1],n))},this),this.detectOriPoints.forEach(function(t){i.push(this.getPointTodraw(t[0],t[1],n))},this),this._changeCenter(n),this._Points=matrixToarray(t),this._detectPoints=matrixToarray(i),this._Points},getPointTodraw:function(t,i,n){var s=this.Option.rotate;return new Point(t,i).rotate(n,s)},getMax:function(){var t=this._detectPoints;this.max={maxX:null,maxY:null,minX:null,minY:null},t.forEach(function(t){t[0]>this.max.maxX&&(this.max.maxX=t[0]),this.max.minX||0===this.max.minX||(this.max.minX=t[0]),this.max.minX&&t[0]this.max.maxY&&(this.max.maxY=t[1]),this.max.minY||0===this.max.minY||(this.max.minY=t[1]),this.max.minY&&t[1]i!=u>i&&t<(a-h)*(i-r)/(u-r)+h&&(n=!n)}return n},move:function(t,i){this.Option.x=t,this.Option.y=i,this._dirty=!0},detected:function(t,i){return console.log("检测方块",t,i),t>this.max.minX&&tthis.max.minY&&ithis.max.maxX&&(this.max.maxX=t[0]),this.max.minX||0===this.max.minX||(this.max.minX=t[0]),this.max.minX&&t[0]this.max.maxY&&(this.max.maxY=t[1]),this.max.minY||0===this.max.minY||(this.max.minY=t[1]),this.max.minY&&t[1]this.max.minX&&tthis.max.minY&&ii!=a>i&&t<(r-o)*(i-h)/(a-h)+o&&(n=!n)}return n}},commonMethods);var Img=function(t){var i={x:10,y:10,w:10,h:10,rotate:0,opacity:1},n={file:""},s=util.extend(t,i),e=util.extend(t,n);this.Option=util.extend({},s),this.UnOption=e,this._isChoosed=!1,this._offsetX=0,this._offsetY=0,this.rotateOrigin=null,this.oriPoints=[],this._Points=[],this._drawLine=!1,this.detectOriPoints=[],this._detectPoints=[],this.max={maxX:null,maxY:null,minX:null,minY:null},this.getOriPoints(),this.getPoints(),this.getMax(),this._dirty=!0,this._type="image",this._canRotateOrigin=!0};Img.prototype=_extends({_draw:function(t){this._dirty&&(this.getOriPoints(),this.getPoints(),this.getMax()),this.drawImage(t),this._dirty=!1},getOriPoints:function(){var t=[];t.push([this.Option.x-this.Option.w/2,this.Option.y-this.Option.h/2]),t.push([this.Option.x-this.Option.w/2,this.Option.y+this.Option.h/2]),t.push([this.Option.x+this.Option.w/2,this.Option.y+this.Option.h/2]),t.push([this.Option.x+this.Option.w/2,this.Option.y-this.Option.h/2]),this.oriPoints=t,this.detectOriPoints=t},getPoints:function(){var t=[],i=null;return i=this.rotateOrigin?this.rotateOrigin:[this.Option.x,this.Option.y],this.oriPoints.forEach(function(n){t.push(this.getPointTodraw(n[0],n[1],i))},this),this._Points=matrixToarray(t),this._detectPoints=matrixToarray(t), 2 | this._Points},getPointTodraw:function(t,i,n){var s=this.Option.rotate;return new Point(t,i).rotate(n,s)},getMax:function(){var t=this._detectPoints;this.max={maxX:null,maxY:null,minX:null,minY:null},t.forEach(function(t){t[0]>this.max.maxX&&(this.max.maxX=t[0]),this.max.minX||0===this.max.minX||(this.max.minX=t[0]),this.max.minX&&t[0]this.max.maxY&&(this.max.maxY=t[1]),this.max.minY||0===this.max.minY||(this.max.minY=t[1]),this.max.minY&&t[1]i!=u>i&&t<(a-h)*(i-r)/(u-r)+h&&(n=!n)}return n},move:function(t,i){this.Option.x=t,this.Option.y=i,this._dirty=!0},detected:function(t,i){return t>this.max.minX&&tthis.max.minY&&i1&&!isNaN(t)?t:0}return this.goesBy},isRunning:function(){return this.running},reset:function(){this.goesBy=0}};var AnimationTimer=function(t,i){void 0!==t&&(this.duration=t),void 0!==i&&(this.timeFunc=i),this.watch=new Watch};AnimationTimer.prototype={start:function(){this.watch.start()},stop:function(){this.watch.stop()},getGoesByTime:function(){var t=this.watch.getGoesByTime(),i=t/this.duration;if(this.watch.running)return this.timeFunc?t*(EasingFunctions[this.timeFunc](i)/i):t},isOver:function(){return this.watch.getGoesByTime()>this.duration}};var specialOption={cshape:{x:"massCenter",y:"massCenter"},line:{x:"massCenter",y:"massCenter"}},specialAtrr={fillStyle:{get:function(t){return hex2rgb(t)},set:function(t,i,n){var s=[t.r+Math.floor(i.r*n),t.g+Math.floor(i.g*n),t.b+Math.floor(i.b*n)];return"#"+rgb2hex.apply(void 0,s)},getIncre:function(t,i,n){var s=hex2rgb(i);return{r:s.r-t.r,g:s.g-t.g,b:s.b-t.b}}},strokeStyle:{get:function(t){return hex2rgb(t)},set:function(t,i,n){var s=[t.r+Math.floor(i.r*n),t.g+Math.floor(i.g*n),t.b+Math.floor(i.b*n)];return"#"+rgb2hex.apply(void 0,s)},getIncre:function(t,i,n){var s=hex2rgb(i);return{r:s.r-t.r,g:s.g-t.g,b:s.b-t.b}}},shadow:{get:function(t){return{offsetX:t.offsetX,offsetY:t.offsetY,blur:t.blur,color:hex2rgb(t.color)}},set:function(t,i,n){var s=[t.color.r+Math.floor(i.color.r*n),t.color.g+Math.floor(i.color.g*n),t.color.b+Math.floor(i.color.b*n)],e="#"+rgb2hex.apply(void 0,s);return{offsetX:t.offsetX+i.offsetX*n,offsetY:t.offsetY+i.offsetY*n,blur:t.blur+i.blur*n,color:e}},getIncre:function(t,i,n){var s=util.extend(i,n.Shape.Option.shadow),e=hex2rgb(s.color),o={r:e.r-t.color.r,g:e.g-t.color.g,b:e.b-t.color.b};return{offsetX:(s.offsetX?s.offsetX:5)-t.offsetX,offsetY:(s.offsetY?s.offsetY:5)-t.offsetY,blur:(s.blur?s.blur:5)-t.blur,color:o}}},lineDash:{get:function(t){return t},set:function(t,i,n){return[[t[0][0]+i[0][0]*n,t[0][1]+i[0][1]*n],t[1][1]+i[1][1]*n]},getIncre:function(t,i,n){return[[-t[0][0]+i[0][0],-t[0][1]+i[0][1]],-t[1][1]+i[1][1]]}}},AnimationFrag=function(t,i,n,s,e){var o={onStart:function(){},onLooping:function(){},onEnd:function(){},duration:1e3,easing:"linear"},h=util.extend(s,o);this.object=t,this.source=0,this.genFlag=!1,this.bus=e,this.complete=!1,this.running=!1,this.started=!1,this.duration=h.duration,this.atrribute=i,this.atrributeList=[],"object"==(void 0===i?"undefined":_typeof(i))?(this.genFlag=!0,this.genAtrributeList(i)):(this.incre=genExe(n,i,t),this.exe=n),this.timer=new AnimationTimer(h.duration,h.easing),this.oriOption=h,this.endCallFrag=null,this.onEnd=h.onEnd,this.onLooping=h.onLooping,this.onStart=h.onStart,this._aniWrapbus=null};AnimationFrag.prototype={updateAnimation:function(){return!this.complete&&(this.timer.isOver()?(this.onEnd(),this.complete=!0,this.running=!1,this._aniWrapbus.dispatch("fragAniOver","no","me"),!1):void(this.started||this.complete?(this.onLooping(),this.updateAtrribute()):(this.genFlag||(this.source=this.object.Shape.Option[this.atrribute]||0==this.object.Shape.Option[this.atrribute]?this.object.Shape.Option[this.atrribute]:this.object.Shape[specialOption[this.object.type][this.atrribute]][this.atrribute],specialAtrr[this.atrribute]&&(this.source=specialAtrr[this.atrribute].get(this.object.Shape.Option[this.atrribute]))),this.started=!0,this.running=!0,this.onStart(),this.timer.start())))},updateAtrribute:function(){this.genFlag?(this.atrributeList.forEach(function(t){this.object.Shape.Option[t.attr]||0==this.object.Shape.Option[t.attr]?specialAtrr[t.attr]?this.object.Shape.Option[t.attr]=specialAtrr[t.attr].set(t.source,t.incre,this.timer.getGoesByTime()/this.duration):this.object.Shape.Option[t.attr]=t.source+t.incre*this.timer.getGoesByTime()/this.duration:this.object.Shape[specialOption[this.object.type][t.attr]][t.attr]=t.source+t.incre*this.timer.getGoesByTime()/this.duration},this),this.object.Shape._dirty=!0):(this.object.Shape.Option[this.atrribute]||0==this.object.Shape.Option[this.atrribute]?specialAtrr[this.atrribute]?this.object.Shape.Option[this.atrribute]=specialAtrr[this.atrribute].set(this.source,this.incre,this.timer.getGoesByTime()/this.duration):this.object.Shape.Option[this.atrribute]=this.source+this.incre*this.timer.getGoesByTime()/this.duration:this.object.Shape[specialOption[this.object.type][this.atrribute]][this.atrribute]=this.source+this.incre*this.timer.getGoesByTime()/this.duration,this.object.Shape._dirty=!0)},genAtrributeList:function(t){var i=Object.keys(t),n=this;this.atrributeList=[],i.forEach(function(i){var s=this.object.Shape.Option[i]||0==this.object.Shape.Option[i]?this.object.Shape.Option[i]:this.object.Shape[specialOption[this.object.type][i]][i];specialAtrr[i]&&(s=specialAtrr[i].get(this.object.Shape.Option[i])),n.atrributeList.push({attr:i,incre:genExe(t[i],i,n.object),source:s})},this)},updateSourceAndtarget:function(){this.genFlag?this.genAtrributeList(this.atrribute):(this.source=this.object.Shape.Option[this.atrribute]||0==this.object.Shape.Option[this.atrribute]?this.object.Shape.Option[this.atrribute]:this.object.Shape[specialOption[this.object.type][this.atrribute]][this.atrribute],specialAtrr[this.atrribute]&&(this.source=specialAtrr[this.atrribute].get(this.object.Shape.Option[this.atrribute])),this.incre=genExe(this.exe,this.atrribute,this.object))},addWrapBus:function(t){this._aniWrapbus=t},restart:function(){this.complete=!1,this.running=!1,this.started=!1,this.timer=new AnimationTimer(this.oriOption.duration,this.oriOption.easing)}};var eventBus=function(){this.eventList=[]};eventBus.prototype={add:function(t,i,n){this.eventList.length?(this.eventList.forEach(function(i){if(i.name==t)return i.thingsList.push(n),!1},this),this.eventList.push({name:t,scope:i,thingsList:[n]})):this.eventList.push({name:t,scope:i,thingsList:[n]})},dispatch:function(t,i){var n=arguments;if(arguments.length<2)return!1;var s=Array.prototype.slice.call(n,2);this.eventList.forEach(function(n){n.name===t&&n.thingsList.forEach(function(t){"no"!==i?t.call.apply(t,[i].concat(toConsumableArray(s))):t.call.apply(t,[n.scope].concat(toConsumableArray(s)))})})},destroy:function(){}};var AniFragWrap=function(t,i,n){this.runing=!1,this.stoped=!1,this.started=!1,this.fragStore=[],this.animationPick=0,this.bus=t,this.aniFraBus=new eventBus,this.aniFraBus.add("fragAniOver",this,this.getAniOver),this.overAni=[],this.aniFragListId=i,this.loop=!1,this.loopTimes=!1,this.looped=0,this.object=n,this.oriOption=util.extend(n.Shape.Option,n.Shape.Option),this.oriUnOption=util.extend(n.Shape.Option,n.Shape.UnOption),this.endCallWraper=null,this.firstTime=!0};AniFragWrap.prototype={updateFrag:function(t){t.addWrapBus(this.aniFraBus),this.fragStore.length?(this.fragStore[this.fragStore.length-1].endCallFrag=t,this.fragStore.push(t)):this.fragStore.push(t)},exeAnimate:function(){if(this.object.disableDrag(),this.firstTime&&(this.firstTime=!1,this.oriOption=util.extend(this.object.Shape.Option,this.object.Shape.Option),this.oriUnOption=util.extend(this.object.Shape.Option,this.object.Shape.UnOption)),this.stoped)return this.endCallWraper?this.endCallWraper.exeAnimate():this.object.restoreDrag(),!1;this.fragStore[this.animationPick]&&this.fragStore[this.animationPick].updateAnimation()},getAniOver:function(t){if(this.overAni.push(t),this.overAni.length==this.fragStore.length){if(this.loop){if(this.loopTimes&&this.looped<=this.loopTimes&&this.looped++,this.loopTimes&&this.looped>this.loopTimes)return this.stop(),!1;this.restart()}else this.stop();return!1}this.animationPick++,this.fragStore[this.animationPick].updateSourceAndtarget()},restart:function(){this.object.restoreOption(this.oriOption),this.object.restoreOption(this.oriUnOption),this.overAni=[],this.animationPick=0,this.fragStore.forEach(function(t){t.restart()},this),this.started=!1,this.stoped=!1},stop:function(){this.stoped=!0,this.bus.dispatch("wraperAniComplete","no",this.aniFragListId,this.object.Shapeid,this.object)},resume:function(){},setLoop:function(t,i){this.loop=t||!1,this.loopTimes=i||!1,this.looped=1}};var Shape=function(t,i,n,s){this.draggable=!!s,this.strokeOrfill=n||"fill",this.type=t,this.Shape=new shapeTypes[t](i),this.draggable&&this.Shape.closeRotateOrigin(),this.AnimationTimer=new AnimationTimer,this.animtionFragList=[],this.bus=null,this.Shapeid="sp"+guid(),this.animationStart=!1,this.aniFragListId="",this.aniFragWraper=null,this._oldDrag=this.draggable,this._layerIndex=0,this._getChoosed=!1,this._eventStore={tap:[],touchstart:[],touchmove:[],touchend:[],longpress:[],drag:[]},this._nowType="tap",this._canRotateOrigin=!0};Shape.prototype={updateBus:function(t){this.bus=t},paint:function(t){switch(this.strokeOrfill){case"fill":this.Shape.fill(t);break;case"stroke":this.Shape.stroke(t);break;case"mix":this.Shape.mixDraw(t);break;case!0:this.Shape.fill(t)}},detect:function(t,i,n){this.Shape.detected(t,i)?(this._nowType=n,this.bus.dispatch("getDetectedLayers","no",this._layerIndex)):this.bus.dispatch("getDetectedLayers","no",-1)},moveDetect:function(t,i){this._getChoosed&&this._eventStore.touchmove.forEach(function(t){t(this)},this),this.draggable&&this._getChoosed&&(this._eventStore.drag.forEach(function(t){t(this)},this),this.Shape.moveDetect(t,i))},upDetect:function(){this._getChoosed&&(this.bus.dispatch("clearDetectedLayers","no"),this._eventStore.touchend.forEach(function(t){t(this)},this),this.Shape.upDetect(),this._getChoosed=!1)},animate:function(t,i,n){this.aniFragListId||(this.aniFragListId="af"+guid(),this.aniFragWraper=new AniFragWrap(this.bus,this.aniFragListId,this));var s=null;return s="object"==(void 0===t?"undefined":_typeof(t))?new AnimationFrag(this,t,"no",arguments[1],this.bus):new AnimationFrag(this,t,arguments[1],arguments[2],this.bus),this.aniFragWraper.updateFrag(s),this},start:function(t){this.animationStart=!0,this.aniFragWraper&&(!0===t&&this.aniFragWraper.setLoop(t),"number"==typeof t&&this.aniFragWraper.setLoop(!0,t),this.bus.dispatch("addAnimation","no",this.aniFragWraper,this.Shapeid),this.aniFragListId="",this.aniFragWraper=null),console.log("start")},updateOption:function(t){return this.Shape.bus||(this.Shape.bus=this.bus),this.Shape.updateOption(t),this},restoreOption:function(t){this.Shape.restoreOption(t)},setOrigin:function(t){return this.Shape.setRotateOrigin(t),this},_updateLayer:function(t){this._layerIndex=t},updateLayer:function(t){this.bus.dispatch("updateLayer","no",this,this._layerIndex,t)},getChoosed:function(){this._getChoosed=!0,this._eventStore[this._nowType].forEach(function(t){t(this)},this)},destroy:function(){this.bus.dispatch("destory","no",this._layerIndex,this.Shapeid),this.bus.dispatch("destoryAnimation","no",this._layerIndex,this.Shapeid)},restoreDrag:function(){this.draggable=this._oldDrag},disableDrag:function(){this.draggable=!1},bind:function(t,i){void 0!==this._eventStore[t]&&this._eventStore[t].push(i)},unbind:function(t,i){var n=-1;void 0!==this._eventStore[t]&&this._eventStore[t].forEach(function(t,i){n=i}),-1!==n&&this._eventStore[t].splice(n,1)},clone:function(){var t={};return"text"==this.type&&(t={text:this.Shape.text}),new Shape(this.type,_extends({},this.Shape.Option,this.Shape.UnOption,t),this.strokeOrfill,this.draggable)},updateText:function(t){if("text"!=this.type)return!1;this.Shape.updateText(t)}};var shapeTypes={circle:function(t){return new Circle(t)},rect:function(t){return new Rect(t)},polygon:function(t){return new Polygon(t)},cshape:function(t){return new Cshape(t)},line:function(t){return new Line(t)},ellipse:function(t){return new Ellipse(t)},text:function(t){return new Text(t)},image:function(t){return new Img(t)}},AnimationFrame=function(){return"undefined"!=typeof requestAnimationFrame?requestAnimationFrame:fakeAnimationFrame},animationFrame=AnimationFrame(),Animation=function(t){this.running=!1,this.paused=!0,this.bus=t,this.animationFragStore={},this.animationCompleteList=[],this.wraperAniCompleteOb={},this.bus.add("animationComplete",this,this.animationComplete),this.bus.add("wraperAniComplete",this,this.wraperAniComplete),this.bus.add("destoryAnimation",this,this.destroyAnimation),this.bus.add("clearAnimation",this,this.clearAnimation)};Animation.prototype={start:function(){this.running=!0,this.loopAnimation()},loopAnimation:function(){function t(){animationFrame(t),i.running&&i.updateStep()}var i=this;animationFrame(t)},updateStep:function(){Object.keys(this.animationFragStore).forEach(function(t){this.animationFragStore[t][0].exeAnimate()},this),this.bus.dispatch("update","no")},animationComplete:function(t){this.animationCompleteList.push(t),delete this.animationFragStore[t],Object.keys(this.wraperAniCompleteOb).length===Object.keys(this.animationFragStore).length&&(this.running=!1)},wraperAniComplete:function(t,i,n){console.log(t,i),this.wraperAniCompleteOb[i]?this.wraperAniCompleteOb[i].push(t):this.wraperAniCompleteOb[i]=[t],console.log(this.wraperAniCompleteOb[i].length,this.animationFragStore[i].length),this.wraperAniCompleteOb[i].length==this.wraperAniCompleteOb.length&&(n.restoreDrag(),this.bus.dispatch("animationComplete","no",i))},destroyAnimation:function(t,i){delete this.animationFragStore[i]},clearAnimation:function(){this.animationFragStore={},this.running=!1}},WxDraw.prototype={add:function(t){t.updateBus(this.bus),t._updateLayer(this.store.getLength()),this.store.add(t)},draw:function(){this.store.store.forEach(function(t){t.paint(this.canvas)},this)},tapDetect:function(t){this.bus.dispatch("clearDetectedLayers","no");var i=this.getLoc(t.touches[0].pageX,t.touches[0].pageY);this.store.store.forEach(function(t){t.detect(i.x,i.y,"tap")},this)},longpressDetect:function(t){this.bus.dispatch("clearDetectedLayers","no");var i=this.getLoc(t.touches[0].pageX,t.touches[0].pageY);this.store.store.forEach(function(t){t.detect(i.x,i.y,"longpress")},this)},touchstartDetect:function(t){var i={x:t.touches[0].x,y:t.touches[0].y};this.store.store.forEach(function(t){t.detect(i.x,i.y,"touchstart")},this)},touchendDetect:function(t){this.store.store.forEach(function(t){t.upDetect()},this)},touchmoveDetect:function(t){var i={x:t.touches[0].x,y:t.touches[0].y};this.store.store.forEach(function(t){t.moveDetect(i.x,i.y)},this),this.draw(),this.canvas.draw()},getLoc:function(t,i){return{x:t-this.x>0?t-this.x>this.w?this.w:t-this.x:0,y:i-this.y>0?i-this.y>this.h?this.h:i-this.y:0}},update:function(){this.draw(),this.canvas.draw()},AnimationCenter:function(){},addAnimationFrag:function(t,i){this.animation.animationFragStore[i]?(this.animation.animationFragStore[i][this.animation.animationFragStore[i].length-1].endCallWraper=t,this.animation.animationFragStore[i].push(t)):this.animation.animationFragStore[i]=[t]},getDetectedLayers:function(t){this.detectedLayers.push(t),this.detectedLayers.length==this.store.getLength()&&-1!=Math.max.apply(null,this.detectedLayers)&&this.store.find(Math.max.apply(null,this.detectedLayers)).getChoosed(),this.detectedLayers.length==this.store.getLength()&&-1==Math.max.apply(null,this.detectedLayers)&&this.clearDetectedLayers()},clearDetectedLayers:function(){this.detectedLayers=[]},updateLayer:function(t,i,n){var s=0,e=void 0;s=n,"string"==typeof n&&(e=0===n.indexOf("-")?-1:0===n.indexOf("+")&&1),s=e?i+e*parseInt(-1==e?n.split("-")[1]:n.split("+")[1]):parseInt(n),s>=this.store.store.length-1&&(s=this.store.store.length-1),s<=0&&(s=0),this.store.changeIndex(t,i,s),this._updateLayer()},destroy:function(t){this.store.store.splice(t,1)},_updateLayer:function(){this.store.store.forEach(function(t,i){t._updateLayer(i)})},clear:function(){this.canvas.clearActions(),this.store.clear(),this.canvas=null,this.bus.dispatch("clearAnimation","no","no")},reset:function(){this.canvas.clearRect(this.x,this.y,this.w,this.h),this.canvas.draw(),this.clear()}};var wxDraw={wxDraw:WxDraw,Shape:Shape,AnimationFrame:AnimationFrame()};module.exports=wxDraw; 3 | --------------------------------------------------------------------------------