├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── dist ├── react-luck-draw.cjs.js ├── react-luck-draw.cjs.min.js ├── react-luck-draw.umd.js └── react-luck-draw.umd.min.js ├── index.js ├── package.json ├── rollup.config.build.js ├── rollup.config.dev.js └── src ├── components ├── LuckyGrid.js └── LuckyWheel.js └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | yarn.lock 4 | package-lock.json 5 | .vuepress/dist 6 | dist/demo.html 7 | vue3/demo.html 8 | 9 | # local env files 10 | .env.local 11 | .env.*.local 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # Editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | * -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [2021] [Li Dong Qi] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ```diff 2 | - 🚧 该库已迁移到 https://github.com/LuckDraw/lucky-canvas 3 | ``` 4 | 5 |
6 | logo 7 |

react-luck-draw 抽奖插件

8 |

一个基于 react 的 ( 大转盘 / 九宫格 ) 抽奖插件

9 |

10 | 11 | stars 12 | 13 | 14 | forks 15 | 16 | 17 | version 18 | 19 | 20 | downloads 21 | 22 |

23 |

24 | 25 | author 26 | 27 | 28 | license 29 | 30 |

31 |
32 | 33 |
34 | 35 | -------------------------------------------------------------------------------- /dist/react-luck-draw.cjs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { value: true }); 4 | 5 | var React = require('react'); 6 | 7 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } 8 | 9 | var React__default = /*#__PURE__*/_interopDefaultLegacy(React); 10 | 11 | function _classCallCheck(instance, Constructor) { 12 | if (!(instance instanceof Constructor)) { 13 | throw new TypeError("Cannot call a class as a function"); 14 | } 15 | } 16 | 17 | function _defineProperties(target, props) { 18 | for (var i = 0; i < props.length; i++) { 19 | var descriptor = props[i]; 20 | descriptor.enumerable = descriptor.enumerable || false; 21 | descriptor.configurable = true; 22 | if ("value" in descriptor) descriptor.writable = true; 23 | Object.defineProperty(target, descriptor.key, descriptor); 24 | } 25 | } 26 | 27 | function _createClass(Constructor, protoProps, staticProps) { 28 | if (protoProps) _defineProperties(Constructor.prototype, protoProps); 29 | if (staticProps) _defineProperties(Constructor, staticProps); 30 | return Constructor; 31 | } 32 | 33 | function _defineProperty(obj, key, value) { 34 | if (key in obj) { 35 | Object.defineProperty(obj, key, { 36 | value: value, 37 | enumerable: true, 38 | configurable: true, 39 | writable: true 40 | }); 41 | } else { 42 | obj[key] = value; 43 | } 44 | 45 | return obj; 46 | } 47 | 48 | function ownKeys(object, enumerableOnly) { 49 | var keys = Object.keys(object); 50 | 51 | if (Object.getOwnPropertySymbols) { 52 | var symbols = Object.getOwnPropertySymbols(object); 53 | if (enumerableOnly) symbols = symbols.filter(function (sym) { 54 | return Object.getOwnPropertyDescriptor(object, sym).enumerable; 55 | }); 56 | keys.push.apply(keys, symbols); 57 | } 58 | 59 | return keys; 60 | } 61 | 62 | function _objectSpread2(target) { 63 | for (var i = 1; i < arguments.length; i++) { 64 | var source = arguments[i] != null ? arguments[i] : {}; 65 | 66 | if (i % 2) { 67 | ownKeys(Object(source), true).forEach(function (key) { 68 | _defineProperty(target, key, source[key]); 69 | }); 70 | } else if (Object.getOwnPropertyDescriptors) { 71 | Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 72 | } else { 73 | ownKeys(Object(source)).forEach(function (key) { 74 | Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 75 | }); 76 | } 77 | } 78 | 79 | return target; 80 | } 81 | 82 | function _inherits(subClass, superClass) { 83 | if (typeof superClass !== "function" && superClass !== null) { 84 | throw new TypeError("Super expression must either be null or a function"); 85 | } 86 | 87 | subClass.prototype = Object.create(superClass && superClass.prototype, { 88 | constructor: { 89 | value: subClass, 90 | writable: true, 91 | configurable: true 92 | } 93 | }); 94 | if (superClass) _setPrototypeOf(subClass, superClass); 95 | } 96 | 97 | function _getPrototypeOf(o) { 98 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { 99 | return o.__proto__ || Object.getPrototypeOf(o); 100 | }; 101 | return _getPrototypeOf(o); 102 | } 103 | 104 | function _setPrototypeOf(o, p) { 105 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { 106 | o.__proto__ = p; 107 | return o; 108 | }; 109 | 110 | return _setPrototypeOf(o, p); 111 | } 112 | 113 | function _isNativeReflectConstruct() { 114 | if (typeof Reflect === "undefined" || !Reflect.construct) return false; 115 | if (Reflect.construct.sham) return false; 116 | if (typeof Proxy === "function") return true; 117 | 118 | try { 119 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); 120 | return true; 121 | } catch (e) { 122 | return false; 123 | } 124 | } 125 | 126 | function _assertThisInitialized(self) { 127 | if (self === void 0) { 128 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 129 | } 130 | 131 | return self; 132 | } 133 | 134 | function _possibleConstructorReturn(self, call) { 135 | if (call && (typeof call === "object" || typeof call === "function")) { 136 | return call; 137 | } 138 | 139 | return _assertThisInitialized(self); 140 | } 141 | 142 | function _createSuper(Derived) { 143 | var hasNativeReflectConstruct = _isNativeReflectConstruct(); 144 | 145 | return function _createSuperInternal() { 146 | var Super = _getPrototypeOf(Derived), 147 | result; 148 | 149 | if (hasNativeReflectConstruct) { 150 | var NewTarget = _getPrototypeOf(this).constructor; 151 | 152 | result = Reflect.construct(Super, arguments, NewTarget); 153 | } else { 154 | result = Super.apply(this, arguments); 155 | } 156 | 157 | return _possibleConstructorReturn(this, result); 158 | }; 159 | } 160 | 161 | function createCommonjsModule(fn) { 162 | var module = { exports: {} }; 163 | return fn(module, module.exports), module.exports; 164 | } 165 | 166 | var luckyCanvas_cjs_min = createCommonjsModule(function (module, exports) { 167 | 168 | Object.defineProperty(exports, "__esModule", { 169 | value: !0 170 | }); 171 | /*! ***************************************************************************** 172 | Copyright (c) Microsoft Corporation. 173 | 174 | Permission to use, copy, modify, and/or distribute this software for any 175 | purpose with or without fee is hereby granted. 176 | 177 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 178 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 179 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 180 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 181 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 182 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 183 | PERFORMANCE OF THIS SOFTWARE. 184 | ***************************************************************************** */ 185 | 186 | var t = function (e, i) { 187 | return (t = Object.setPrototypeOf || { 188 | __proto__: [] 189 | } instanceof Array && function (t, e) { 190 | t.__proto__ = e; 191 | } || function (t, e) { 192 | for (var i in e) Object.prototype.hasOwnProperty.call(e, i) && (t[i] = e[i]); 193 | })(e, i); 194 | }; 195 | 196 | function e(e, i) { 197 | function n() { 198 | this.constructor = e; 199 | } 200 | 201 | t(e, i), e.prototype = null === i ? Object.create(i) : (n.prototype = i.prototype, new n()); 202 | } 203 | 204 | var i = function () { 205 | return (i = Object.assign || function (t) { 206 | for (var e, i = 1, n = arguments.length; i < n; i++) for (var r in e = arguments[i]) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r]); 207 | 208 | return t; 209 | }).apply(this, arguments); 210 | }; 211 | 212 | function n(t, e, i, n) { 213 | return new (i || (i = Promise))(function (r, o) { 214 | function s(t) { 215 | try { 216 | u(n.next(t)); 217 | } catch (t) { 218 | o(t); 219 | } 220 | } 221 | 222 | function a(t) { 223 | try { 224 | u(n.throw(t)); 225 | } catch (t) { 226 | o(t); 227 | } 228 | } 229 | 230 | function u(t) { 231 | var e; 232 | t.done ? r(t.value) : (e = t.value, e instanceof i ? e : new i(function (t) { 233 | t(e); 234 | })).then(s, a); 235 | } 236 | 237 | u((n = n.apply(t, e || [])).next()); 238 | }); 239 | } 240 | 241 | function r(t, e) { 242 | var i, 243 | n, 244 | r, 245 | o, 246 | s = { 247 | label: 0, 248 | sent: function () { 249 | if (1 & r[0]) throw r[1]; 250 | return r[1]; 251 | }, 252 | trys: [], 253 | ops: [] 254 | }; 255 | return o = { 256 | next: a(0), 257 | throw: a(1), 258 | return: a(2) 259 | }, "function" == typeof Symbol && (o[Symbol.iterator] = function () { 260 | return this; 261 | }), o; 262 | 263 | function a(o) { 264 | return function (a) { 265 | return function (o) { 266 | if (i) throw new TypeError("Generator is already executing."); 267 | 268 | for (; s;) try { 269 | if (i = 1, n && (r = 2 & o[0] ? n.return : o[0] ? n.throw || ((r = n.return) && r.call(n), 0) : n.next) && !(r = r.call(n, o[1])).done) return r; 270 | 271 | switch (n = 0, r && (o = [2 & o[0], r.value]), o[0]) { 272 | case 0: 273 | case 1: 274 | r = o; 275 | break; 276 | 277 | case 4: 278 | return s.label++, { 279 | value: o[1], 280 | done: !1 281 | }; 282 | 283 | case 5: 284 | s.label++, n = o[1], o = [0]; 285 | continue; 286 | 287 | case 7: 288 | o = s.ops.pop(), s.trys.pop(); 289 | continue; 290 | 291 | default: 292 | if (!(r = s.trys, (r = r.length > 0 && r[r.length - 1]) || 6 !== o[0] && 2 !== o[0])) { 293 | s = 0; 294 | continue; 295 | } 296 | 297 | if (3 === o[0] && (!r || o[1] > r[0] && o[1] < r[3])) { 298 | s.label = o[1]; 299 | break; 300 | } 301 | 302 | if (6 === o[0] && s.label < r[1]) { 303 | s.label = r[1], r = o; 304 | break; 305 | } 306 | 307 | if (r && s.label < r[2]) { 308 | s.label = r[2], s.ops.push(o); 309 | break; 310 | } 311 | 312 | r[2] && s.ops.pop(), s.trys.pop(); 313 | continue; 314 | } 315 | 316 | o = e.call(t, s); 317 | } catch (t) { 318 | o = [6, t], n = 0; 319 | } finally { 320 | i = r = 0; 321 | } 322 | 323 | if (5 & o[0]) throw o[1]; 324 | return { 325 | value: o[0] ? o[1] : void 0, 326 | done: !0 327 | }; 328 | }([o, a]); 329 | }; 330 | } 331 | } 332 | 333 | function o() { 334 | for (var t = 0, e = 0, i = arguments.length; e < i; e++) t += arguments[e].length; 335 | 336 | var n = Array(t), 337 | r = 0; 338 | 339 | for (e = 0; e < i; e++) for (var o = arguments[e], s = 0, a = o.length; s < a; s++, r++) n[r] = o[s]; 340 | 341 | return n; 342 | } 343 | 344 | String.prototype.includes || (String.prototype.includes = function (t, e) { 345 | return "number" != typeof e && (e = 0), !(e + t.length > this.length) && -1 !== this.indexOf(t, e); 346 | }), Array.prototype.find || Object.defineProperty(Array.prototype, "find", { 347 | value: function (t) { 348 | if (null == this) throw new TypeError('"this" is null or not defined'); 349 | var e = Object(this), 350 | i = e.length >>> 0; 351 | if ("function" != typeof t) throw new TypeError("predicate must be a function"); 352 | 353 | for (var n = arguments[1], r = 0; r < i;) { 354 | var o = e[r]; 355 | if (t.call(n, o, r, e)) return o; 356 | r++; 357 | } 358 | } 359 | }); 360 | 361 | var s = function (t) { 362 | for (var e = [], i = 1; i < arguments.length; i++) e[i - 1] = arguments[i]; 363 | 364 | return e.some(function (e) { 365 | return Object.prototype.toString.call(t).slice(8, -1).toLowerCase() === e; 366 | }); 367 | }, 368 | a = function (t) { 369 | return [].filter.call(t, function (t) { 370 | return "\n" !== t; 371 | }).join(""); 372 | }, 373 | u = function (t) { 374 | if ("string" != typeof t) return !1; 375 | if ("transparent" === (t = t.toLocaleLowerCase().trim())) return !1; 376 | 377 | if (/^rgba/.test(t)) { 378 | var e = /([^\s,]+)\)$/.exec(t); 379 | if (0 === (null === (i = e) ? 0 : "object" == typeof i ? NaN : "number" == typeof i ? i : "string" == typeof i ? "%" === i[i.length - 1] ? Number(i.slice(0, -1)) / 100 : Number(i) : NaN)) return !1; 380 | } 381 | 382 | var i; 383 | return !0; 384 | }, 385 | h = function () { 386 | function t() { 387 | this.subs = []; 388 | } 389 | 390 | return t.prototype.addSub = function (t) { 391 | this.subs.includes(t) || this.subs.push(t); 392 | }, t.prototype.notify = function () { 393 | this.subs.forEach(function (t) { 394 | t.update(); 395 | }); 396 | }, t; 397 | }(), 398 | c = ("__proto__" in {}); 399 | 400 | function l(t, e, i, n) { 401 | Object.defineProperty(t, e, { 402 | value: i, 403 | enumerable: !!n, 404 | writable: !0, 405 | configurable: !0 406 | }); 407 | } 408 | 409 | var f = Array.prototype, 410 | d = Object.create(f); 411 | ["push", "pop", "shift", "unshift", "sort", "splice", "reverse"].forEach(function (t) { 412 | d[t] = function () { 413 | for (var e = [], i = 0; i < arguments.length; i++) e[i] = arguments[i]; 414 | 415 | var n = f[t].apply(this, e), 416 | r = this.__luckyOb__; 417 | return ["push", "unshift", "splice"].includes(t) && r.walk(this), r.dep.notify(), n; 418 | }; 419 | }); 420 | 421 | var p = function () { 422 | function t(t) { 423 | this.dep = new h(), l(t, "__luckyOb__", this), Array.isArray(t) && (c ? t.__proto__ = d : Object.getOwnPropertyNames(d).forEach(function (e) { 424 | l(t, e, d[e]); 425 | })), this.walk(t); 426 | } 427 | 428 | return t.prototype.walk = function (t) { 429 | Object.keys(t).forEach(function (e) { 430 | m(t, e, t[e]); 431 | }); 432 | }, t; 433 | }(); 434 | 435 | function g(t) { 436 | if (t && "object" == typeof t) return "__luckyOb__" in t ? t.__luckyOb__ : new p(t); 437 | } 438 | 439 | function m(t, e, i) { 440 | var n = new h(), 441 | r = Object.getOwnPropertyDescriptor(t, e); 442 | 443 | if (!r || !1 !== r.configurable) { 444 | var o = r && r.get, 445 | s = r && r.set; 446 | o && !s || 2 !== arguments.length || (i = t[e]); 447 | var a = g(i); 448 | Object.defineProperty(t, e, { 449 | get: function () { 450 | var e = o ? o.call(t) : i; 451 | return h.target && (n.addSub(h.target), a && a.dep.addSub(h.target)), e; 452 | }, 453 | set: function (e) { 454 | e !== i && (i = e, o && !s || (s ? s.call(t, e) : i = e, a = g(e), n.notify())); 455 | } 456 | }); 457 | } 458 | } 459 | 460 | var v = 0, 461 | b = function () { 462 | function t(t, e, i, n) { 463 | void 0 === n && (n = {}), this.id = v++, this.$lucky = t, this.expr = e, this.deep = !!n.deep, this.getter = "function" == typeof e ? e : function (t) { 464 | t += "."; 465 | 466 | for (var e = [], i = "", n = 0; n < t.length; n++) { 467 | var r = t[n]; 468 | if (/\[|\./.test(r)) e.push(i), i = "";else { 469 | if (/\W/.test(r)) continue; 470 | i += r; 471 | } 472 | } 473 | 474 | return function (t) { 475 | return e.reduce(function (t, e) { 476 | return t[e]; 477 | }, t); 478 | }; 479 | }(e), this.cb = i, this.value = this.get(); 480 | } 481 | 482 | return t.prototype.get = function () { 483 | h.target = this; 484 | var t = this.getter.call(this.$lucky, this.$lucky); 485 | return this.deep && function (t) { 486 | var e = function (t) { 487 | s(t, "array", "object") && Object.keys(t).forEach(function (i) { 488 | var n = t[i]; 489 | e(n); 490 | }); 491 | }; 492 | 493 | e(t); 494 | }(t), h.target = null, t; 495 | }, t.prototype.update = function () { 496 | var t = this.get(), 497 | e = this.value; 498 | this.value = t, this.cb.call(this.$lucky, t, e); 499 | }, t; 500 | }(), 501 | w = function () { 502 | function t(t) { 503 | var e = this; 504 | this.htmlFontSize = 16, this.rAF = function () {}, this.setHTMLFontSize(), "string" == typeof t ? t = { 505 | el: t 506 | } : 1 === t.nodeType && (t = { 507 | el: "", 508 | divElement: t 509 | }), t = t, this.config = t, this.setDpr(), this.initWindowFunction(), t.flag || (t.flag = "WEB"), Object.prototype.hasOwnProperty.call(t, "ob") || (t.ob = !0), t.el && (t.divElement = document.querySelector(t.el)); 510 | var i = 0, 511 | n = 0; 512 | t.divElement && (i = t.divElement.offsetWidth, n = t.divElement.offsetHeight, t.canvasElement = document.createElement("canvas"), t.divElement.appendChild(t.canvasElement)), t.width = this.getLength(t.width) || i, t.height = this.getLength(t.height) || n, t.divElement && (t.divElement.style.overflow = "hidden", t.divElement.style.width = t.width + "px", t.divElement.style.height = t.height + "px"), t.canvasElement && (t.ctx = t.canvasElement.getContext("2d"), t.canvasElement.setAttribute("package", "lucky-canvas@1.5.2"), t.canvasElement.addEventListener("click", function (t) { 513 | return e.handleClick(t); 514 | }), t.canvasElement.addEventListener("mousemove", function (t) { 515 | return e.handleMouseMove(t); 516 | }), t.canvasElement.addEventListener("mousedown", function (t) { 517 | return e.handleMouseDown(t); 518 | }), t.canvasElement.addEventListener("mouseup", function (t) { 519 | return e.handleMouseUp(t); 520 | })), this.ctx = t.ctx, t.ctx && t.width && t.height || console.error("无法获取到 CanvasContext2D 或宽高"); 521 | } 522 | 523 | return t.prototype.handleClick = function (t) {}, t.prototype.handleMouseDown = function (t) {}, t.prototype.handleMouseUp = function (t) {}, t.prototype.handleMouseMove = function (t) {}, t.prototype.conversionAxis = function (t, e) { 524 | return [0, 0]; 525 | }, t.prototype.setDpr = function () { 526 | var t = this.config; 527 | t.dpr || (window ? window.dpr = t.dpr = window.devicePixelRatio || 1 : t.dpr || console.error(t, "未传入 dpr 可能会导致绘制异常")); 528 | }, t.prototype.setHTMLFontSize = function () { 529 | window && (this.htmlFontSize = +window.getComputedStyle(document.documentElement).fontSize.slice(0, -2)); 530 | }, t.prototype.initWindowFunction = function () { 531 | var t = this.config; 532 | if (window) return this.rAF = window.requestAnimationFrame, t.setTimeout = window.setTimeout, t.setInterval = window.setInterval, t.clearTimeout = window.clearTimeout, void (t.clearInterval = window.clearInterval); 533 | if (t.rAF) this.rAF = t.rAF;else if (t.setTimeout) { 534 | var e = t.setTimeout; 535 | 536 | this.rAF = function (t) { 537 | return e(t, 16); 538 | }; 539 | } else this.rAF = function (t) { 540 | return setTimeout(t, 16); 541 | }; 542 | }, t.prototype.zoomCanvas = function () { 543 | var t = this.config, 544 | e = this.ctx, 545 | i = t.canvasElement, 546 | n = t.dpr, 547 | r = function (t) { 548 | return (t * n - t) / (t * n) * (n / 2) * 100; 549 | }; 550 | 551 | i && (i.width = t.width * n, i.height = t.height * n, i.style.width = i.width + "px", i.style.height = i.height + "px", i.style.transform = "scale(" + 1 / n + ") translate(\n " + -r(i.width) + "%, " + -r(i.height) + "%\n )", e.scale(n, n)); 552 | }, t.prototype.loadImg = function (t, e, i) { 553 | var n = this; 554 | return void 0 === i && (i = "$resolve"), new Promise(function (r, o) { 555 | if (t || o("=> '" + e.src + "' 不能为空或不合法"), "WEB" === n.config.flag) { 556 | var s = new Image(); 557 | s.src = t, s.onload = function () { 558 | return r(s); 559 | }, s.onerror = function () { 560 | return o("=> '" + e.src + "' 图片加载失败"); 561 | }; 562 | } else e[i] = r; 563 | }); 564 | }, t.prototype.drawImage = function (t, e, i, n, r) { 565 | var o, 566 | s = this.config, 567 | a = this.ctx; 568 | return ["WEB", "MP-WX"].includes(s.flag) ? o = t : ["UNI-H5", "UNI-MP", "TARO-H5", "TARO-MP"].includes(s.flag) && (o = t.path), a.drawImage(o, e, i, n, r); 569 | }, t.prototype.getLength = function (t) { 570 | return s(t, "number") ? t : s(t, "string") ? this.changeUnits(t) : 0; 571 | }, t.prototype.changeUnits = function (t, e) { 572 | var i = this; 573 | return void 0 === e && (e = 1), Number(t.replace(/^([-]*[0-9.]*)([a-z%]*)$/, function (t, n, r) { 574 | var o = { 575 | "%": function (t) { 576 | return t * (e / 100); 577 | }, 578 | px: function (t) { 579 | return 1 * t; 580 | }, 581 | rem: function (t) { 582 | return t * i.htmlFontSize; 583 | } 584 | }[r]; 585 | if (o) return o(n); 586 | var s = i.config.unitFunc; 587 | return s ? s(n, r) : n; 588 | })); 589 | }, t.prototype.$set = function (t, e, i) { 590 | t && "object" == typeof t && m(t, e, i); 591 | }, t.prototype.$computed = function (t, e, i) { 592 | var n = this; 593 | Object.defineProperty(t, e, { 594 | get: function () { 595 | return i.call(n); 596 | } 597 | }); 598 | }, t.prototype.$watch = function (t, e, i) { 599 | void 0 === i && (i = {}), "object" == typeof e && (e = (i = e).handler); 600 | var n = new b(this, t, e, i); 601 | return i.immediate && e.call(this, n.value), function () {}; 602 | }, t; 603 | }(), 604 | y = function (t) { 605 | return Math.PI / 180 * t; 606 | }, 607 | z = function (t, e) { 608 | return [+(Math.cos(t) * e).toFixed(8), +(Math.sin(t) * e).toFixed(8)]; 609 | }, 610 | I = function (t, e) { 611 | var i = -t / e; 612 | return [i, -i * t + e]; 613 | }, 614 | S = function (t, e, i, n, r, o) { 615 | var s; 616 | 617 | if (void 0 === o && (o = !0), Math.abs(r - n).toFixed(8) >= y(180).toFixed(8)) { 618 | var a = (r + n) / 2; 619 | return o ? (S(t, e, i, n, a, o), S(t, e, i, a, r, o)) : (S(t, e, i, a, r, o), S(t, e, i, n, a, o)), !1; 620 | } 621 | 622 | o || (n = (s = [r, n])[0], r = s[1]); 623 | var u = z(n, i), 624 | h = u[0], 625 | c = u[1], 626 | l = z(r, i), 627 | f = l[0], 628 | d = l[1], 629 | p = I(h, c), 630 | g = p[0], 631 | m = p[1], 632 | v = I(f, d), 633 | b = v[0], 634 | w = v[1], 635 | x = (w - m) / (g - b), 636 | k = (b * m - g * w) / (b - g); 637 | isNaN(x) && (Math.abs(h) === +i.toFixed(8) && (x = h), Math.abs(f) === +i.toFixed(8) && (x = f)), g === 1 / 0 || g === -1 / 0 ? k = b * x + w : b !== 1 / 0 && b !== -1 / 0 || (k = g * x + m), e.lineTo(h, c), t.indexOf("MP") > 0 ? e.quadraticCurveTo(x, k, f, d) : e.arcTo(x, k, f, d, i); 638 | }, 639 | x = function (t, e, i, n, r, o, s, a) { 640 | i || (i = s); 641 | var u = y(90 / Math.PI / n * s), 642 | h = y(90 / Math.PI / i * s), 643 | c = r + u, 644 | l = o - u, 645 | f = r + h, 646 | d = o - h; 647 | e.beginPath(), e.fillStyle = a, e.moveTo.apply(e, z(c, n)), S(t, e, n, c, l, !0), d > f ? S(t, e, i, f, d, !1) : e.lineTo.apply(e, z((r + o) / 2, s / 2 / Math.abs(Math.sin((r - o) / 2)))), e.closePath(), e.fill(); 648 | }, 649 | k = function (t, e, i, n, r, o, s) { 650 | var a = Math.min(n, r); 651 | o > a / 2 && (o = a / 2), t.beginPath(), t.fillStyle = s, t.moveTo(e + o, i), t.lineTo(e + o, i), t.lineTo(e + n - o, i), t.quadraticCurveTo(e + n, i, e + n, i + o), t.lineTo(e + n, i + r - o), t.quadraticCurveTo(e + n, i + r, e + n - o, i + r), t.lineTo(e + o, i + r), t.quadraticCurveTo(e, i + r, e, i + r - o), t.lineTo(e, i + o), t.quadraticCurveTo(e, i, e + o, i), t.closePath(), t.fill(); 652 | }, 653 | T = { 654 | easeIn: function (t, e, i, n) { 655 | return t >= n && (t = n), i * (t /= n) * t + e; 656 | }, 657 | easeOut: function (t, e, i, n) { 658 | return t >= n && (t = n), -i * (t /= n) * (t - 2) + e; 659 | } 660 | }, 661 | C = { 662 | easeIn: function (t, e, i, n) { 663 | return t >= n && (t = n), -i * Math.cos(t / n * (Math.PI / 2)) + i + e; 664 | }, 665 | easeOut: function (t, e, i, n) { 666 | return t >= n && (t = n), i * Math.sin(t / n * (Math.PI / 2)) + e; 667 | } 668 | }, 669 | O = { 670 | easeIn: function (t, e, i, n) { 671 | return t >= n && (t = n), 0 == t ? e : i * Math.pow(2, 10 * (t / n - 1)) + e; 672 | }, 673 | easeOut: function (t, e, i, n) { 674 | return t >= n && (t = n), t == n ? e + i : i * (1 - Math.pow(2, -10 * t / n)) + e; 675 | } 676 | }, 677 | _ = { 678 | easeIn: function (t, e, i, n) { 679 | return t >= n && (t = n), -i * (Math.sqrt(1 - (t /= n) * t) - 1) + e; 680 | }, 681 | easeOut: function (t, e, i, n) { 682 | return t >= n && (t = n), i * Math.sqrt(1 - (t = t / n - 1) * t) + e; 683 | } 684 | }, 685 | E = Object.freeze({ 686 | __proto__: null, 687 | quad: T, 688 | cubic: { 689 | easeIn: function (t, e, i, n) { 690 | return t >= n && (t = n), i * (t /= n) * t * t + e; 691 | }, 692 | easeOut: function (t, e, i, n) { 693 | return t >= n && (t = n), i * ((t = t / n - 1) * t * t + 1) + e; 694 | } 695 | }, 696 | quart: { 697 | easeIn: function (t, e, i, n) { 698 | return t >= n && (t = n), i * (t /= n) * t * t * t + e; 699 | }, 700 | easeOut: function (t, e, i, n) { 701 | return t >= n && (t = n), -i * ((t = t / n - 1) * t * t * t - 1) + e; 702 | } 703 | }, 704 | quint: { 705 | easeIn: function (t, e, i, n) { 706 | return t >= n && (t = n), i * (t /= n) * t * t * t * t + e; 707 | }, 708 | easeOut: function (t, e, i, n) { 709 | return t >= n && (t = n), i * ((t = t / n - 1) * t * t * t * t + 1) + e; 710 | } 711 | }, 712 | sine: C, 713 | expo: O, 714 | circ: _ 715 | }), 716 | P = function (t) { 717 | function o(e, i) { 718 | void 0 === i && (i = {}); 719 | var n = t.call(this, e) || this; 720 | return n.blocks = [], n.prizes = [], n.buttons = [], n.defaultConfig = {}, n._defaultConfig = { 721 | gutter: "0px", 722 | offsetDegree: 0, 723 | speed: 20, 724 | speedFunction: "quad", 725 | accelerationTime: 2500, 726 | decelerationTime: 2500, 727 | stopRange: .8 728 | }, n.defaultStyle = {}, n._defaultStyle = { 729 | fontSize: "18px", 730 | fontColor: "#000", 731 | fontStyle: "sans-serif", 732 | fontWeight: "400", 733 | lineHeight: "", 734 | background: "transparent", 735 | wordWrap: !0, 736 | lengthLimit: "90%" 737 | }, n.Radius = 0, n.prizeRadius = 0, n.prizeDeg = 0, n.prizeRadian = 0, n.rotateDeg = 0, n.maxBtnRadius = 0, n.startTime = 0, n.endTime = 0, n.stopDeg = 0, n.endDeg = 0, n.FPS = 16.6, n.blockImgs = [[]], n.prizeImgs = [[]], n.btnImgs = [[]], e.ob && (n.initData(i), n.initWatch()), n.initComputed(), n.init({ 738 | blockImgs: n.blocks.map(function (t) { 739 | return t.imgs; 740 | }), 741 | prizeImgs: n.prizes.map(function (t) { 742 | return t.imgs; 743 | }), 744 | btnImgs: n.buttons.map(function (t) { 745 | return t.imgs; 746 | }) 747 | }), n; 748 | } 749 | 750 | return e(o, t), o.prototype.initData = function (t) { 751 | this.$set(this, "blocks", t.blocks || []), this.$set(this, "prizes", t.prizes || []), this.$set(this, "buttons", t.buttons || []), this.$set(this, "defaultConfig", t.defaultConfig || {}), this.$set(this, "defaultStyle", t.defaultStyle || {}), this.$set(this, "startCallback", t.start), this.$set(this, "endCallback", t.end); 752 | }, o.prototype.initComputed = function () { 753 | var t = this; 754 | this.$computed(this, "_defaultConfig", function () { 755 | return i({ 756 | gutter: "0px", 757 | offsetDegree: 0, 758 | speed: 20, 759 | speedFunction: "quad", 760 | accelerationTime: 2500, 761 | decelerationTime: 2500, 762 | stopRange: .8 763 | }, t.defaultConfig); 764 | }), this.$computed(this, "_defaultStyle", function () { 765 | return i({ 766 | fontSize: "18px", 767 | fontColor: "#000", 768 | fontStyle: "sans-serif", 769 | fontWeight: "400", 770 | background: "transparent", 771 | wordWrap: !0, 772 | lengthLimit: "90%" 773 | }, t.defaultStyle); 774 | }); 775 | }, o.prototype.initWatch = function () { 776 | var t = this; 777 | this.$watch("blocks", function (e) { 778 | return t.init({ 779 | blockImgs: e.map(function (t) { 780 | return t.imgs; 781 | }) 782 | }); 783 | }, { 784 | deep: !0 785 | }), this.$watch("prizes", function (e) { 786 | return t.init({ 787 | prizeImgs: e.map(function (t) { 788 | return t.imgs; 789 | }) 790 | }); 791 | }, { 792 | deep: !0 793 | }), this.$watch("buttons", function (e) { 794 | return t.init({ 795 | btnImgs: e.map(function (t) { 796 | return t.imgs; 797 | }) 798 | }); 799 | }, { 800 | deep: !0 801 | }), this.$watch("defaultConfig", function () { 802 | return t.draw(); 803 | }, { 804 | deep: !0 805 | }), this.$watch("defaultStyle", function () { 806 | return t.draw(); 807 | }, { 808 | deep: !0 809 | }), this.$watch("startCallback", function () { 810 | return t.init({}); 811 | }), this.$watch("endCallback", function () { 812 | return t.init({}); 813 | }); 814 | }, o.prototype.init = function (t) { 815 | var e, 816 | i, 817 | n = this, 818 | r = this.config, 819 | o = this.ctx; 820 | this.setDpr(), this.setHTMLFontSize(), this.zoomCanvas(), this.Radius = Math.min(r.width, r.height) / 2, null === (e = r.beforeInit) || void 0 === e || e.call(this), o.translate(this.Radius, this.Radius), this.draw(), Object.keys(t).forEach(function (e) { 821 | var i = e, 822 | r = { 823 | blockImgs: "blocks", 824 | prizeImgs: "prizes", 825 | btnImgs: "buttons" 826 | }[i], 827 | o = t[i]; 828 | o && o.forEach(function (t, e) { 829 | t && t.forEach(function (t, o) { 830 | n.loadAndCacheImg(r, e, i, o, function () { 831 | n.draw(); 832 | }); 833 | }); 834 | }); 835 | }), null === (i = r.afterInit) || void 0 === i || i.call(this); 836 | }, o.prototype.handleClick = function (t) { 837 | var e, 838 | i = this.ctx; 839 | i.beginPath(), i.arc(0, 0, this.maxBtnRadius, 0, 2 * Math.PI, !1), i.isPointInPath(t.offsetX, t.offsetY) && (this.startTime || null === (e = this.startCallback) || void 0 === e || e.call(this, t)); 840 | }, o.prototype.loadAndCacheImg = function (t, e, i, o, s) { 841 | return n(this, void 0, void 0, function () { 842 | var n, 843 | a, 844 | u = this; 845 | return r(this, function (r) { 846 | return (n = this[t][e]) && n.imgs && (a = n.imgs[o]) ? (this[i][e] || (this[i][e] = []), this.loadImg(a.src, a).then(function (t) { 847 | u[i][e][o] = t, s.call(u); 848 | }).catch(function (i) { 849 | console.error(t + "[" + e + "].imgs[" + o + "] " + i); 850 | }), [2]) : [2]; 851 | }); 852 | }); 853 | }, o.prototype.computedWidthAndHeight = function (t, e, i, n) { 854 | if (!e.width && !e.height) return [t.width, t.height]; 855 | 856 | if (e.width && !e.height) { 857 | var r = this.getWidth(e.width, i); 858 | return [r, t.height * (r / t.width)]; 859 | } 860 | 861 | if (!e.width && e.height) { 862 | var o = this.getHeight(e.height, n); 863 | return [t.width * (o / t.height), o]; 864 | } 865 | 866 | return [this.getWidth(e.width, i), this.getHeight(e.height, n)]; 867 | }, o.prototype.draw = function () { 868 | var t, 869 | e, 870 | i = this, 871 | n = this, 872 | r = n.config, 873 | o = n.ctx, 874 | s = n._defaultConfig, 875 | h = n._defaultStyle; 876 | null === (t = r.beforeDraw) || void 0 === t || t.call(this, o), o.clearRect(-this.Radius, -this.Radius, 2 * this.Radius, 2 * this.Radius), this.prizeRadius = this.blocks.reduce(function (t, e, n) { 877 | return u(e.background) && (o.beginPath(), o.fillStyle = e.background, o.arc(0, 0, t, 0, 2 * Math.PI, !1), o.fill()), e.imgs && e.imgs.forEach(function (e, r) { 878 | if (i.blockImgs[n]) { 879 | var s = i.blockImgs[n][r]; 880 | 881 | if (s) { 882 | var a = i.computedWidthAndHeight(s, e, 2 * t, 2 * t), 883 | u = a[0], 884 | h = a[1], 885 | c = [i.getOffsetX(u), i.getHeight(e.top, 2 * t) - t], 886 | l = c[0], 887 | f = c[1]; 888 | o.save(), e.rotate && o.rotate(y(i.rotateDeg)), i.drawImage(s, l, f, u, h), o.restore(); 889 | } 890 | } 891 | }), t - i.getLength(e.padding && e.padding.split(" ")[0]); 892 | }, this.Radius), this.prizeDeg = 360 / this.prizes.length, this.prizeRadian = y(this.prizeDeg); 893 | 894 | var c = y(-90 + this.rotateDeg + s.offsetDegree), 895 | l = function (t) { 896 | return i.getOffsetX(o.measureText(t).width); 897 | }, 898 | f = function (t, e, n) { 899 | var r = t.lineHeight || h.lineHeight || t.fontSize || h.fontSize; 900 | return i.getHeight(t.top, e) + (n + 1) * i.getLength(r); 901 | }; 902 | 903 | o.save(), this.prizes.forEach(function (t, e) { 904 | var n = c + e * i.prizeRadian, 905 | d = i.prizeRadius - i.maxBtnRadius, 906 | p = t.background || h.background; 907 | u(p) && function (t, e, i, n, r, o, s, a) { 908 | s ? x(t, e, i, n, r, o, s, a) : (e.beginPath(), e.fillStyle = a, e.moveTo(0, 0), e.arc(0, 0, n, r, o, !1), e.closePath(), e.fill()); 909 | }(r.flag, o, i.maxBtnRadius, i.prizeRadius, n - i.prizeRadian / 2, n + i.prizeRadian / 2, i.getLength(s.gutter), p); 910 | var g = Math.cos(n) * i.prizeRadius, 911 | m = Math.sin(n) * i.prizeRadius; 912 | o.translate(g, m), o.rotate(n + y(90)), t.imgs && t.imgs.forEach(function (t, n) { 913 | if (i.prizeImgs[e]) { 914 | var r = i.prizeImgs[e][n]; 915 | 916 | if (r) { 917 | var o = i.computedWidthAndHeight(r, t, i.prizeRadian * i.prizeRadius, d), 918 | s = o[0], 919 | a = o[1], 920 | u = [i.getOffsetX(s), i.getHeight(t.top, d)], 921 | h = u[0], 922 | c = u[1]; 923 | i.drawImage(r, h, c, s, a); 924 | } 925 | } 926 | }), t.fonts && t.fonts.forEach(function (t) { 927 | var e = t.fontColor || h.fontColor, 928 | n = t.fontWeight || h.fontWeight, 929 | r = i.getLength(t.fontSize || h.fontSize), 930 | u = t.fontStyle || h.fontStyle; 931 | o.fillStyle = e, o.font = n + " " + (r >> 0) + "px " + u; 932 | var c = [], 933 | p = String(t.text); 934 | 935 | if (Object.prototype.hasOwnProperty.call(t, "wordWrap") ? t.wordWrap : h.wordWrap) { 936 | p = a(p); 937 | 938 | for (var g = "", m = 0; m < p.length; m++) { 939 | g += p[m]; 940 | var v = o.measureText(g).width, 941 | b = (i.prizeRadius - f(t, d, c.length)) * Math.tan(i.prizeRadian / 2) * 2 - i.getLength(s.gutter); 942 | v > i.getWidth(t.lengthLimit || h.lengthLimit, b) && (c.push(g.slice(0, -1)), g = p[m]); 943 | } 944 | 945 | g && c.push(g), c.length || c.push(p); 946 | } else c = p.split("\n"); 947 | 948 | c.filter(function (t) { 949 | return !!t; 950 | }).forEach(function (e, i) { 951 | o.fillText(e, l(e), f(t, d, i)); 952 | }); 953 | }), o.rotate(y(360) - n - y(90)), o.translate(-g, -m); 954 | }), o.restore(), this.buttons.forEach(function (t, e) { 955 | var n = i.getHeight(t.radius); 956 | i.maxBtnRadius = Math.max(i.maxBtnRadius, n), u(t.background) && (o.beginPath(), o.fillStyle = t.background, o.arc(0, 0, n, 0, 2 * Math.PI, !1), o.fill()), t.pointer && u(t.background) && (o.beginPath(), o.fillStyle = t.background, o.moveTo(-n, 0), o.lineTo(n, 0), o.lineTo(0, 2 * -n), o.closePath(), o.fill()), t.imgs && t.imgs.forEach(function (t, r) { 957 | if (i.btnImgs[e]) { 958 | var o = i.btnImgs[e][r]; 959 | 960 | if (o) { 961 | var s = i.computedWidthAndHeight(o, t, 2 * n, 2 * n), 962 | a = s[0], 963 | u = s[1], 964 | h = [i.getOffsetX(a), i.getHeight(t.top, n)], 965 | c = h[0], 966 | l = h[1]; 967 | i.drawImage(o, c, l, a, u); 968 | } 969 | } 970 | }), t.fonts && t.fonts.forEach(function (t) { 971 | var e = t.fontColor || h.fontColor, 972 | r = t.fontWeight || h.fontWeight, 973 | s = i.getLength(t.fontSize || h.fontSize), 974 | a = t.fontStyle || h.fontStyle; 975 | o.fillStyle = e, o.font = r + " " + (s >> 0) + "px " + a, String(t.text).split("\n").forEach(function (e, i) { 976 | o.fillText(e, l(e), f(t, n, i)); 977 | }); 978 | }); 979 | }), null === (e = r.afterDraw) || void 0 === e || e.call(this, o); 980 | }, o.prototype.play = function () { 981 | this.startTime || (this.startTime = Date.now(), this.prizeFlag = void 0, this.run()); 982 | }, o.prototype.stop = function (t) { 983 | this.prizeFlag = t < 0 ? -1 : t % this.prizes.length, -1 === this.prizeFlag && (this.rotateDeg = this.prizeDeg / 2 - this._defaultConfig.offsetDegree, this.draw()); 984 | }, o.prototype.run = function (t) { 985 | void 0 === t && (t = 0); 986 | var e = this, 987 | i = e.rAF, 988 | n = e.prizeFlag, 989 | r = e.prizeDeg, 990 | o = e.rotateDeg, 991 | s = e._defaultConfig, 992 | a = Date.now() - this.startTime; 993 | 994 | if (a >= s.accelerationTime && void 0 !== n) { 995 | this.FPS = a / t, this.endTime = Date.now(), this.stopDeg = o; 996 | 997 | for (var u = (Math.random() * r - r / 2) * this.getLength(s.stopRange), h = 0; ++h;) { 998 | var c = 360 * h - n * r - o - s.offsetDegree + u; 999 | 1000 | if (E[s.speedFunction].easeOut(this.FPS, this.stopDeg, c, s.decelerationTime) - this.stopDeg > s.speed) { 1001 | this.endDeg = c; 1002 | break; 1003 | } 1004 | } 1005 | 1006 | return this.slowDown(); 1007 | } 1008 | 1009 | this.rotateDeg = (o + E[s.speedFunction].easeIn(a, 0, s.speed, s.accelerationTime)) % 360, this.draw(), i(this.run.bind(this, t + 1)); 1010 | }, o.prototype.slowDown = function () { 1011 | var t, 1012 | e = this, 1013 | n = e.rAF, 1014 | r = e.prizes, 1015 | o = e.prizeFlag, 1016 | s = e.stopDeg, 1017 | a = e.endDeg, 1018 | u = e._defaultConfig, 1019 | h = Date.now() - this.endTime; 1020 | 1021 | if (-1 !== o) { 1022 | if (h >= u.decelerationTime) return this.startTime = 0, void (null === (t = this.endCallback) || void 0 === t || t.call(this, i({}, r.find(function (t, e) { 1023 | return e === o; 1024 | })))); 1025 | this.rotateDeg = E[u.speedFunction].easeOut(h, s, a, u.decelerationTime) % 360, this.draw(), n(this.slowDown.bind(this)); 1026 | } else this.startTime = 0; 1027 | }, o.prototype.getWidth = function (t, e) { 1028 | return void 0 === e && (e = this.prizeRadian * this.prizeRadius), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, e) : 0; 1029 | }, o.prototype.getHeight = function (t, e) { 1030 | return void 0 === e && (e = this.prizeRadius), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, e) : 0; 1031 | }, o.prototype.getOffsetX = function (t) { 1032 | return -t / 2; 1033 | }, o.prototype.conversionAxis = function (t, e) { 1034 | var i = this.config; 1035 | return [t / i.dpr - this.Radius, e / i.dpr - this.Radius]; 1036 | }, o; 1037 | }(w), 1038 | D = function (t) { 1039 | function h(e, i) { 1040 | void 0 === i && (i = {}); 1041 | var n = t.call(this, e) || this; 1042 | n.rows = 3, n.cols = 3, n.blocks = [], n.prizes = [], n.buttons = [], n.defaultConfig = {}, n._defaultConfig = { 1043 | gutter: 5, 1044 | speed: 20, 1045 | accelerationTime: 2500, 1046 | decelerationTime: 2500 1047 | }, n.defaultStyle = {}, n._defaultStyle = { 1048 | borderRadius: 20, 1049 | fontColor: "#000", 1050 | fontSize: "18px", 1051 | fontStyle: "sans-serif", 1052 | fontWeight: "400", 1053 | lineHeight: "", 1054 | background: "transparent", 1055 | shadow: "", 1056 | wordWrap: !0, 1057 | lengthLimit: "90%" 1058 | }, n.activeStyle = {}, n._activeStyle = { 1059 | background: "#ffce98", 1060 | shadow: "", 1061 | fontStyle: "", 1062 | fontWeight: "", 1063 | fontSize: "", 1064 | lineHeight: "", 1065 | fontColor: "" 1066 | }, n.cellWidth = 0, n.cellHeight = 0, n.startTime = 0, n.endTime = 0, n.currIndex = 0, n.stopIndex = 0, n.endIndex = 0, n.demo = !1, n.timer = 0, n.FPS = 16.6, n.prizeFlag = -1, n.cells = [], n.blockImgs = [[]], n.btnImgs = [[]], n.prizeImgs = [], e.ob && (n.initData(i), n.initWatch()), n.initComputed(); 1067 | var r = n.buttons.map(function (t) { 1068 | return t.imgs; 1069 | }); 1070 | return n.button && r.push(n.button.imgs), n.init({ 1071 | blockImgs: n.blocks.map(function (t) { 1072 | return t.imgs; 1073 | }), 1074 | prizeImgs: n.prizes.map(function (t) { 1075 | return t.imgs; 1076 | }), 1077 | btnImgs: r 1078 | }), n; 1079 | } 1080 | 1081 | return e(h, t), h.prototype.initData = function (t) { 1082 | this.$set(this, "rows", Number(t.rows) || 3), this.$set(this, "cols", Number(t.cols) || 3), this.$set(this, "blocks", t.blocks || []), this.$set(this, "prizes", t.prizes || []), this.$set(this, "buttons", t.buttons || []), this.$set(this, "button", t.button), this.$set(this, "defaultConfig", t.defaultConfig || {}), this.$set(this, "defaultStyle", t.defaultStyle || {}), this.$set(this, "activeStyle", t.activeStyle || {}), this.$set(this, "startCallback", t.start), this.$set(this, "endCallback", t.end); 1083 | }, h.prototype.initComputed = function () { 1084 | var t = this; 1085 | this.$computed(this, "_defaultConfig", function () { 1086 | var e = i({ 1087 | gutter: 5, 1088 | speed: 20, 1089 | accelerationTime: 2500, 1090 | decelerationTime: 2500 1091 | }, t.defaultConfig); 1092 | return e.gutter = t.getLength(e.gutter), e.speed = e.speed / 40, e; 1093 | }), this.$computed(this, "_defaultStyle", function () { 1094 | return i({ 1095 | borderRadius: 20, 1096 | fontColor: "#000", 1097 | fontSize: "18px", 1098 | fontStyle: "sans-serif", 1099 | fontWeight: "400", 1100 | background: "transparent", 1101 | shadow: "", 1102 | wordWrap: !0, 1103 | lengthLimit: "90%" 1104 | }, t.defaultStyle); 1105 | }), this.$computed(this, "_activeStyle", function () { 1106 | return i({ 1107 | background: "#ffce98", 1108 | shadow: "" 1109 | }, t.activeStyle); 1110 | }); 1111 | }, h.prototype.initWatch = function () { 1112 | var t = this; 1113 | this.$watch("blocks", function (e) { 1114 | return t.init({ 1115 | blockImgs: e.map(function (t) { 1116 | return t.imgs; 1117 | }) 1118 | }); 1119 | }, { 1120 | deep: !0 1121 | }), this.$watch("prizes", function (e) { 1122 | return t.init({ 1123 | prizeImgs: e.map(function (t) { 1124 | return t.imgs; 1125 | }) 1126 | }); 1127 | }, { 1128 | deep: !0 1129 | }), this.$watch("buttons", function (e) { 1130 | var i = e.map(function (t) { 1131 | return t.imgs; 1132 | }); 1133 | return t.button && i.push(t.button.imgs), t.init({ 1134 | btnImgs: i 1135 | }); 1136 | }, { 1137 | deep: !0 1138 | }), this.$watch("button", function () { 1139 | var e = t.buttons.map(function (t) { 1140 | return t.imgs; 1141 | }); 1142 | return t.button && e.push(t.button.imgs), t.init({ 1143 | btnImgs: e 1144 | }); 1145 | }, { 1146 | deep: !0 1147 | }), this.$watch("rows", function () { 1148 | return t.init({}); 1149 | }), this.$watch("cols", function () { 1150 | return t.init({}); 1151 | }), this.$watch("defaultConfig", function () { 1152 | return t.draw(); 1153 | }, { 1154 | deep: !0 1155 | }), this.$watch("defaultStyle", function () { 1156 | return t.draw(); 1157 | }, { 1158 | deep: !0 1159 | }), this.$watch("activeStyle", function () { 1160 | return t.draw(); 1161 | }, { 1162 | deep: !0 1163 | }), this.$watch("startCallback", function () { 1164 | return t.init({}); 1165 | }), this.$watch("endCallback", function () { 1166 | return t.init({}); 1167 | }); 1168 | }, h.prototype.init = function (t) { 1169 | var e, 1170 | i, 1171 | n = this, 1172 | r = this, 1173 | o = r.config; 1174 | r.ctx, r.button; 1175 | this.setHTMLFontSize(), this.setDpr(), this.zoomCanvas(), null === (e = o.beforeInit) || void 0 === e || e.call(this), this.draw(), Object.keys(t).forEach(function (e) { 1176 | var i = e, 1177 | r = t[i], 1178 | o = { 1179 | blockImgs: "blocks", 1180 | prizeImgs: "prizes", 1181 | btnImgs: "buttons" 1182 | }[i]; 1183 | r && r.forEach(function (t, e) { 1184 | t && t.forEach(function (t, r) { 1185 | n.loadAndCacheImg(o, e, i, r, function () { 1186 | n.draw(); 1187 | }); 1188 | }); 1189 | }); 1190 | }), null === (i = o.afterInit) || void 0 === i || i.call(this); 1191 | }, h.prototype.handleClick = function (t) { 1192 | var e = this, 1193 | i = this.ctx; 1194 | o(this.buttons, [this.button]).forEach(function (n) { 1195 | var r; 1196 | 1197 | if (n) { 1198 | var o = e.getGeometricProperty([n.x, n.y, n.col || 1, n.row || 1]), 1199 | s = o[0], 1200 | a = o[1], 1201 | u = o[2], 1202 | h = o[3]; 1203 | i.beginPath(), i.rect(s, a, u, h), i.isPointInPath(t.offsetX, t.offsetY) && (e.startTime || null === (r = e.startCallback) || void 0 === r || r.call(e, t)); 1204 | } 1205 | }); 1206 | }, h.prototype.loadAndCacheImg = function (t, e, i, o, s) { 1207 | return n(this, void 0, void 0, function () { 1208 | var n, 1209 | a, 1210 | u, 1211 | h = this; 1212 | return r(this, function (r) { 1213 | return n = this[t][e], "buttons" === t && !this.buttons.length && this.button && (n = this.button), n && n.imgs && (a = n.imgs[o]) ? (this[i][e] || (this[i][e] = []), u = [this.loadImg(a.src, a), a.activeSrc && this.loadImg(a.activeSrc, a, "$activeResolve")], Promise.all(u).then(function (t) { 1214 | var n = t[0], 1215 | r = t[1]; 1216 | h[i][e][o] = { 1217 | defaultImg: n, 1218 | activeImg: r 1219 | }, s.call(h); 1220 | }).catch(function (i) { 1221 | console.error(t + "[" + e + "].imgs[" + o + "] " + i); 1222 | }), [2]) : [2]; 1223 | }); 1224 | }); 1225 | }, h.prototype.computedWidthAndHeight = function (t, e, i) { 1226 | if (!e.width && !e.height) return [t.width, t.height]; 1227 | 1228 | if (e.width && !e.height) { 1229 | var n = this.getWidth(e.width, i.col); 1230 | return [n, t.height * (n / t.width)]; 1231 | } 1232 | 1233 | if (!e.width && e.height) { 1234 | var r = this.getHeight(e.height, i.row); 1235 | return [t.width * (r / t.height), r]; 1236 | } 1237 | 1238 | return [this.getWidth(e.width, i.col), this.getHeight(e.height, i.row)]; 1239 | }, h.prototype.draw = function () { 1240 | var t, 1241 | e, 1242 | i = this, 1243 | n = this, 1244 | r = n.config, 1245 | h = n.ctx, 1246 | c = n._defaultConfig, 1247 | l = n._defaultStyle, 1248 | f = n._activeStyle; 1249 | null === (t = r.beforeDraw) || void 0 === t || t.call(this, h), h.clearRect(0, 0, r.width, r.height), this.cells = o(this.prizes, this.buttons), this.button && this.cells.push(this.button), this.cells.forEach(function (t) { 1250 | t.col = t.col || 1, t.row = t.row || 1; 1251 | }), this.prizeArea = this.blocks.reduce(function (t, e) { 1252 | var n = t.x, 1253 | r = t.y, 1254 | o = t.w, 1255 | a = t.h, 1256 | c = function (t) { 1257 | var e, 1258 | i = (null === (e = t.padding) || void 0 === e ? void 0 : e.replace(/px/g, "").split(" ").map(function (t) { 1259 | return ~~t; 1260 | })) || [0], 1261 | n = 0, 1262 | r = 0, 1263 | o = 0, 1264 | a = 0; 1265 | 1266 | switch (i.length) { 1267 | case 1: 1268 | n = r = o = a = i[0]; 1269 | break; 1270 | 1271 | case 2: 1272 | n = r = i[0], o = a = i[1]; 1273 | break; 1274 | 1275 | case 3: 1276 | n = i[0], o = a = i[1], r = i[2]; 1277 | break; 1278 | 1279 | default: 1280 | n = i[0], r = i[1], o = i[2], a = i[3]; 1281 | } 1282 | 1283 | var u = { 1284 | paddingTop: n, 1285 | paddingBottom: r, 1286 | paddingLeft: o, 1287 | paddingRight: a 1288 | }; 1289 | 1290 | for (var h in u) u[h] = Object.prototype.hasOwnProperty.call(t, h) && s(t[h], "string", "number") ? ~~String(t[h]).replace(/px/g, "") : u[h]; 1291 | 1292 | return [n, r, o, a]; 1293 | }(e), 1294 | f = c[0], 1295 | d = c[1], 1296 | p = c[2], 1297 | g = c[3], 1298 | m = e.borderRadius ? i.getLength(e.borderRadius) : 0, 1299 | v = e.background || l.background; 1300 | 1301 | return u(v) && k(h, n, r, o, a, m, i.handleBackground(n, r, o, a, v)), { 1302 | x: n + p, 1303 | y: r + f, 1304 | w: o - p - g, 1305 | h: a - f - d 1306 | }; 1307 | }, { 1308 | x: 0, 1309 | y: 0, 1310 | w: r.width, 1311 | h: r.height 1312 | }), this.cellWidth = (this.prizeArea.w - c.gutter * (this.cols - 1)) / this.cols, this.cellHeight = (this.prizeArea.h - c.gutter * (this.rows - 1)) / this.rows, this.cells.forEach(function (t, e) { 1313 | var n = i.getGeometricProperty([t.x, t.y, t.col, t.row]), 1314 | o = n[0], 1315 | s = n[1], 1316 | c = n[2], 1317 | d = n[3], 1318 | p = !1; 1319 | (void 0 === i.prizeFlag || i.prizeFlag > -1) && (p = e === i.currIndex % i.prizes.length >> 0); 1320 | var g = p ? f.background : t.background || l.background; 1321 | 1322 | if (u(g)) { 1323 | var m = (p ? f.shadow : t.shadow || l.shadow).replace(/px/g, "").split(",")[0].split(" ").map(function (t, e) { 1324 | return e < 3 ? Number(t) : t; 1325 | }); 1326 | 4 === m.length && (h.shadowColor = m[3], h.shadowOffsetX = m[0] * r.dpr, h.shadowOffsetY = m[1] * r.dpr, h.shadowBlur = m[2], m[0] > 0 ? c -= m[0] : (c += m[0], o -= m[0]), m[1] > 0 ? d -= m[1] : (d += m[1], s -= m[1])), k(h, o, s, c, d, i.getLength(t.borderRadius ? t.borderRadius : l.borderRadius), i.handleBackground(o, s, c, d, g)), h.shadowColor = "rgba(0, 0, 0, 0)", h.shadowOffsetX = 0, h.shadowOffsetY = 0, h.shadowBlur = 0; 1327 | } 1328 | 1329 | var v = "prizeImgs"; 1330 | e >= i.prizes.length && (v = "btnImgs", e -= i.prizes.length), t.imgs && t.imgs.forEach(function (n, r) { 1331 | if (i[v][e]) { 1332 | var a = i[v][e][r]; 1333 | 1334 | if (a) { 1335 | var u = p && a.activeImg || a.defaultImg; 1336 | 1337 | if (u) { 1338 | var h = i.computedWidthAndHeight(u, n, t), 1339 | c = h[0], 1340 | l = h[1], 1341 | f = [o + i.getOffsetX(c, t.col), s + i.getHeight(n.top, t.row)], 1342 | d = f[0], 1343 | g = f[1]; 1344 | i.drawImage(u, d, g, c, l); 1345 | } 1346 | } 1347 | } 1348 | }), t.fonts && t.fonts.forEach(function (e) { 1349 | var n = p && f.fontStyle ? f.fontStyle : e.fontStyle || l.fontStyle, 1350 | r = p && f.fontWeight ? f.fontWeight : e.fontWeight || l.fontWeight, 1351 | u = p && f.fontSize ? i.getLength(f.fontSize) : i.getLength(e.fontSize || l.fontSize), 1352 | c = p && f.lineHeight ? f.lineHeight : e.lineHeight || l.lineHeight || e.fontSize || l.fontSize; 1353 | h.font = r + " " + (u >> 0) + "px " + n, h.fillStyle = p && f.fontColor ? f.fontColor : e.fontColor || l.fontColor; 1354 | var d = [], 1355 | g = String(e.text); 1356 | 1357 | if (Object.prototype.hasOwnProperty.call(e, "wordWrap") ? e.wordWrap : l.wordWrap) { 1358 | g = a(g); 1359 | 1360 | for (var m = "", v = 0; v < g.length; v++) { 1361 | m += g[v], h.measureText(m).width > i.getWidth(e.lengthLimit || l.lengthLimit, t.col) && (d.push(m.slice(0, -1)), m = g[v]); 1362 | } 1363 | 1364 | m && d.push(m), d.length || d.push(g); 1365 | } else d = g.split("\n"); 1366 | 1367 | d.forEach(function (n, r) { 1368 | h.fillText(n, o + i.getOffsetX(h.measureText(n).width, t.col), s + i.getHeight(e.top, t.row) + (r + 1) * i.getLength(c)); 1369 | }); 1370 | }); 1371 | }), null === (e = r.afterDraw) || void 0 === e || e.call(this, h); 1372 | }, h.prototype.handleBackground = function (t, e, i, n, r) { 1373 | var o = this.ctx; 1374 | return r.includes("linear-gradient") && (r = function (t, e, i, n, r, o) { 1375 | var s = /linear-gradient\((.+)\)/.exec(o)[1].split(",").map(function (t) { 1376 | return t.trim(); 1377 | }), 1378 | a = s.shift(), 1379 | u = [0, 0, 0, 0]; 1380 | 1381 | if (a.includes("deg")) { 1382 | var h = function (t) { 1383 | return Math.tan(t / 180 * Math.PI); 1384 | }; 1385 | 1386 | (a = a.slice(0, -3) % 360) >= 0 && a < 45 ? u = [e, i + r, e + n, i + r - n * h(a - 0)] : a >= 45 && a < 90 ? u = [e, i + r, e + n - r * h(a - 45), i] : a >= 90 && a < 135 ? u = [e + n, i + r, e + n - r * h(a - 90), i] : a >= 135 && a < 180 ? u = [e + n, i + r, e, i + n * h(a - 135)] : a >= 180 && a < 225 ? u = [e + n, i, e, i + n * h(a - 180)] : a >= 225 && a < 270 ? u = [e + n, i, e + r * h(a - 225), i + r] : a >= 270 && a < 315 ? u = [e, i, e + r * h(a - 270), i + r] : a >= 315 && a < 360 && (u = [e, i, e + n, i + r - n * h(a - 315)]); 1387 | } else a.includes("top") ? u = [e, i + r, e, i] : a.includes("bottom") ? u = [e, i, e, i + r] : a.includes("left") ? u = [e + n, i, e, i] : a.includes("right") && (u = [e, i, e + n, i]); 1388 | 1389 | var c = t.createLinearGradient.apply(t, u.map(function (t) { 1390 | return t >> 0; 1391 | })); 1392 | return s.reduce(function (t, e, i) { 1393 | var n = e.split(" "); 1394 | return 1 === n.length ? t.addColorStop(i, n[0]) : 2 === n.length && t.addColorStop.apply(t, n), t; 1395 | }, c); 1396 | }(o, t, e, i, n, r)), r; 1397 | }, h.prototype.play = function () { 1398 | var t = this.config.clearInterval; 1399 | this.startTime || (t(this.timer), this.startTime = Date.now(), this.prizeFlag = void 0, this.run()); 1400 | }, h.prototype.stop = function (t) { 1401 | this.prizeFlag = t < 0 ? -1 : t % this.prizes.length, -1 === this.prizeFlag && (this.currIndex = 0, this.draw()); 1402 | }, h.prototype.run = function (t) { 1403 | void 0 === t && (t = 0); 1404 | var e = this, 1405 | i = e.rAF, 1406 | n = e.currIndex, 1407 | r = e.prizes, 1408 | o = e.prizeFlag, 1409 | s = e.startTime, 1410 | a = e._defaultConfig, 1411 | u = Date.now() - s; 1412 | 1413 | if (u >= a.accelerationTime && void 0 !== o) { 1414 | this.FPS = u / t, this.endTime = Date.now(), this.stopIndex = n; 1415 | 1416 | for (var h = 0; ++h;) { 1417 | var c = r.length * h + o - (n >> 0); 1418 | 1419 | if (T.easeOut(this.FPS, this.stopIndex, c, a.decelerationTime) - this.stopIndex > a.speed) { 1420 | this.endIndex = c; 1421 | break; 1422 | } 1423 | } 1424 | 1425 | return this.slowDown(); 1426 | } 1427 | 1428 | this.currIndex = (n + T.easeIn(u, .1, a.speed, a.accelerationTime)) % r.length, this.draw(), i(this.run.bind(this, t + 1)); 1429 | }, h.prototype.slowDown = function () { 1430 | var t, 1431 | e = this, 1432 | n = e.rAF, 1433 | r = e.prizes, 1434 | o = e.prizeFlag, 1435 | s = e.stopIndex, 1436 | a = e.endIndex, 1437 | u = e._defaultConfig, 1438 | h = Date.now() - this.endTime; 1439 | 1440 | if (-1 !== o) { 1441 | if (h > u.decelerationTime) return this.startTime = 0, void (null === (t = this.endCallback) || void 0 === t || t.call(this, i({}, r.find(function (t, e) { 1442 | return e === o; 1443 | })))); 1444 | this.currIndex = T.easeOut(h, s, a, u.decelerationTime) % r.length, this.draw(), n(this.slowDown.bind(this)); 1445 | } else this.startTime = 0; 1446 | }, h.prototype.walk = function () { 1447 | var t = this, 1448 | e = this.config, 1449 | i = e.setInterval; 1450 | (0, e.clearInterval)(this.timer), this.timer = i(function () { 1451 | t.currIndex += 1, t.draw(); 1452 | }, 1300); 1453 | }, h.prototype.getGeometricProperty = function (t) { 1454 | var e = t[0], 1455 | i = t[1], 1456 | n = t[2], 1457 | r = t[3], 1458 | o = this.cellWidth, 1459 | s = this.cellHeight, 1460 | a = this._defaultConfig.gutter, 1461 | u = [this.prizeArea.x + (o + a) * e, this.prizeArea.y + (s + a) * i]; 1462 | return n && r && u.push(o * n + a * (n - 1), s * r + a * (r - 1)), u; 1463 | }, h.prototype.getWidth = function (t, e) { 1464 | return void 0 === e && (e = 1), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, this.cellWidth * e + this._defaultConfig.gutter * (e - 1)) : 0; 1465 | }, h.prototype.getHeight = function (t, e) { 1466 | return void 0 === e && (e = 1), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, this.cellHeight * e + this._defaultConfig.gutter * (e - 1)) : 0; 1467 | }, h.prototype.getOffsetX = function (t, e) { 1468 | return void 0 === e && (e = 1), (this.cellWidth * e + this._defaultConfig.gutter * (e - 1) - t) / 2; 1469 | }, h.prototype.conversionAxis = function (t, e) { 1470 | var i = this.config; 1471 | return [t / i.dpr, e / i.dpr]; 1472 | }, h; 1473 | }(w); 1474 | 1475 | exports.LuckyGrid = D, exports.LuckyWheel = P; 1476 | }); 1477 | 1478 | var luckyCanvas = luckyCanvas_cjs_min; 1479 | 1480 | var name = "react-luck-draw"; 1481 | var version = "1.0.1"; 1482 | 1483 | var LuckyWheel = /*#__PURE__*/function (_React$Component) { 1484 | _inherits(LuckyWheel, _React$Component); 1485 | 1486 | var _super = _createSuper(LuckyWheel); 1487 | 1488 | function LuckyWheel(props) { 1489 | var _this; 1490 | 1491 | _classCallCheck(this, LuckyWheel); 1492 | 1493 | _this = _super.call(this, props); 1494 | _this.myLucky = /*#__PURE__*/React__default['default'].createRef(); 1495 | return _this; 1496 | } 1497 | 1498 | _createClass(LuckyWheel, [{ 1499 | key: "componentDidMount", 1500 | value: function componentDidMount() { 1501 | var props = this.props; 1502 | this.myLucky.current.setAttribute('package', "".concat(name, "@").concat(version)); 1503 | 1504 | try { 1505 | this.init(); 1506 | props.onSuccess && props.onSuccess(); 1507 | } catch (err) { 1508 | props.onError && props.onError(err); 1509 | } finally { 1510 | props.onFinally && props.onFinally(err); 1511 | } 1512 | } 1513 | }, { 1514 | key: "componentDidUpdate", 1515 | value: function componentDidUpdate(prevProps) { 1516 | if (this.props.blocks !== prevProps.blocks) { 1517 | this.$lucky.blocks = this.props.blocks; 1518 | } 1519 | 1520 | if (this.props.prizes !== prevProps.prizes) { 1521 | this.$lucky.prizes = this.props.prizes; 1522 | } 1523 | 1524 | if (this.props.buttons !== prevProps.buttons) { 1525 | this.$lucky.buttons = this.props.buttons; 1526 | } 1527 | } 1528 | }, { 1529 | key: "init", 1530 | value: function init() { 1531 | var props = this.props; 1532 | console.log(props); 1533 | this.$lucky = new luckyCanvas.LuckyWheel({ 1534 | flag: 'WEB', 1535 | width: props.width, 1536 | height: props.height, 1537 | divElement: this.myLucky.current 1538 | }, _objectSpread2(_objectSpread2({}, props), {}, { 1539 | start: function start() { 1540 | props.onStart && props.onStart.apply(props, arguments); 1541 | }, 1542 | end: function end() { 1543 | props.onEnd && props.onEnd.apply(props, arguments); 1544 | } 1545 | })); 1546 | } 1547 | }, { 1548 | key: "play", 1549 | value: function play() { 1550 | var _this$$lucky; 1551 | 1552 | (_this$$lucky = this.$lucky).play.apply(_this$$lucky, arguments); 1553 | } 1554 | }, { 1555 | key: "stop", 1556 | value: function stop() { 1557 | var _this$$lucky2; 1558 | 1559 | (_this$$lucky2 = this.$lucky).stop.apply(_this$$lucky2, arguments); 1560 | } 1561 | }, { 1562 | key: "render", 1563 | value: function render() { 1564 | return /*#__PURE__*/React__default['default'].createElement("div", { 1565 | ref: this.myLucky 1566 | }); 1567 | } 1568 | }]); 1569 | 1570 | return LuckyWheel; 1571 | }(React__default['default'].Component); 1572 | LuckyWheel.defaultProps = { 1573 | width: '', 1574 | height: '', 1575 | prizes: [], 1576 | blocks: [], 1577 | buttons: [], 1578 | defaultStyle: {}, 1579 | defaultConfig: {} 1580 | }; 1581 | 1582 | var LuckyGrid = /*#__PURE__*/function (_React$Component) { 1583 | _inherits(LuckyGrid, _React$Component); 1584 | 1585 | var _super = _createSuper(LuckyGrid); 1586 | 1587 | function LuckyGrid(props) { 1588 | var _this; 1589 | 1590 | _classCallCheck(this, LuckyGrid); 1591 | 1592 | _this = _super.call(this, props); 1593 | _this.myLucky = /*#__PURE__*/React__default['default'].createRef(); 1594 | return _this; 1595 | } 1596 | 1597 | _createClass(LuckyGrid, [{ 1598 | key: "componentDidMount", 1599 | value: function componentDidMount() { 1600 | var props = this.props; 1601 | this.myLucky.current.setAttribute('package', "".concat(name, "@").concat(version)); 1602 | 1603 | try { 1604 | this.init(); 1605 | props.onSuccess && props.onSuccess(); 1606 | } catch (err) { 1607 | props.onError && props.onError(err); 1608 | } finally { 1609 | props.onFinally && props.onFinally(err); 1610 | } 1611 | } 1612 | }, { 1613 | key: "componentDidUpdate", 1614 | value: function componentDidUpdate(prevProps) { 1615 | if (this.props.cols !== prevProps.cols) { 1616 | this.$lucky.cols = this.props.cols; 1617 | } 1618 | 1619 | if (this.props.rows !== prevProps.rows) { 1620 | this.$lucky.rows = this.props.rows; 1621 | } 1622 | 1623 | if (this.props.blocks !== prevProps.blocks) { 1624 | this.$lucky.blocks = this.props.blocks; 1625 | } 1626 | 1627 | if (this.props.prizes !== prevProps.prizes) { 1628 | this.$lucky.prizes = this.props.prizes; 1629 | } 1630 | 1631 | if (this.props.buttons !== prevProps.buttons) { 1632 | this.$lucky.buttons = this.props.buttons; 1633 | } 1634 | } 1635 | }, { 1636 | key: "init", 1637 | value: function init() { 1638 | var props = this.props; 1639 | this.$lucky = new luckyCanvas.LuckyGrid({ 1640 | flag: 'WEB', 1641 | width: props.width, 1642 | height: props.height, 1643 | divElement: this.myLucky.current 1644 | }, _objectSpread2(_objectSpread2({}, props), {}, { 1645 | start: function start() { 1646 | props.onStart && props.onStart.apply(props, arguments); 1647 | }, 1648 | end: function end() { 1649 | props.onEnd && props.onEnd.apply(props, arguments); 1650 | } 1651 | })); 1652 | } 1653 | }, { 1654 | key: "play", 1655 | value: function play() { 1656 | var _this$$lucky; 1657 | 1658 | (_this$$lucky = this.$lucky).play.apply(_this$$lucky, arguments); 1659 | } 1660 | }, { 1661 | key: "stop", 1662 | value: function stop() { 1663 | var _this$$lucky2; 1664 | 1665 | (_this$$lucky2 = this.$lucky).stop.apply(_this$$lucky2, arguments); 1666 | } 1667 | }, { 1668 | key: "render", 1669 | value: function render() { 1670 | return /*#__PURE__*/React__default['default'].createElement("div", { 1671 | ref: this.myLucky 1672 | }); 1673 | } 1674 | }]); 1675 | 1676 | return LuckyGrid; 1677 | }(React__default['default'].Component); 1678 | LuckyGrid.defaultProps = { 1679 | width: '', 1680 | height: '', 1681 | cols: 3, 1682 | rows: 3, 1683 | blocks: [], 1684 | prizes: [], 1685 | buttons: [], 1686 | defaultStyle: {}, 1687 | activeStyle: {}, 1688 | defaultConfig: {} 1689 | }; 1690 | 1691 | exports.LuckyGrid = LuckyGrid; 1692 | exports.LuckyWheel = LuckyWheel; 1693 | -------------------------------------------------------------------------------- /dist/react-luck-draw.cjs.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("react"));function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n0&&r[r.length-1])||6!==o[0]&&2!==o[0])){s=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]this.length)&&-1!==this.indexOf(t,e)}),Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(t){if(null==this)throw new TypeError('"this" is null or not defined');var e=Object(this),n=e.length>>>0;if("function"!=typeof t)throw new TypeError("predicate must be a function");for(var i=arguments[1],r=0;r '"+e.src+"' 不能为空或不合法"),"WEB"===i.config.flag){var s=new Image;s.src=t,s.onload=function(){return r(s)},s.onerror=function(){return o("=> '"+e.src+"' 图片加载失败")}}else e[n]=r}))},t.prototype.drawImage=function(t,e,n,i,r){var o,s=this.config,a=this.ctx;return["WEB","MP-WX"].includes(s.flag)?o=t:["UNI-H5","UNI-MP","TARO-H5","TARO-MP"].includes(s.flag)&&(o=t.path),a.drawImage(o,e,n,i,r)},t.prototype.getLength=function(t){return u(t,"number")?t:u(t,"string")?this.changeUnits(t):0},t.prototype.changeUnits=function(t,e){var n=this;return void 0===e&&(e=1),Number(t.replace(/^([-]*[0-9.]*)([a-z%]*)$/,(function(t,i,r){var o={"%":function(t){return t*(e/100)},px:function(t){return 1*t},rem:function(t){return t*n.htmlFontSize}}[r];if(o)return o(i);var s=n.config.unitFunc;return s?s(i,r):i})))},t.prototype.$set=function(t,e,n){t&&"object"==typeof t&&m(t,e,n)},t.prototype.$computed=function(t,e,n){var i=this;Object.defineProperty(t,e,{get:function(){return n.call(i)}})},t.prototype.$watch=function(t,e,n){void 0===n&&(n={}),"object"==typeof e&&(e=(n=e).handler);var i=new w(this,t,e,n);return n.immediate&&e.call(this,i.value),function(){}},t}(),z=function(t){return Math.PI/180*t},S=function(t,e){return[+(Math.cos(t)*e).toFixed(8),+(Math.sin(t)*e).toFixed(8)]},I=function(t,e){var n=-t/e;return[n,-n*t+e]},x=function(t,e,n,i,r,o){var s;if(void 0===o&&(o=!0),Math.abs(r-i).toFixed(8)>=z(180).toFixed(8)){var a=(r+i)/2;return o?(x(t,e,n,i,a,o),x(t,e,n,a,r,o)):(x(t,e,n,a,r,o),x(t,e,n,i,a,o)),!1}o||(i=(s=[r,i])[0],r=s[1]);var u=S(i,n),c=u[0],h=u[1],l=S(r,n),f=l[0],p=l[1],d=I(c,h),g=d[0],y=d[1],v=I(f,p),m=v[0],b=v[1],w=(b-y)/(g-m),k=(m*y-g*b)/(m-g);isNaN(w)&&(Math.abs(c)===+n.toFixed(8)&&(w=c),Math.abs(f)===+n.toFixed(8)&&(w=f)),g===1/0||g===-1/0?k=m*w+b:m!==1/0&&m!==-1/0||(k=g*w+y),e.lineTo(c,h),t.indexOf("MP")>0?e.quadraticCurveTo(w,k,f,p):e.arcTo(w,k,f,p,n)},O=function(t,e,n,i,r,o,s){var a=Math.min(i,r);o>a/2&&(o=a/2),t.beginPath(),t.fillStyle=s,t.moveTo(e+o,n),t.lineTo(e+o,n),t.lineTo(e+i-o,n),t.quadraticCurveTo(e+i,n,e+i,n+o),t.lineTo(e+i,n+r-o),t.quadraticCurveTo(e+i,n+r,e+i-o,n+r),t.lineTo(e+o,n+r),t.quadraticCurveTo(e,n+r,e,n+r-o),t.lineTo(e,n+o),t.quadraticCurveTo(e,n,e+o,n),t.closePath(),t.fill()},C={easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),-n*(t/=i)*(t-2)+e}},T={easeIn:function(t,e,n,i){return t>=i&&(t=i),-n*Math.cos(t/i*(Math.PI/2))+n+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*Math.sin(t/i*(Math.PI/2))+e}},E={easeIn:function(t,e,n,i){return t>=i&&(t=i),0==t?e:n*Math.pow(2,10*(t/i-1))+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),t==i?e+n:n*(1-Math.pow(2,-10*t/i))+e}},P={easeIn:function(t,e,n,i){return t>=i&&(t=i),-n*(Math.sqrt(1-(t/=i)*t)-1)+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*Math.sqrt(1-(t=t/i-1)*t)+e}},_=Object.freeze({__proto__:null,quad:C,cubic:{easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*((t=t/i-1)*t*t+1)+e}},quart:{easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t*t*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),-n*((t=t/i-1)*t*t*t-1)+e}},quint:{easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t*t*t*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*((t=t/i-1)*t*t*t*t+1)+e}},sine:T,expo:E,circ:P}),$=function(t){function e(e,n){void 0===n&&(n={});var i=t.call(this,e)||this;return i.blocks=[],i.prizes=[],i.buttons=[],i.defaultConfig={},i._defaultConfig={gutter:"0px",offsetDegree:0,speed:20,speedFunction:"quad",accelerationTime:2500,decelerationTime:2500,stopRange:.8},i.defaultStyle={},i._defaultStyle={fontSize:"18px",fontColor:"#000",fontStyle:"sans-serif",fontWeight:"400",lineHeight:"",background:"transparent",wordWrap:!0,lengthLimit:"90%"},i.Radius=0,i.prizeRadius=0,i.prizeDeg=0,i.prizeRadian=0,i.rotateDeg=0,i.maxBtnRadius=0,i.startTime=0,i.endTime=0,i.stopDeg=0,i.endDeg=0,i.FPS=16.6,i.blockImgs=[[]],i.prizeImgs=[[]],i.btnImgs=[[]],e.ob&&(i.initData(n),i.initWatch()),i.initComputed(),i.init({blockImgs:i.blocks.map((function(t){return t.imgs})),prizeImgs:i.prizes.map((function(t){return t.imgs})),btnImgs:i.buttons.map((function(t){return t.imgs}))}),i}return i(e,t),e.prototype.initData=function(t){this.$set(this,"blocks",t.blocks||[]),this.$set(this,"prizes",t.prizes||[]),this.$set(this,"buttons",t.buttons||[]),this.$set(this,"defaultConfig",t.defaultConfig||{}),this.$set(this,"defaultStyle",t.defaultStyle||{}),this.$set(this,"startCallback",t.start),this.$set(this,"endCallback",t.end)},e.prototype.initComputed=function(){var t=this;this.$computed(this,"_defaultConfig",(function(){return r({gutter:"0px",offsetDegree:0,speed:20,speedFunction:"quad",accelerationTime:2500,decelerationTime:2500,stopRange:.8},t.defaultConfig)})),this.$computed(this,"_defaultStyle",(function(){return r({fontSize:"18px",fontColor:"#000",fontStyle:"sans-serif",fontWeight:"400",background:"transparent",wordWrap:!0,lengthLimit:"90%"},t.defaultStyle)}))},e.prototype.initWatch=function(){var t=this;this.$watch("blocks",(function(e){return t.init({blockImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("prizes",(function(e){return t.init({prizeImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("buttons",(function(e){return t.init({btnImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("defaultConfig",(function(){return t.draw()}),{deep:!0}),this.$watch("defaultStyle",(function(){return t.draw()}),{deep:!0}),this.$watch("startCallback",(function(){return t.init({})})),this.$watch("endCallback",(function(){return t.init({})}))},e.prototype.init=function(t){var e,n,i=this,r=this.config,o=this.ctx;this.setDpr(),this.setHTMLFontSize(),this.zoomCanvas(),this.Radius=Math.min(r.width,r.height)/2,null===(e=r.beforeInit)||void 0===e||e.call(this),o.translate(this.Radius,this.Radius),this.draw(),Object.keys(t).forEach((function(e){var n=e,r={blockImgs:"blocks",prizeImgs:"prizes",btnImgs:"buttons"}[n],o=t[n];o&&o.forEach((function(t,e){t&&t.forEach((function(t,o){i.loadAndCacheImg(r,e,n,o,(function(){i.draw()}))}))}))})),null===(n=r.afterInit)||void 0===n||n.call(this)},e.prototype.handleClick=function(t){var e,n=this.ctx;n.beginPath(),n.arc(0,0,this.maxBtnRadius,0,2*Math.PI,!1),n.isPointInPath(t.offsetX,t.offsetY)&&(this.startTime||null===(e=this.startCallback)||void 0===e||e.call(this,t))},e.prototype.loadAndCacheImg=function(t,e,n,i,r){return o(this,void 0,void 0,(function(){var o,a,u=this;return s(this,(function(s){return(o=this[t][e])&&o.imgs&&(a=o.imgs[i])?(this[n][e]||(this[n][e]=[]),this.loadImg(a.src,a).then((function(t){u[n][e][i]=t,r.call(u)})).catch((function(n){console.error(t+"["+e+"].imgs["+i+"] "+n)})),[2]):[2]}))}))},e.prototype.computedWidthAndHeight=function(t,e,n,i){if(!e.width&&!e.height)return[t.width,t.height];if(e.width&&!e.height){var r=this.getWidth(e.width,n);return[r,t.height*(r/t.width)]}if(!e.width&&e.height){var o=this.getHeight(e.height,i);return[t.width*(o/t.height),o]}return[this.getWidth(e.width,n),this.getHeight(e.height,i)]},e.prototype.draw=function(){var t,e,n=this,i=this,r=i.config,o=i.ctx,s=i._defaultConfig,a=i._defaultStyle;null===(t=r.beforeDraw)||void 0===t||t.call(this,o),o.clearRect(-this.Radius,-this.Radius,2*this.Radius,2*this.Radius),this.prizeRadius=this.blocks.reduce((function(t,e,i){return h(e.background)&&(o.beginPath(),o.fillStyle=e.background,o.arc(0,0,t,0,2*Math.PI,!1),o.fill()),e.imgs&&e.imgs.forEach((function(e,r){if(n.blockImgs[i]){var s=n.blockImgs[i][r];if(s){var a=n.computedWidthAndHeight(s,e,2*t,2*t),u=a[0],c=a[1],h=[n.getOffsetX(u),n.getHeight(e.top,2*t)-t],l=h[0],f=h[1];o.save(),e.rotate&&o.rotate(z(n.rotateDeg)),n.drawImage(s,l,f,u,c),o.restore()}}})),t-n.getLength(e.padding&&e.padding.split(" ")[0])}),this.Radius),this.prizeDeg=360/this.prizes.length,this.prizeRadian=z(this.prizeDeg);var u=z(-90+this.rotateDeg+s.offsetDegree),l=function(t){return n.getOffsetX(o.measureText(t).width)},f=function(t,e,i){var r=t.lineHeight||a.lineHeight||t.fontSize||a.fontSize;return n.getHeight(t.top,e)+(i+1)*n.getLength(r)};o.save(),this.prizes.forEach((function(t,e){var i=u+e*n.prizeRadian,p=n.prizeRadius-n.maxBtnRadius,d=t.background||a.background;h(d)&&function(t,e,n,i,r,o,s,a){s?function(t,e,n,i,r,o,s,a){n||(n=s);var u=z(90/Math.PI/i*s),c=z(90/Math.PI/n*s),h=r+u,l=o-u,f=r+c,p=o-c;e.beginPath(),e.fillStyle=a,e.moveTo.apply(e,S(h,i)),x(t,e,i,h,l,!0),p>f?x(t,e,n,f,p,!1):e.lineTo.apply(e,S((r+o)/2,s/2/Math.abs(Math.sin((r-o)/2)))),e.closePath(),e.fill()}(t,e,n,i,r,o,s,a):(e.beginPath(),e.fillStyle=a,e.moveTo(0,0),e.arc(0,0,i,r,o,!1),e.closePath(),e.fill())}(r.flag,o,n.maxBtnRadius,n.prizeRadius,i-n.prizeRadian/2,i+n.prizeRadian/2,n.getLength(s.gutter),d);var g=Math.cos(i)*n.prizeRadius,y=Math.sin(i)*n.prizeRadius;o.translate(g,y),o.rotate(i+z(90)),t.imgs&&t.imgs.forEach((function(t,i){if(n.prizeImgs[e]){var r=n.prizeImgs[e][i];if(r){var o=n.computedWidthAndHeight(r,t,n.prizeRadian*n.prizeRadius,p),s=o[0],a=o[1],u=[n.getOffsetX(s),n.getHeight(t.top,p)],c=u[0],h=u[1];n.drawImage(r,c,h,s,a)}}})),t.fonts&&t.fonts.forEach((function(t){var e=t.fontColor||a.fontColor,i=t.fontWeight||a.fontWeight,r=n.getLength(t.fontSize||a.fontSize),u=t.fontStyle||a.fontStyle;o.fillStyle=e,o.font=i+" "+(r>>0)+"px "+u;var h=[],d=String(t.text);if(Object.prototype.hasOwnProperty.call(t,"wordWrap")?t.wordWrap:a.wordWrap){d=c(d);for(var g="",y=0;yn.getWidth(t.lengthLimit||a.lengthLimit,m)&&(h.push(g.slice(0,-1)),g=d[y])}g&&h.push(g),h.length||h.push(d)}else h=d.split("\n");h.filter((function(t){return!!t})).forEach((function(e,n){o.fillText(e,l(e),f(t,p,n))}))})),o.rotate(z(360)-i-z(90)),o.translate(-g,-y)})),o.restore(),this.buttons.forEach((function(t,e){var i=n.getHeight(t.radius);n.maxBtnRadius=Math.max(n.maxBtnRadius,i),h(t.background)&&(o.beginPath(),o.fillStyle=t.background,o.arc(0,0,i,0,2*Math.PI,!1),o.fill()),t.pointer&&h(t.background)&&(o.beginPath(),o.fillStyle=t.background,o.moveTo(-i,0),o.lineTo(i,0),o.lineTo(0,2*-i),o.closePath(),o.fill()),t.imgs&&t.imgs.forEach((function(t,r){if(n.btnImgs[e]){var o=n.btnImgs[e][r];if(o){var s=n.computedWidthAndHeight(o,t,2*i,2*i),a=s[0],u=s[1],c=[n.getOffsetX(a),n.getHeight(t.top,i)],h=c[0],l=c[1];n.drawImage(o,h,l,a,u)}}})),t.fonts&&t.fonts.forEach((function(t){var e=t.fontColor||a.fontColor,r=t.fontWeight||a.fontWeight,s=n.getLength(t.fontSize||a.fontSize),u=t.fontStyle||a.fontStyle;o.fillStyle=e,o.font=r+" "+(s>>0)+"px "+u,String(t.text).split("\n").forEach((function(e,n){o.fillText(e,l(e),f(t,i,n))}))}))})),null===(e=r.afterDraw)||void 0===e||e.call(this,o)},e.prototype.play=function(){this.startTime||(this.startTime=Date.now(),this.prizeFlag=void 0,this.run())},e.prototype.stop=function(t){this.prizeFlag=t<0?-1:t%this.prizes.length,-1===this.prizeFlag&&(this.rotateDeg=this.prizeDeg/2-this._defaultConfig.offsetDegree,this.draw())},e.prototype.run=function(t){void 0===t&&(t=0);var e=this,n=e.rAF,i=e.prizeFlag,r=e.prizeDeg,o=e.rotateDeg,s=e._defaultConfig,a=Date.now()-this.startTime;if(a>=s.accelerationTime&&void 0!==i){this.FPS=a/t,this.endTime=Date.now(),this.stopDeg=o;for(var u=(Math.random()*r-r/2)*this.getLength(s.stopRange),c=0;++c;){var h=360*c-i*r-o-s.offsetDegree+u;if(_[s.speedFunction].easeOut(this.FPS,this.stopDeg,h,s.decelerationTime)-this.stopDeg>s.speed){this.endDeg=h;break}}return this.slowDown()}this.rotateDeg=(o+_[s.speedFunction].easeIn(a,0,s.speed,s.accelerationTime))%360,this.draw(),n(this.run.bind(this,t+1))},e.prototype.slowDown=function(){var t,e=this,n=e.rAF,i=e.prizes,o=e.prizeFlag,s=e.stopDeg,a=e.endDeg,u=e._defaultConfig,c=Date.now()-this.endTime;if(-1!==o){if(c>=u.decelerationTime)return this.startTime=0,void(null===(t=this.endCallback)||void 0===t||t.call(this,r({},i.find((function(t,e){return e===o})))));this.rotateDeg=_[u.speedFunction].easeOut(c,s,a,u.decelerationTime)%360,this.draw(),n(this.slowDown.bind(this))}else this.startTime=0},e.prototype.getWidth=function(t,e){return void 0===e&&(e=this.prizeRadian*this.prizeRadius),u(t,"number")?t:u(t,"string")?this.changeUnits(t,e):0},e.prototype.getHeight=function(t,e){return void 0===e&&(e=this.prizeRadius),u(t,"number")?t:u(t,"string")?this.changeUnits(t,e):0},e.prototype.getOffsetX=function(t){return-t/2},e.prototype.conversionAxis=function(t,e){var n=this.config;return[t/n.dpr-this.Radius,e/n.dpr-this.Radius]},e}(k),D=function(t){function e(e,n){void 0===n&&(n={});var i=t.call(this,e)||this;i.rows=3,i.cols=3,i.blocks=[],i.prizes=[],i.buttons=[],i.defaultConfig={},i._defaultConfig={gutter:5,speed:20,accelerationTime:2500,decelerationTime:2500},i.defaultStyle={},i._defaultStyle={borderRadius:20,fontColor:"#000",fontSize:"18px",fontStyle:"sans-serif",fontWeight:"400",lineHeight:"",background:"transparent",shadow:"",wordWrap:!0,lengthLimit:"90%"},i.activeStyle={},i._activeStyle={background:"#ffce98",shadow:"",fontStyle:"",fontWeight:"",fontSize:"",lineHeight:"",fontColor:""},i.cellWidth=0,i.cellHeight=0,i.startTime=0,i.endTime=0,i.currIndex=0,i.stopIndex=0,i.endIndex=0,i.demo=!1,i.timer=0,i.FPS=16.6,i.prizeFlag=-1,i.cells=[],i.blockImgs=[[]],i.btnImgs=[[]],i.prizeImgs=[],e.ob&&(i.initData(n),i.initWatch()),i.initComputed();var r=i.buttons.map((function(t){return t.imgs}));return i.button&&r.push(i.button.imgs),i.init({blockImgs:i.blocks.map((function(t){return t.imgs})),prizeImgs:i.prizes.map((function(t){return t.imgs})),btnImgs:r}),i}return i(e,t),e.prototype.initData=function(t){this.$set(this,"rows",Number(t.rows)||3),this.$set(this,"cols",Number(t.cols)||3),this.$set(this,"blocks",t.blocks||[]),this.$set(this,"prizes",t.prizes||[]),this.$set(this,"buttons",t.buttons||[]),this.$set(this,"button",t.button),this.$set(this,"defaultConfig",t.defaultConfig||{}),this.$set(this,"defaultStyle",t.defaultStyle||{}),this.$set(this,"activeStyle",t.activeStyle||{}),this.$set(this,"startCallback",t.start),this.$set(this,"endCallback",t.end)},e.prototype.initComputed=function(){var t=this;this.$computed(this,"_defaultConfig",(function(){var e=r({gutter:5,speed:20,accelerationTime:2500,decelerationTime:2500},t.defaultConfig);return e.gutter=t.getLength(e.gutter),e.speed=e.speed/40,e})),this.$computed(this,"_defaultStyle",(function(){return r({borderRadius:20,fontColor:"#000",fontSize:"18px",fontStyle:"sans-serif",fontWeight:"400",background:"transparent",shadow:"",wordWrap:!0,lengthLimit:"90%"},t.defaultStyle)})),this.$computed(this,"_activeStyle",(function(){return r({background:"#ffce98",shadow:""},t.activeStyle)}))},e.prototype.initWatch=function(){var t=this;this.$watch("blocks",(function(e){return t.init({blockImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("prizes",(function(e){return t.init({prizeImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("buttons",(function(e){var n=e.map((function(t){return t.imgs}));return t.button&&n.push(t.button.imgs),t.init({btnImgs:n})}),{deep:!0}),this.$watch("button",(function(){var e=t.buttons.map((function(t){return t.imgs}));return t.button&&e.push(t.button.imgs),t.init({btnImgs:e})}),{deep:!0}),this.$watch("rows",(function(){return t.init({})})),this.$watch("cols",(function(){return t.init({})})),this.$watch("defaultConfig",(function(){return t.draw()}),{deep:!0}),this.$watch("defaultStyle",(function(){return t.draw()}),{deep:!0}),this.$watch("activeStyle",(function(){return t.draw()}),{deep:!0}),this.$watch("startCallback",(function(){return t.init({})})),this.$watch("endCallback",(function(){return t.init({})}))},e.prototype.init=function(t){var e,n,i=this,r=this,o=r.config;r.ctx,r.button,this.setHTMLFontSize(),this.setDpr(),this.zoomCanvas(),null===(e=o.beforeInit)||void 0===e||e.call(this),this.draw(),Object.keys(t).forEach((function(e){var n=e,r=t[n],o={blockImgs:"blocks",prizeImgs:"prizes",btnImgs:"buttons"}[n];r&&r.forEach((function(t,e){t&&t.forEach((function(t,r){i.loadAndCacheImg(o,e,n,r,(function(){i.draw()}))}))}))})),null===(n=o.afterInit)||void 0===n||n.call(this)},e.prototype.handleClick=function(t){var e=this,n=this.ctx;a(this.buttons,[this.button]).forEach((function(i){var r;if(i){var o=e.getGeometricProperty([i.x,i.y,i.col||1,i.row||1]),s=o[0],a=o[1],u=o[2],c=o[3];n.beginPath(),n.rect(s,a,u,c),n.isPointInPath(t.offsetX,t.offsetY)&&(e.startTime||null===(r=e.startCallback)||void 0===r||r.call(e,t))}}))},e.prototype.loadAndCacheImg=function(t,e,n,i,r){return o(this,void 0,void 0,(function(){var o,a,u,c=this;return s(this,(function(s){return o=this[t][e],"buttons"===t&&!this.buttons.length&&this.button&&(o=this.button),o&&o.imgs&&(a=o.imgs[i])?(this[n][e]||(this[n][e]=[]),u=[this.loadImg(a.src,a),a.activeSrc&&this.loadImg(a.activeSrc,a,"$activeResolve")],Promise.all(u).then((function(t){var o=t[0],s=t[1];c[n][e][i]={defaultImg:o,activeImg:s},r.call(c)})).catch((function(n){console.error(t+"["+e+"].imgs["+i+"] "+n)})),[2]):[2]}))}))},e.prototype.computedWidthAndHeight=function(t,e,n){if(!e.width&&!e.height)return[t.width,t.height];if(e.width&&!e.height){var i=this.getWidth(e.width,n.col);return[i,t.height*(i/t.width)]}if(!e.width&&e.height){var r=this.getHeight(e.height,n.row);return[t.width*(r/t.height),r]}return[this.getWidth(e.width,n.col),this.getHeight(e.height,n.row)]},e.prototype.draw=function(){var t,e,n=this,i=this,r=i.config,o=i.ctx,s=i._defaultConfig,l=i._defaultStyle,f=i._activeStyle;null===(t=r.beforeDraw)||void 0===t||t.call(this,o),o.clearRect(0,0,r.width,r.height),this.cells=a(this.prizes,this.buttons),this.button&&this.cells.push(this.button),this.cells.forEach((function(t){t.col=t.col||1,t.row=t.row||1})),this.prizeArea=this.blocks.reduce((function(t,e){var i=t.x,r=t.y,s=t.w,a=t.h,c=function(t){var e,n=(null===(e=t.padding)||void 0===e?void 0:e.replace(/px/g,"").split(" ").map((function(t){return~~t})))||[0],i=0,r=0,o=0,s=0;switch(n.length){case 1:i=r=o=s=n[0];break;case 2:i=r=n[0],o=s=n[1];break;case 3:i=n[0],o=s=n[1],r=n[2];break;default:i=n[0],r=n[1],o=n[2],s=n[3]}var a={paddingTop:i,paddingBottom:r,paddingLeft:o,paddingRight:s};for(var c in a)a[c]=Object.prototype.hasOwnProperty.call(t,c)&&u(t[c],"string","number")?~~String(t[c]).replace(/px/g,""):a[c];return[i,r,o,s]}(e),f=c[0],p=c[1],d=c[2],g=c[3],y=e.borderRadius?n.getLength(e.borderRadius):0,v=e.background||l.background;return h(v)&&O(o,i,r,s,a,y,n.handleBackground(i,r,s,a,v)),{x:i+d,y:r+f,w:s-d-g,h:a-f-p}}),{x:0,y:0,w:r.width,h:r.height}),this.cellWidth=(this.prizeArea.w-s.gutter*(this.cols-1))/this.cols,this.cellHeight=(this.prizeArea.h-s.gutter*(this.rows-1))/this.rows,this.cells.forEach((function(t,e){var i=n.getGeometricProperty([t.x,t.y,t.col,t.row]),s=i[0],a=i[1],u=i[2],p=i[3],d=!1;(void 0===n.prizeFlag||n.prizeFlag>-1)&&(d=e===n.currIndex%n.prizes.length>>0);var g=d?f.background:t.background||l.background;if(h(g)){var y=(d?f.shadow:t.shadow||l.shadow).replace(/px/g,"").split(",")[0].split(" ").map((function(t,e){return e<3?Number(t):t}));4===y.length&&(o.shadowColor=y[3],o.shadowOffsetX=y[0]*r.dpr,o.shadowOffsetY=y[1]*r.dpr,o.shadowBlur=y[2],y[0]>0?u-=y[0]:(u+=y[0],s-=y[0]),y[1]>0?p-=y[1]:(p+=y[1],a-=y[1])),O(o,s,a,u,p,n.getLength(t.borderRadius?t.borderRadius:l.borderRadius),n.handleBackground(s,a,u,p,g)),o.shadowColor="rgba(0, 0, 0, 0)",o.shadowOffsetX=0,o.shadowOffsetY=0,o.shadowBlur=0}var v="prizeImgs";e>=n.prizes.length&&(v="btnImgs",e-=n.prizes.length),t.imgs&&t.imgs.forEach((function(i,r){if(n[v][e]){var o=n[v][e][r];if(o){var u=d&&o.activeImg||o.defaultImg;if(u){var c=n.computedWidthAndHeight(u,i,t),h=c[0],l=c[1],f=[s+n.getOffsetX(h,t.col),a+n.getHeight(i.top,t.row)],p=f[0],g=f[1];n.drawImage(u,p,g,h,l)}}}})),t.fonts&&t.fonts.forEach((function(e){var i=d&&f.fontStyle?f.fontStyle:e.fontStyle||l.fontStyle,r=d&&f.fontWeight?f.fontWeight:e.fontWeight||l.fontWeight,u=d&&f.fontSize?n.getLength(f.fontSize):n.getLength(e.fontSize||l.fontSize),h=d&&f.lineHeight?f.lineHeight:e.lineHeight||l.lineHeight||e.fontSize||l.fontSize;o.font=r+" "+(u>>0)+"px "+i,o.fillStyle=d&&f.fontColor?f.fontColor:e.fontColor||l.fontColor;var p=[],g=String(e.text);if(Object.prototype.hasOwnProperty.call(e,"wordWrap")?e.wordWrap:l.wordWrap){g=c(g);for(var y="",v=0;vn.getWidth(e.lengthLimit||l.lengthLimit,t.col)&&(p.push(y.slice(0,-1)),y=g[v]);y&&p.push(y),p.length||p.push(g)}else p=g.split("\n");p.forEach((function(i,r){o.fillText(i,s+n.getOffsetX(o.measureText(i).width,t.col),a+n.getHeight(e.top,t.row)+(r+1)*n.getLength(h))}))}))})),null===(e=r.afterDraw)||void 0===e||e.call(this,o)},e.prototype.handleBackground=function(t,e,n,i,r){var o=this.ctx;return r.includes("linear-gradient")&&(r=function(t,e,n,i,r,o){var s=/linear-gradient\((.+)\)/.exec(o)[1].split(",").map((function(t){return t.trim()})),a=s.shift(),u=[0,0,0,0];if(a.includes("deg")){var c=function(t){return Math.tan(t/180*Math.PI)};(a=a.slice(0,-3)%360)>=0&&a<45?u=[e,n+r,e+i,n+r-i*c(a-0)]:a>=45&&a<90?u=[e,n+r,e+i-r*c(a-45),n]:a>=90&&a<135?u=[e+i,n+r,e+i-r*c(a-90),n]:a>=135&&a<180?u=[e+i,n+r,e,n+i*c(a-135)]:a>=180&&a<225?u=[e+i,n,e,n+i*c(a-180)]:a>=225&&a<270?u=[e+i,n,e+r*c(a-225),n+r]:a>=270&&a<315?u=[e,n,e+r*c(a-270),n+r]:a>=315&&a<360&&(u=[e,n,e+i,n+r-i*c(a-315)])}else a.includes("top")?u=[e,n+r,e,n]:a.includes("bottom")?u=[e,n,e,n+r]:a.includes("left")?u=[e+i,n,e,n]:a.includes("right")&&(u=[e,n,e+i,n]);var h=t.createLinearGradient.apply(t,u.map((function(t){return t>>0})));return s.reduce((function(t,e,n){var i=e.split(" ");return 1===i.length?t.addColorStop(n,i[0]):2===i.length&&t.addColorStop.apply(t,i),t}),h)}(o,t,e,n,i,r)),r},e.prototype.play=function(){var t=this.config.clearInterval;this.startTime||(t(this.timer),this.startTime=Date.now(),this.prizeFlag=void 0,this.run())},e.prototype.stop=function(t){this.prizeFlag=t<0?-1:t%this.prizes.length,-1===this.prizeFlag&&(this.currIndex=0,this.draw())},e.prototype.run=function(t){void 0===t&&(t=0);var e=this,n=e.rAF,i=e.currIndex,r=e.prizes,o=e.prizeFlag,s=e.startTime,a=e._defaultConfig,u=Date.now()-s;if(u>=a.accelerationTime&&void 0!==o){this.FPS=u/t,this.endTime=Date.now(),this.stopIndex=i;for(var c=0;++c;){var h=r.length*c+o-(i>>0);if(C.easeOut(this.FPS,this.stopIndex,h,a.decelerationTime)-this.stopIndex>a.speed){this.endIndex=h;break}}return this.slowDown()}this.currIndex=(i+C.easeIn(u,.1,a.speed,a.accelerationTime))%r.length,this.draw(),n(this.run.bind(this,t+1))},e.prototype.slowDown=function(){var t,e=this,n=e.rAF,i=e.prizes,o=e.prizeFlag,s=e.stopIndex,a=e.endIndex,u=e._defaultConfig,c=Date.now()-this.endTime;if(-1!==o){if(c>u.decelerationTime)return this.startTime=0,void(null===(t=this.endCallback)||void 0===t||t.call(this,r({},i.find((function(t,e){return e===o})))));this.currIndex=C.easeOut(c,s,a,u.decelerationTime)%i.length,this.draw(),n(this.slowDown.bind(this))}else this.startTime=0},e.prototype.walk=function(){var t=this,e=this.config,n=e.setInterval;(0,e.clearInterval)(this.timer),this.timer=n((function(){t.currIndex+=1,t.draw()}),1300)},e.prototype.getGeometricProperty=function(t){var e=t[0],n=t[1],i=t[2],r=t[3],o=this.cellWidth,s=this.cellHeight,a=this._defaultConfig.gutter,u=[this.prizeArea.x+(o+a)*e,this.prizeArea.y+(s+a)*n];return i&&r&&u.push(o*i+a*(i-1),s*r+a*(r-1)),u},e.prototype.getWidth=function(t,e){return void 0===e&&(e=1),u(t,"number")?t:u(t,"string")?this.changeUnits(t,this.cellWidth*e+this._defaultConfig.gutter*(e-1)):0},e.prototype.getHeight=function(t,e){return void 0===e&&(e=1),u(t,"number")?t:u(t,"string")?this.changeUnits(t,this.cellHeight*e+this._defaultConfig.gutter*(e-1)):0},e.prototype.getOffsetX=function(t,e){return void 0===e&&(e=1),(this.cellWidth*e+this._defaultConfig.gutter*(e-1)-t)/2},e.prototype.conversionAxis=function(t,e){var n=this.config;return[t/n.dpr,e/n.dpr]},e}(k);e.LuckyGrid=D,e.LuckyWheel=$}(p={exports:{}},p.exports),p.exports),g="react-luck-draw",y=function(t){u(o,e["default"].Component);var i=f(o);function o(t){var r;return n(this,o),(r=i.call(this,t)).myLucky=e.default.createRef(),r}return r(o,[{key:"componentDidMount",value:function(){var t=this.props;this.myLucky.current.setAttribute("package","".concat(g,"@").concat("1.0.1"));try{this.init(),t.onSuccess&&t.onSuccess()}catch(e){t.onError&&t.onError(e)}finally{t.onFinally&&t.onFinally(err)}}},{key:"componentDidUpdate",value:function(t){this.props.blocks!==t.blocks&&(this.$lucky.blocks=this.props.blocks),this.props.prizes!==t.prizes&&(this.$lucky.prizes=this.props.prizes),this.props.buttons!==t.buttons&&(this.$lucky.buttons=this.props.buttons)}},{key:"init",value:function(){var t=this.props;console.log(t),this.$lucky=new d.LuckyWheel({flag:"WEB",width:t.width,height:t.height,divElement:this.myLucky.current},a(a({},t),{},{start:function(){t.onStart&&t.onStart.apply(t,arguments)},end:function(){t.onEnd&&t.onEnd.apply(t,arguments)}}))}},{key:"play",value:function(){var t;(t=this.$lucky).play.apply(t,arguments)}},{key:"stop",value:function(){var t;(t=this.$lucky).stop.apply(t,arguments)}},{key:"render",value:function(){return e.default.createElement("div",{ref:this.myLucky})}}]),o}();y.defaultProps={width:"",height:"",prizes:[],blocks:[],buttons:[],defaultStyle:{},defaultConfig:{}};var v=function(t){u(o,e["default"].Component);var i=f(o);function o(t){var r;return n(this,o),(r=i.call(this,t)).myLucky=e.default.createRef(),r}return r(o,[{key:"componentDidMount",value:function(){var t=this.props;this.myLucky.current.setAttribute("package","".concat(g,"@").concat("1.0.1"));try{this.init(),t.onSuccess&&t.onSuccess()}catch(e){t.onError&&t.onError(e)}finally{t.onFinally&&t.onFinally(err)}}},{key:"componentDidUpdate",value:function(t){this.props.cols!==t.cols&&(this.$lucky.cols=this.props.cols),this.props.rows!==t.rows&&(this.$lucky.rows=this.props.rows),this.props.blocks!==t.blocks&&(this.$lucky.blocks=this.props.blocks),this.props.prizes!==t.prizes&&(this.$lucky.prizes=this.props.prizes),this.props.buttons!==t.buttons&&(this.$lucky.buttons=this.props.buttons)}},{key:"init",value:function(){var t=this.props;this.$lucky=new d.LuckyGrid({flag:"WEB",width:t.width,height:t.height,divElement:this.myLucky.current},a(a({},t),{},{start:function(){t.onStart&&t.onStart.apply(t,arguments)},end:function(){t.onEnd&&t.onEnd.apply(t,arguments)}}))}},{key:"play",value:function(){var t;(t=this.$lucky).play.apply(t,arguments)}},{key:"stop",value:function(){var t;(t=this.$lucky).stop.apply(t,arguments)}},{key:"render",value:function(){return e.default.createElement("div",{ref:this.myLucky})}}]),o}();v.defaultProps={width:"",height:"",cols:3,rows:3,blocks:[],prizes:[],buttons:[],defaultStyle:{},activeStyle:{},defaultConfig:{}},exports.LuckyGrid=v,exports.LuckyWheel=y; 17 | -------------------------------------------------------------------------------- /dist/react-luck-draw.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) : 3 | typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) : 4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactLuckDraw = {}, global.React)); 5 | }(this, (function (exports, React) { 'use strict'; 6 | 7 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } 8 | 9 | var React__default = /*#__PURE__*/_interopDefaultLegacy(React); 10 | 11 | function _classCallCheck(instance, Constructor) { 12 | if (!(instance instanceof Constructor)) { 13 | throw new TypeError("Cannot call a class as a function"); 14 | } 15 | } 16 | 17 | function _defineProperties(target, props) { 18 | for (var i = 0; i < props.length; i++) { 19 | var descriptor = props[i]; 20 | descriptor.enumerable = descriptor.enumerable || false; 21 | descriptor.configurable = true; 22 | if ("value" in descriptor) descriptor.writable = true; 23 | Object.defineProperty(target, descriptor.key, descriptor); 24 | } 25 | } 26 | 27 | function _createClass(Constructor, protoProps, staticProps) { 28 | if (protoProps) _defineProperties(Constructor.prototype, protoProps); 29 | if (staticProps) _defineProperties(Constructor, staticProps); 30 | return Constructor; 31 | } 32 | 33 | function _defineProperty(obj, key, value) { 34 | if (key in obj) { 35 | Object.defineProperty(obj, key, { 36 | value: value, 37 | enumerable: true, 38 | configurable: true, 39 | writable: true 40 | }); 41 | } else { 42 | obj[key] = value; 43 | } 44 | 45 | return obj; 46 | } 47 | 48 | function ownKeys(object, enumerableOnly) { 49 | var keys = Object.keys(object); 50 | 51 | if (Object.getOwnPropertySymbols) { 52 | var symbols = Object.getOwnPropertySymbols(object); 53 | if (enumerableOnly) symbols = symbols.filter(function (sym) { 54 | return Object.getOwnPropertyDescriptor(object, sym).enumerable; 55 | }); 56 | keys.push.apply(keys, symbols); 57 | } 58 | 59 | return keys; 60 | } 61 | 62 | function _objectSpread2(target) { 63 | for (var i = 1; i < arguments.length; i++) { 64 | var source = arguments[i] != null ? arguments[i] : {}; 65 | 66 | if (i % 2) { 67 | ownKeys(Object(source), true).forEach(function (key) { 68 | _defineProperty(target, key, source[key]); 69 | }); 70 | } else if (Object.getOwnPropertyDescriptors) { 71 | Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 72 | } else { 73 | ownKeys(Object(source)).forEach(function (key) { 74 | Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 75 | }); 76 | } 77 | } 78 | 79 | return target; 80 | } 81 | 82 | function _inherits(subClass, superClass) { 83 | if (typeof superClass !== "function" && superClass !== null) { 84 | throw new TypeError("Super expression must either be null or a function"); 85 | } 86 | 87 | subClass.prototype = Object.create(superClass && superClass.prototype, { 88 | constructor: { 89 | value: subClass, 90 | writable: true, 91 | configurable: true 92 | } 93 | }); 94 | if (superClass) _setPrototypeOf(subClass, superClass); 95 | } 96 | 97 | function _getPrototypeOf(o) { 98 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { 99 | return o.__proto__ || Object.getPrototypeOf(o); 100 | }; 101 | return _getPrototypeOf(o); 102 | } 103 | 104 | function _setPrototypeOf(o, p) { 105 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { 106 | o.__proto__ = p; 107 | return o; 108 | }; 109 | 110 | return _setPrototypeOf(o, p); 111 | } 112 | 113 | function _isNativeReflectConstruct() { 114 | if (typeof Reflect === "undefined" || !Reflect.construct) return false; 115 | if (Reflect.construct.sham) return false; 116 | if (typeof Proxy === "function") return true; 117 | 118 | try { 119 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); 120 | return true; 121 | } catch (e) { 122 | return false; 123 | } 124 | } 125 | 126 | function _assertThisInitialized(self) { 127 | if (self === void 0) { 128 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 129 | } 130 | 131 | return self; 132 | } 133 | 134 | function _possibleConstructorReturn(self, call) { 135 | if (call && (typeof call === "object" || typeof call === "function")) { 136 | return call; 137 | } 138 | 139 | return _assertThisInitialized(self); 140 | } 141 | 142 | function _createSuper(Derived) { 143 | var hasNativeReflectConstruct = _isNativeReflectConstruct(); 144 | 145 | return function _createSuperInternal() { 146 | var Super = _getPrototypeOf(Derived), 147 | result; 148 | 149 | if (hasNativeReflectConstruct) { 150 | var NewTarget = _getPrototypeOf(this).constructor; 151 | 152 | result = Reflect.construct(Super, arguments, NewTarget); 153 | } else { 154 | result = Super.apply(this, arguments); 155 | } 156 | 157 | return _possibleConstructorReturn(this, result); 158 | }; 159 | } 160 | 161 | function createCommonjsModule(fn) { 162 | var module = { exports: {} }; 163 | return fn(module, module.exports), module.exports; 164 | } 165 | 166 | var luckyCanvas_cjs_min = createCommonjsModule(function (module, exports) { 167 | 168 | Object.defineProperty(exports, "__esModule", { 169 | value: !0 170 | }); 171 | /*! ***************************************************************************** 172 | Copyright (c) Microsoft Corporation. 173 | 174 | Permission to use, copy, modify, and/or distribute this software for any 175 | purpose with or without fee is hereby granted. 176 | 177 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 178 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 179 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 180 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 181 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 182 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 183 | PERFORMANCE OF THIS SOFTWARE. 184 | ***************************************************************************** */ 185 | 186 | var t = function (e, i) { 187 | return (t = Object.setPrototypeOf || { 188 | __proto__: [] 189 | } instanceof Array && function (t, e) { 190 | t.__proto__ = e; 191 | } || function (t, e) { 192 | for (var i in e) Object.prototype.hasOwnProperty.call(e, i) && (t[i] = e[i]); 193 | })(e, i); 194 | }; 195 | 196 | function e(e, i) { 197 | function n() { 198 | this.constructor = e; 199 | } 200 | 201 | t(e, i), e.prototype = null === i ? Object.create(i) : (n.prototype = i.prototype, new n()); 202 | } 203 | 204 | var i = function () { 205 | return (i = Object.assign || function (t) { 206 | for (var e, i = 1, n = arguments.length; i < n; i++) for (var r in e = arguments[i]) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r]); 207 | 208 | return t; 209 | }).apply(this, arguments); 210 | }; 211 | 212 | function n(t, e, i, n) { 213 | return new (i || (i = Promise))(function (r, o) { 214 | function s(t) { 215 | try { 216 | u(n.next(t)); 217 | } catch (t) { 218 | o(t); 219 | } 220 | } 221 | 222 | function a(t) { 223 | try { 224 | u(n.throw(t)); 225 | } catch (t) { 226 | o(t); 227 | } 228 | } 229 | 230 | function u(t) { 231 | var e; 232 | t.done ? r(t.value) : (e = t.value, e instanceof i ? e : new i(function (t) { 233 | t(e); 234 | })).then(s, a); 235 | } 236 | 237 | u((n = n.apply(t, e || [])).next()); 238 | }); 239 | } 240 | 241 | function r(t, e) { 242 | var i, 243 | n, 244 | r, 245 | o, 246 | s = { 247 | label: 0, 248 | sent: function () { 249 | if (1 & r[0]) throw r[1]; 250 | return r[1]; 251 | }, 252 | trys: [], 253 | ops: [] 254 | }; 255 | return o = { 256 | next: a(0), 257 | throw: a(1), 258 | return: a(2) 259 | }, "function" == typeof Symbol && (o[Symbol.iterator] = function () { 260 | return this; 261 | }), o; 262 | 263 | function a(o) { 264 | return function (a) { 265 | return function (o) { 266 | if (i) throw new TypeError("Generator is already executing."); 267 | 268 | for (; s;) try { 269 | if (i = 1, n && (r = 2 & o[0] ? n.return : o[0] ? n.throw || ((r = n.return) && r.call(n), 0) : n.next) && !(r = r.call(n, o[1])).done) return r; 270 | 271 | switch (n = 0, r && (o = [2 & o[0], r.value]), o[0]) { 272 | case 0: 273 | case 1: 274 | r = o; 275 | break; 276 | 277 | case 4: 278 | return s.label++, { 279 | value: o[1], 280 | done: !1 281 | }; 282 | 283 | case 5: 284 | s.label++, n = o[1], o = [0]; 285 | continue; 286 | 287 | case 7: 288 | o = s.ops.pop(), s.trys.pop(); 289 | continue; 290 | 291 | default: 292 | if (!(r = s.trys, (r = r.length > 0 && r[r.length - 1]) || 6 !== o[0] && 2 !== o[0])) { 293 | s = 0; 294 | continue; 295 | } 296 | 297 | if (3 === o[0] && (!r || o[1] > r[0] && o[1] < r[3])) { 298 | s.label = o[1]; 299 | break; 300 | } 301 | 302 | if (6 === o[0] && s.label < r[1]) { 303 | s.label = r[1], r = o; 304 | break; 305 | } 306 | 307 | if (r && s.label < r[2]) { 308 | s.label = r[2], s.ops.push(o); 309 | break; 310 | } 311 | 312 | r[2] && s.ops.pop(), s.trys.pop(); 313 | continue; 314 | } 315 | 316 | o = e.call(t, s); 317 | } catch (t) { 318 | o = [6, t], n = 0; 319 | } finally { 320 | i = r = 0; 321 | } 322 | 323 | if (5 & o[0]) throw o[1]; 324 | return { 325 | value: o[0] ? o[1] : void 0, 326 | done: !0 327 | }; 328 | }([o, a]); 329 | }; 330 | } 331 | } 332 | 333 | function o() { 334 | for (var t = 0, e = 0, i = arguments.length; e < i; e++) t += arguments[e].length; 335 | 336 | var n = Array(t), 337 | r = 0; 338 | 339 | for (e = 0; e < i; e++) for (var o = arguments[e], s = 0, a = o.length; s < a; s++, r++) n[r] = o[s]; 340 | 341 | return n; 342 | } 343 | 344 | String.prototype.includes || (String.prototype.includes = function (t, e) { 345 | return "number" != typeof e && (e = 0), !(e + t.length > this.length) && -1 !== this.indexOf(t, e); 346 | }), Array.prototype.find || Object.defineProperty(Array.prototype, "find", { 347 | value: function (t) { 348 | if (null == this) throw new TypeError('"this" is null or not defined'); 349 | var e = Object(this), 350 | i = e.length >>> 0; 351 | if ("function" != typeof t) throw new TypeError("predicate must be a function"); 352 | 353 | for (var n = arguments[1], r = 0; r < i;) { 354 | var o = e[r]; 355 | if (t.call(n, o, r, e)) return o; 356 | r++; 357 | } 358 | } 359 | }); 360 | 361 | var s = function (t) { 362 | for (var e = [], i = 1; i < arguments.length; i++) e[i - 1] = arguments[i]; 363 | 364 | return e.some(function (e) { 365 | return Object.prototype.toString.call(t).slice(8, -1).toLowerCase() === e; 366 | }); 367 | }, 368 | a = function (t) { 369 | return [].filter.call(t, function (t) { 370 | return "\n" !== t; 371 | }).join(""); 372 | }, 373 | u = function (t) { 374 | if ("string" != typeof t) return !1; 375 | if ("transparent" === (t = t.toLocaleLowerCase().trim())) return !1; 376 | 377 | if (/^rgba/.test(t)) { 378 | var e = /([^\s,]+)\)$/.exec(t); 379 | if (0 === (null === (i = e) ? 0 : "object" == typeof i ? NaN : "number" == typeof i ? i : "string" == typeof i ? "%" === i[i.length - 1] ? Number(i.slice(0, -1)) / 100 : Number(i) : NaN)) return !1; 380 | } 381 | 382 | var i; 383 | return !0; 384 | }, 385 | h = function () { 386 | function t() { 387 | this.subs = []; 388 | } 389 | 390 | return t.prototype.addSub = function (t) { 391 | this.subs.includes(t) || this.subs.push(t); 392 | }, t.prototype.notify = function () { 393 | this.subs.forEach(function (t) { 394 | t.update(); 395 | }); 396 | }, t; 397 | }(), 398 | c = ("__proto__" in {}); 399 | 400 | function l(t, e, i, n) { 401 | Object.defineProperty(t, e, { 402 | value: i, 403 | enumerable: !!n, 404 | writable: !0, 405 | configurable: !0 406 | }); 407 | } 408 | 409 | var f = Array.prototype, 410 | d = Object.create(f); 411 | ["push", "pop", "shift", "unshift", "sort", "splice", "reverse"].forEach(function (t) { 412 | d[t] = function () { 413 | for (var e = [], i = 0; i < arguments.length; i++) e[i] = arguments[i]; 414 | 415 | var n = f[t].apply(this, e), 416 | r = this.__luckyOb__; 417 | return ["push", "unshift", "splice"].includes(t) && r.walk(this), r.dep.notify(), n; 418 | }; 419 | }); 420 | 421 | var p = function () { 422 | function t(t) { 423 | this.dep = new h(), l(t, "__luckyOb__", this), Array.isArray(t) && (c ? t.__proto__ = d : Object.getOwnPropertyNames(d).forEach(function (e) { 424 | l(t, e, d[e]); 425 | })), this.walk(t); 426 | } 427 | 428 | return t.prototype.walk = function (t) { 429 | Object.keys(t).forEach(function (e) { 430 | m(t, e, t[e]); 431 | }); 432 | }, t; 433 | }(); 434 | 435 | function g(t) { 436 | if (t && "object" == typeof t) return "__luckyOb__" in t ? t.__luckyOb__ : new p(t); 437 | } 438 | 439 | function m(t, e, i) { 440 | var n = new h(), 441 | r = Object.getOwnPropertyDescriptor(t, e); 442 | 443 | if (!r || !1 !== r.configurable) { 444 | var o = r && r.get, 445 | s = r && r.set; 446 | o && !s || 2 !== arguments.length || (i = t[e]); 447 | var a = g(i); 448 | Object.defineProperty(t, e, { 449 | get: function () { 450 | var e = o ? o.call(t) : i; 451 | return h.target && (n.addSub(h.target), a && a.dep.addSub(h.target)), e; 452 | }, 453 | set: function (e) { 454 | e !== i && (i = e, o && !s || (s ? s.call(t, e) : i = e, a = g(e), n.notify())); 455 | } 456 | }); 457 | } 458 | } 459 | 460 | var v = 0, 461 | b = function () { 462 | function t(t, e, i, n) { 463 | void 0 === n && (n = {}), this.id = v++, this.$lucky = t, this.expr = e, this.deep = !!n.deep, this.getter = "function" == typeof e ? e : function (t) { 464 | t += "."; 465 | 466 | for (var e = [], i = "", n = 0; n < t.length; n++) { 467 | var r = t[n]; 468 | if (/\[|\./.test(r)) e.push(i), i = "";else { 469 | if (/\W/.test(r)) continue; 470 | i += r; 471 | } 472 | } 473 | 474 | return function (t) { 475 | return e.reduce(function (t, e) { 476 | return t[e]; 477 | }, t); 478 | }; 479 | }(e), this.cb = i, this.value = this.get(); 480 | } 481 | 482 | return t.prototype.get = function () { 483 | h.target = this; 484 | var t = this.getter.call(this.$lucky, this.$lucky); 485 | return this.deep && function (t) { 486 | var e = function (t) { 487 | s(t, "array", "object") && Object.keys(t).forEach(function (i) { 488 | var n = t[i]; 489 | e(n); 490 | }); 491 | }; 492 | 493 | e(t); 494 | }(t), h.target = null, t; 495 | }, t.prototype.update = function () { 496 | var t = this.get(), 497 | e = this.value; 498 | this.value = t, this.cb.call(this.$lucky, t, e); 499 | }, t; 500 | }(), 501 | w = function () { 502 | function t(t) { 503 | var e = this; 504 | this.htmlFontSize = 16, this.rAF = function () {}, this.setHTMLFontSize(), "string" == typeof t ? t = { 505 | el: t 506 | } : 1 === t.nodeType && (t = { 507 | el: "", 508 | divElement: t 509 | }), t = t, this.config = t, this.setDpr(), this.initWindowFunction(), t.flag || (t.flag = "WEB"), Object.prototype.hasOwnProperty.call(t, "ob") || (t.ob = !0), t.el && (t.divElement = document.querySelector(t.el)); 510 | var i = 0, 511 | n = 0; 512 | t.divElement && (i = t.divElement.offsetWidth, n = t.divElement.offsetHeight, t.canvasElement = document.createElement("canvas"), t.divElement.appendChild(t.canvasElement)), t.width = this.getLength(t.width) || i, t.height = this.getLength(t.height) || n, t.divElement && (t.divElement.style.overflow = "hidden", t.divElement.style.width = t.width + "px", t.divElement.style.height = t.height + "px"), t.canvasElement && (t.ctx = t.canvasElement.getContext("2d"), t.canvasElement.setAttribute("package", "lucky-canvas@1.5.2"), t.canvasElement.addEventListener("click", function (t) { 513 | return e.handleClick(t); 514 | }), t.canvasElement.addEventListener("mousemove", function (t) { 515 | return e.handleMouseMove(t); 516 | }), t.canvasElement.addEventListener("mousedown", function (t) { 517 | return e.handleMouseDown(t); 518 | }), t.canvasElement.addEventListener("mouseup", function (t) { 519 | return e.handleMouseUp(t); 520 | })), this.ctx = t.ctx, t.ctx && t.width && t.height || console.error("无法获取到 CanvasContext2D 或宽高"); 521 | } 522 | 523 | return t.prototype.handleClick = function (t) {}, t.prototype.handleMouseDown = function (t) {}, t.prototype.handleMouseUp = function (t) {}, t.prototype.handleMouseMove = function (t) {}, t.prototype.conversionAxis = function (t, e) { 524 | return [0, 0]; 525 | }, t.prototype.setDpr = function () { 526 | var t = this.config; 527 | t.dpr || (window ? window.dpr = t.dpr = window.devicePixelRatio || 1 : t.dpr || console.error(t, "未传入 dpr 可能会导致绘制异常")); 528 | }, t.prototype.setHTMLFontSize = function () { 529 | window && (this.htmlFontSize = +window.getComputedStyle(document.documentElement).fontSize.slice(0, -2)); 530 | }, t.prototype.initWindowFunction = function () { 531 | var t = this.config; 532 | if (window) return this.rAF = window.requestAnimationFrame, t.setTimeout = window.setTimeout, t.setInterval = window.setInterval, t.clearTimeout = window.clearTimeout, void (t.clearInterval = window.clearInterval); 533 | if (t.rAF) this.rAF = t.rAF;else if (t.setTimeout) { 534 | var e = t.setTimeout; 535 | 536 | this.rAF = function (t) { 537 | return e(t, 16); 538 | }; 539 | } else this.rAF = function (t) { 540 | return setTimeout(t, 16); 541 | }; 542 | }, t.prototype.zoomCanvas = function () { 543 | var t = this.config, 544 | e = this.ctx, 545 | i = t.canvasElement, 546 | n = t.dpr, 547 | r = function (t) { 548 | return (t * n - t) / (t * n) * (n / 2) * 100; 549 | }; 550 | 551 | i && (i.width = t.width * n, i.height = t.height * n, i.style.width = i.width + "px", i.style.height = i.height + "px", i.style.transform = "scale(" + 1 / n + ") translate(\n " + -r(i.width) + "%, " + -r(i.height) + "%\n )", e.scale(n, n)); 552 | }, t.prototype.loadImg = function (t, e, i) { 553 | var n = this; 554 | return void 0 === i && (i = "$resolve"), new Promise(function (r, o) { 555 | if (t || o("=> '" + e.src + "' 不能为空或不合法"), "WEB" === n.config.flag) { 556 | var s = new Image(); 557 | s.src = t, s.onload = function () { 558 | return r(s); 559 | }, s.onerror = function () { 560 | return o("=> '" + e.src + "' 图片加载失败"); 561 | }; 562 | } else e[i] = r; 563 | }); 564 | }, t.prototype.drawImage = function (t, e, i, n, r) { 565 | var o, 566 | s = this.config, 567 | a = this.ctx; 568 | return ["WEB", "MP-WX"].includes(s.flag) ? o = t : ["UNI-H5", "UNI-MP", "TARO-H5", "TARO-MP"].includes(s.flag) && (o = t.path), a.drawImage(o, e, i, n, r); 569 | }, t.prototype.getLength = function (t) { 570 | return s(t, "number") ? t : s(t, "string") ? this.changeUnits(t) : 0; 571 | }, t.prototype.changeUnits = function (t, e) { 572 | var i = this; 573 | return void 0 === e && (e = 1), Number(t.replace(/^([-]*[0-9.]*)([a-z%]*)$/, function (t, n, r) { 574 | var o = { 575 | "%": function (t) { 576 | return t * (e / 100); 577 | }, 578 | px: function (t) { 579 | return 1 * t; 580 | }, 581 | rem: function (t) { 582 | return t * i.htmlFontSize; 583 | } 584 | }[r]; 585 | if (o) return o(n); 586 | var s = i.config.unitFunc; 587 | return s ? s(n, r) : n; 588 | })); 589 | }, t.prototype.$set = function (t, e, i) { 590 | t && "object" == typeof t && m(t, e, i); 591 | }, t.prototype.$computed = function (t, e, i) { 592 | var n = this; 593 | Object.defineProperty(t, e, { 594 | get: function () { 595 | return i.call(n); 596 | } 597 | }); 598 | }, t.prototype.$watch = function (t, e, i) { 599 | void 0 === i && (i = {}), "object" == typeof e && (e = (i = e).handler); 600 | var n = new b(this, t, e, i); 601 | return i.immediate && e.call(this, n.value), function () {}; 602 | }, t; 603 | }(), 604 | y = function (t) { 605 | return Math.PI / 180 * t; 606 | }, 607 | z = function (t, e) { 608 | return [+(Math.cos(t) * e).toFixed(8), +(Math.sin(t) * e).toFixed(8)]; 609 | }, 610 | I = function (t, e) { 611 | var i = -t / e; 612 | return [i, -i * t + e]; 613 | }, 614 | S = function (t, e, i, n, r, o) { 615 | var s; 616 | 617 | if (void 0 === o && (o = !0), Math.abs(r - n).toFixed(8) >= y(180).toFixed(8)) { 618 | var a = (r + n) / 2; 619 | return o ? (S(t, e, i, n, a, o), S(t, e, i, a, r, o)) : (S(t, e, i, a, r, o), S(t, e, i, n, a, o)), !1; 620 | } 621 | 622 | o || (n = (s = [r, n])[0], r = s[1]); 623 | var u = z(n, i), 624 | h = u[0], 625 | c = u[1], 626 | l = z(r, i), 627 | f = l[0], 628 | d = l[1], 629 | p = I(h, c), 630 | g = p[0], 631 | m = p[1], 632 | v = I(f, d), 633 | b = v[0], 634 | w = v[1], 635 | x = (w - m) / (g - b), 636 | k = (b * m - g * w) / (b - g); 637 | isNaN(x) && (Math.abs(h) === +i.toFixed(8) && (x = h), Math.abs(f) === +i.toFixed(8) && (x = f)), g === 1 / 0 || g === -1 / 0 ? k = b * x + w : b !== 1 / 0 && b !== -1 / 0 || (k = g * x + m), e.lineTo(h, c), t.indexOf("MP") > 0 ? e.quadraticCurveTo(x, k, f, d) : e.arcTo(x, k, f, d, i); 638 | }, 639 | x = function (t, e, i, n, r, o, s, a) { 640 | i || (i = s); 641 | var u = y(90 / Math.PI / n * s), 642 | h = y(90 / Math.PI / i * s), 643 | c = r + u, 644 | l = o - u, 645 | f = r + h, 646 | d = o - h; 647 | e.beginPath(), e.fillStyle = a, e.moveTo.apply(e, z(c, n)), S(t, e, n, c, l, !0), d > f ? S(t, e, i, f, d, !1) : e.lineTo.apply(e, z((r + o) / 2, s / 2 / Math.abs(Math.sin((r - o) / 2)))), e.closePath(), e.fill(); 648 | }, 649 | k = function (t, e, i, n, r, o, s) { 650 | var a = Math.min(n, r); 651 | o > a / 2 && (o = a / 2), t.beginPath(), t.fillStyle = s, t.moveTo(e + o, i), t.lineTo(e + o, i), t.lineTo(e + n - o, i), t.quadraticCurveTo(e + n, i, e + n, i + o), t.lineTo(e + n, i + r - o), t.quadraticCurveTo(e + n, i + r, e + n - o, i + r), t.lineTo(e + o, i + r), t.quadraticCurveTo(e, i + r, e, i + r - o), t.lineTo(e, i + o), t.quadraticCurveTo(e, i, e + o, i), t.closePath(), t.fill(); 652 | }, 653 | T = { 654 | easeIn: function (t, e, i, n) { 655 | return t >= n && (t = n), i * (t /= n) * t + e; 656 | }, 657 | easeOut: function (t, e, i, n) { 658 | return t >= n && (t = n), -i * (t /= n) * (t - 2) + e; 659 | } 660 | }, 661 | C = { 662 | easeIn: function (t, e, i, n) { 663 | return t >= n && (t = n), -i * Math.cos(t / n * (Math.PI / 2)) + i + e; 664 | }, 665 | easeOut: function (t, e, i, n) { 666 | return t >= n && (t = n), i * Math.sin(t / n * (Math.PI / 2)) + e; 667 | } 668 | }, 669 | O = { 670 | easeIn: function (t, e, i, n) { 671 | return t >= n && (t = n), 0 == t ? e : i * Math.pow(2, 10 * (t / n - 1)) + e; 672 | }, 673 | easeOut: function (t, e, i, n) { 674 | return t >= n && (t = n), t == n ? e + i : i * (1 - Math.pow(2, -10 * t / n)) + e; 675 | } 676 | }, 677 | _ = { 678 | easeIn: function (t, e, i, n) { 679 | return t >= n && (t = n), -i * (Math.sqrt(1 - (t /= n) * t) - 1) + e; 680 | }, 681 | easeOut: function (t, e, i, n) { 682 | return t >= n && (t = n), i * Math.sqrt(1 - (t = t / n - 1) * t) + e; 683 | } 684 | }, 685 | E = Object.freeze({ 686 | __proto__: null, 687 | quad: T, 688 | cubic: { 689 | easeIn: function (t, e, i, n) { 690 | return t >= n && (t = n), i * (t /= n) * t * t + e; 691 | }, 692 | easeOut: function (t, e, i, n) { 693 | return t >= n && (t = n), i * ((t = t / n - 1) * t * t + 1) + e; 694 | } 695 | }, 696 | quart: { 697 | easeIn: function (t, e, i, n) { 698 | return t >= n && (t = n), i * (t /= n) * t * t * t + e; 699 | }, 700 | easeOut: function (t, e, i, n) { 701 | return t >= n && (t = n), -i * ((t = t / n - 1) * t * t * t - 1) + e; 702 | } 703 | }, 704 | quint: { 705 | easeIn: function (t, e, i, n) { 706 | return t >= n && (t = n), i * (t /= n) * t * t * t * t + e; 707 | }, 708 | easeOut: function (t, e, i, n) { 709 | return t >= n && (t = n), i * ((t = t / n - 1) * t * t * t * t + 1) + e; 710 | } 711 | }, 712 | sine: C, 713 | expo: O, 714 | circ: _ 715 | }), 716 | P = function (t) { 717 | function o(e, i) { 718 | void 0 === i && (i = {}); 719 | var n = t.call(this, e) || this; 720 | return n.blocks = [], n.prizes = [], n.buttons = [], n.defaultConfig = {}, n._defaultConfig = { 721 | gutter: "0px", 722 | offsetDegree: 0, 723 | speed: 20, 724 | speedFunction: "quad", 725 | accelerationTime: 2500, 726 | decelerationTime: 2500, 727 | stopRange: .8 728 | }, n.defaultStyle = {}, n._defaultStyle = { 729 | fontSize: "18px", 730 | fontColor: "#000", 731 | fontStyle: "sans-serif", 732 | fontWeight: "400", 733 | lineHeight: "", 734 | background: "transparent", 735 | wordWrap: !0, 736 | lengthLimit: "90%" 737 | }, n.Radius = 0, n.prizeRadius = 0, n.prizeDeg = 0, n.prizeRadian = 0, n.rotateDeg = 0, n.maxBtnRadius = 0, n.startTime = 0, n.endTime = 0, n.stopDeg = 0, n.endDeg = 0, n.FPS = 16.6, n.blockImgs = [[]], n.prizeImgs = [[]], n.btnImgs = [[]], e.ob && (n.initData(i), n.initWatch()), n.initComputed(), n.init({ 738 | blockImgs: n.blocks.map(function (t) { 739 | return t.imgs; 740 | }), 741 | prizeImgs: n.prizes.map(function (t) { 742 | return t.imgs; 743 | }), 744 | btnImgs: n.buttons.map(function (t) { 745 | return t.imgs; 746 | }) 747 | }), n; 748 | } 749 | 750 | return e(o, t), o.prototype.initData = function (t) { 751 | this.$set(this, "blocks", t.blocks || []), this.$set(this, "prizes", t.prizes || []), this.$set(this, "buttons", t.buttons || []), this.$set(this, "defaultConfig", t.defaultConfig || {}), this.$set(this, "defaultStyle", t.defaultStyle || {}), this.$set(this, "startCallback", t.start), this.$set(this, "endCallback", t.end); 752 | }, o.prototype.initComputed = function () { 753 | var t = this; 754 | this.$computed(this, "_defaultConfig", function () { 755 | return i({ 756 | gutter: "0px", 757 | offsetDegree: 0, 758 | speed: 20, 759 | speedFunction: "quad", 760 | accelerationTime: 2500, 761 | decelerationTime: 2500, 762 | stopRange: .8 763 | }, t.defaultConfig); 764 | }), this.$computed(this, "_defaultStyle", function () { 765 | return i({ 766 | fontSize: "18px", 767 | fontColor: "#000", 768 | fontStyle: "sans-serif", 769 | fontWeight: "400", 770 | background: "transparent", 771 | wordWrap: !0, 772 | lengthLimit: "90%" 773 | }, t.defaultStyle); 774 | }); 775 | }, o.prototype.initWatch = function () { 776 | var t = this; 777 | this.$watch("blocks", function (e) { 778 | return t.init({ 779 | blockImgs: e.map(function (t) { 780 | return t.imgs; 781 | }) 782 | }); 783 | }, { 784 | deep: !0 785 | }), this.$watch("prizes", function (e) { 786 | return t.init({ 787 | prizeImgs: e.map(function (t) { 788 | return t.imgs; 789 | }) 790 | }); 791 | }, { 792 | deep: !0 793 | }), this.$watch("buttons", function (e) { 794 | return t.init({ 795 | btnImgs: e.map(function (t) { 796 | return t.imgs; 797 | }) 798 | }); 799 | }, { 800 | deep: !0 801 | }), this.$watch("defaultConfig", function () { 802 | return t.draw(); 803 | }, { 804 | deep: !0 805 | }), this.$watch("defaultStyle", function () { 806 | return t.draw(); 807 | }, { 808 | deep: !0 809 | }), this.$watch("startCallback", function () { 810 | return t.init({}); 811 | }), this.$watch("endCallback", function () { 812 | return t.init({}); 813 | }); 814 | }, o.prototype.init = function (t) { 815 | var e, 816 | i, 817 | n = this, 818 | r = this.config, 819 | o = this.ctx; 820 | this.setDpr(), this.setHTMLFontSize(), this.zoomCanvas(), this.Radius = Math.min(r.width, r.height) / 2, null === (e = r.beforeInit) || void 0 === e || e.call(this), o.translate(this.Radius, this.Radius), this.draw(), Object.keys(t).forEach(function (e) { 821 | var i = e, 822 | r = { 823 | blockImgs: "blocks", 824 | prizeImgs: "prizes", 825 | btnImgs: "buttons" 826 | }[i], 827 | o = t[i]; 828 | o && o.forEach(function (t, e) { 829 | t && t.forEach(function (t, o) { 830 | n.loadAndCacheImg(r, e, i, o, function () { 831 | n.draw(); 832 | }); 833 | }); 834 | }); 835 | }), null === (i = r.afterInit) || void 0 === i || i.call(this); 836 | }, o.prototype.handleClick = function (t) { 837 | var e, 838 | i = this.ctx; 839 | i.beginPath(), i.arc(0, 0, this.maxBtnRadius, 0, 2 * Math.PI, !1), i.isPointInPath(t.offsetX, t.offsetY) && (this.startTime || null === (e = this.startCallback) || void 0 === e || e.call(this, t)); 840 | }, o.prototype.loadAndCacheImg = function (t, e, i, o, s) { 841 | return n(this, void 0, void 0, function () { 842 | var n, 843 | a, 844 | u = this; 845 | return r(this, function (r) { 846 | return (n = this[t][e]) && n.imgs && (a = n.imgs[o]) ? (this[i][e] || (this[i][e] = []), this.loadImg(a.src, a).then(function (t) { 847 | u[i][e][o] = t, s.call(u); 848 | }).catch(function (i) { 849 | console.error(t + "[" + e + "].imgs[" + o + "] " + i); 850 | }), [2]) : [2]; 851 | }); 852 | }); 853 | }, o.prototype.computedWidthAndHeight = function (t, e, i, n) { 854 | if (!e.width && !e.height) return [t.width, t.height]; 855 | 856 | if (e.width && !e.height) { 857 | var r = this.getWidth(e.width, i); 858 | return [r, t.height * (r / t.width)]; 859 | } 860 | 861 | if (!e.width && e.height) { 862 | var o = this.getHeight(e.height, n); 863 | return [t.width * (o / t.height), o]; 864 | } 865 | 866 | return [this.getWidth(e.width, i), this.getHeight(e.height, n)]; 867 | }, o.prototype.draw = function () { 868 | var t, 869 | e, 870 | i = this, 871 | n = this, 872 | r = n.config, 873 | o = n.ctx, 874 | s = n._defaultConfig, 875 | h = n._defaultStyle; 876 | null === (t = r.beforeDraw) || void 0 === t || t.call(this, o), o.clearRect(-this.Radius, -this.Radius, 2 * this.Radius, 2 * this.Radius), this.prizeRadius = this.blocks.reduce(function (t, e, n) { 877 | return u(e.background) && (o.beginPath(), o.fillStyle = e.background, o.arc(0, 0, t, 0, 2 * Math.PI, !1), o.fill()), e.imgs && e.imgs.forEach(function (e, r) { 878 | if (i.blockImgs[n]) { 879 | var s = i.blockImgs[n][r]; 880 | 881 | if (s) { 882 | var a = i.computedWidthAndHeight(s, e, 2 * t, 2 * t), 883 | u = a[0], 884 | h = a[1], 885 | c = [i.getOffsetX(u), i.getHeight(e.top, 2 * t) - t], 886 | l = c[0], 887 | f = c[1]; 888 | o.save(), e.rotate && o.rotate(y(i.rotateDeg)), i.drawImage(s, l, f, u, h), o.restore(); 889 | } 890 | } 891 | }), t - i.getLength(e.padding && e.padding.split(" ")[0]); 892 | }, this.Radius), this.prizeDeg = 360 / this.prizes.length, this.prizeRadian = y(this.prizeDeg); 893 | 894 | var c = y(-90 + this.rotateDeg + s.offsetDegree), 895 | l = function (t) { 896 | return i.getOffsetX(o.measureText(t).width); 897 | }, 898 | f = function (t, e, n) { 899 | var r = t.lineHeight || h.lineHeight || t.fontSize || h.fontSize; 900 | return i.getHeight(t.top, e) + (n + 1) * i.getLength(r); 901 | }; 902 | 903 | o.save(), this.prizes.forEach(function (t, e) { 904 | var n = c + e * i.prizeRadian, 905 | d = i.prizeRadius - i.maxBtnRadius, 906 | p = t.background || h.background; 907 | u(p) && function (t, e, i, n, r, o, s, a) { 908 | s ? x(t, e, i, n, r, o, s, a) : (e.beginPath(), e.fillStyle = a, e.moveTo(0, 0), e.arc(0, 0, n, r, o, !1), e.closePath(), e.fill()); 909 | }(r.flag, o, i.maxBtnRadius, i.prizeRadius, n - i.prizeRadian / 2, n + i.prizeRadian / 2, i.getLength(s.gutter), p); 910 | var g = Math.cos(n) * i.prizeRadius, 911 | m = Math.sin(n) * i.prizeRadius; 912 | o.translate(g, m), o.rotate(n + y(90)), t.imgs && t.imgs.forEach(function (t, n) { 913 | if (i.prizeImgs[e]) { 914 | var r = i.prizeImgs[e][n]; 915 | 916 | if (r) { 917 | var o = i.computedWidthAndHeight(r, t, i.prizeRadian * i.prizeRadius, d), 918 | s = o[0], 919 | a = o[1], 920 | u = [i.getOffsetX(s), i.getHeight(t.top, d)], 921 | h = u[0], 922 | c = u[1]; 923 | i.drawImage(r, h, c, s, a); 924 | } 925 | } 926 | }), t.fonts && t.fonts.forEach(function (t) { 927 | var e = t.fontColor || h.fontColor, 928 | n = t.fontWeight || h.fontWeight, 929 | r = i.getLength(t.fontSize || h.fontSize), 930 | u = t.fontStyle || h.fontStyle; 931 | o.fillStyle = e, o.font = n + " " + (r >> 0) + "px " + u; 932 | var c = [], 933 | p = String(t.text); 934 | 935 | if (Object.prototype.hasOwnProperty.call(t, "wordWrap") ? t.wordWrap : h.wordWrap) { 936 | p = a(p); 937 | 938 | for (var g = "", m = 0; m < p.length; m++) { 939 | g += p[m]; 940 | var v = o.measureText(g).width, 941 | b = (i.prizeRadius - f(t, d, c.length)) * Math.tan(i.prizeRadian / 2) * 2 - i.getLength(s.gutter); 942 | v > i.getWidth(t.lengthLimit || h.lengthLimit, b) && (c.push(g.slice(0, -1)), g = p[m]); 943 | } 944 | 945 | g && c.push(g), c.length || c.push(p); 946 | } else c = p.split("\n"); 947 | 948 | c.filter(function (t) { 949 | return !!t; 950 | }).forEach(function (e, i) { 951 | o.fillText(e, l(e), f(t, d, i)); 952 | }); 953 | }), o.rotate(y(360) - n - y(90)), o.translate(-g, -m); 954 | }), o.restore(), this.buttons.forEach(function (t, e) { 955 | var n = i.getHeight(t.radius); 956 | i.maxBtnRadius = Math.max(i.maxBtnRadius, n), u(t.background) && (o.beginPath(), o.fillStyle = t.background, o.arc(0, 0, n, 0, 2 * Math.PI, !1), o.fill()), t.pointer && u(t.background) && (o.beginPath(), o.fillStyle = t.background, o.moveTo(-n, 0), o.lineTo(n, 0), o.lineTo(0, 2 * -n), o.closePath(), o.fill()), t.imgs && t.imgs.forEach(function (t, r) { 957 | if (i.btnImgs[e]) { 958 | var o = i.btnImgs[e][r]; 959 | 960 | if (o) { 961 | var s = i.computedWidthAndHeight(o, t, 2 * n, 2 * n), 962 | a = s[0], 963 | u = s[1], 964 | h = [i.getOffsetX(a), i.getHeight(t.top, n)], 965 | c = h[0], 966 | l = h[1]; 967 | i.drawImage(o, c, l, a, u); 968 | } 969 | } 970 | }), t.fonts && t.fonts.forEach(function (t) { 971 | var e = t.fontColor || h.fontColor, 972 | r = t.fontWeight || h.fontWeight, 973 | s = i.getLength(t.fontSize || h.fontSize), 974 | a = t.fontStyle || h.fontStyle; 975 | o.fillStyle = e, o.font = r + " " + (s >> 0) + "px " + a, String(t.text).split("\n").forEach(function (e, i) { 976 | o.fillText(e, l(e), f(t, n, i)); 977 | }); 978 | }); 979 | }), null === (e = r.afterDraw) || void 0 === e || e.call(this, o); 980 | }, o.prototype.play = function () { 981 | this.startTime || (this.startTime = Date.now(), this.prizeFlag = void 0, this.run()); 982 | }, o.prototype.stop = function (t) { 983 | this.prizeFlag = t < 0 ? -1 : t % this.prizes.length, -1 === this.prizeFlag && (this.rotateDeg = this.prizeDeg / 2 - this._defaultConfig.offsetDegree, this.draw()); 984 | }, o.prototype.run = function (t) { 985 | void 0 === t && (t = 0); 986 | var e = this, 987 | i = e.rAF, 988 | n = e.prizeFlag, 989 | r = e.prizeDeg, 990 | o = e.rotateDeg, 991 | s = e._defaultConfig, 992 | a = Date.now() - this.startTime; 993 | 994 | if (a >= s.accelerationTime && void 0 !== n) { 995 | this.FPS = a / t, this.endTime = Date.now(), this.stopDeg = o; 996 | 997 | for (var u = (Math.random() * r - r / 2) * this.getLength(s.stopRange), h = 0; ++h;) { 998 | var c = 360 * h - n * r - o - s.offsetDegree + u; 999 | 1000 | if (E[s.speedFunction].easeOut(this.FPS, this.stopDeg, c, s.decelerationTime) - this.stopDeg > s.speed) { 1001 | this.endDeg = c; 1002 | break; 1003 | } 1004 | } 1005 | 1006 | return this.slowDown(); 1007 | } 1008 | 1009 | this.rotateDeg = (o + E[s.speedFunction].easeIn(a, 0, s.speed, s.accelerationTime)) % 360, this.draw(), i(this.run.bind(this, t + 1)); 1010 | }, o.prototype.slowDown = function () { 1011 | var t, 1012 | e = this, 1013 | n = e.rAF, 1014 | r = e.prizes, 1015 | o = e.prizeFlag, 1016 | s = e.stopDeg, 1017 | a = e.endDeg, 1018 | u = e._defaultConfig, 1019 | h = Date.now() - this.endTime; 1020 | 1021 | if (-1 !== o) { 1022 | if (h >= u.decelerationTime) return this.startTime = 0, void (null === (t = this.endCallback) || void 0 === t || t.call(this, i({}, r.find(function (t, e) { 1023 | return e === o; 1024 | })))); 1025 | this.rotateDeg = E[u.speedFunction].easeOut(h, s, a, u.decelerationTime) % 360, this.draw(), n(this.slowDown.bind(this)); 1026 | } else this.startTime = 0; 1027 | }, o.prototype.getWidth = function (t, e) { 1028 | return void 0 === e && (e = this.prizeRadian * this.prizeRadius), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, e) : 0; 1029 | }, o.prototype.getHeight = function (t, e) { 1030 | return void 0 === e && (e = this.prizeRadius), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, e) : 0; 1031 | }, o.prototype.getOffsetX = function (t) { 1032 | return -t / 2; 1033 | }, o.prototype.conversionAxis = function (t, e) { 1034 | var i = this.config; 1035 | return [t / i.dpr - this.Radius, e / i.dpr - this.Radius]; 1036 | }, o; 1037 | }(w), 1038 | D = function (t) { 1039 | function h(e, i) { 1040 | void 0 === i && (i = {}); 1041 | var n = t.call(this, e) || this; 1042 | n.rows = 3, n.cols = 3, n.blocks = [], n.prizes = [], n.buttons = [], n.defaultConfig = {}, n._defaultConfig = { 1043 | gutter: 5, 1044 | speed: 20, 1045 | accelerationTime: 2500, 1046 | decelerationTime: 2500 1047 | }, n.defaultStyle = {}, n._defaultStyle = { 1048 | borderRadius: 20, 1049 | fontColor: "#000", 1050 | fontSize: "18px", 1051 | fontStyle: "sans-serif", 1052 | fontWeight: "400", 1053 | lineHeight: "", 1054 | background: "transparent", 1055 | shadow: "", 1056 | wordWrap: !0, 1057 | lengthLimit: "90%" 1058 | }, n.activeStyle = {}, n._activeStyle = { 1059 | background: "#ffce98", 1060 | shadow: "", 1061 | fontStyle: "", 1062 | fontWeight: "", 1063 | fontSize: "", 1064 | lineHeight: "", 1065 | fontColor: "" 1066 | }, n.cellWidth = 0, n.cellHeight = 0, n.startTime = 0, n.endTime = 0, n.currIndex = 0, n.stopIndex = 0, n.endIndex = 0, n.demo = !1, n.timer = 0, n.FPS = 16.6, n.prizeFlag = -1, n.cells = [], n.blockImgs = [[]], n.btnImgs = [[]], n.prizeImgs = [], e.ob && (n.initData(i), n.initWatch()), n.initComputed(); 1067 | var r = n.buttons.map(function (t) { 1068 | return t.imgs; 1069 | }); 1070 | return n.button && r.push(n.button.imgs), n.init({ 1071 | blockImgs: n.blocks.map(function (t) { 1072 | return t.imgs; 1073 | }), 1074 | prizeImgs: n.prizes.map(function (t) { 1075 | return t.imgs; 1076 | }), 1077 | btnImgs: r 1078 | }), n; 1079 | } 1080 | 1081 | return e(h, t), h.prototype.initData = function (t) { 1082 | this.$set(this, "rows", Number(t.rows) || 3), this.$set(this, "cols", Number(t.cols) || 3), this.$set(this, "blocks", t.blocks || []), this.$set(this, "prizes", t.prizes || []), this.$set(this, "buttons", t.buttons || []), this.$set(this, "button", t.button), this.$set(this, "defaultConfig", t.defaultConfig || {}), this.$set(this, "defaultStyle", t.defaultStyle || {}), this.$set(this, "activeStyle", t.activeStyle || {}), this.$set(this, "startCallback", t.start), this.$set(this, "endCallback", t.end); 1083 | }, h.prototype.initComputed = function () { 1084 | var t = this; 1085 | this.$computed(this, "_defaultConfig", function () { 1086 | var e = i({ 1087 | gutter: 5, 1088 | speed: 20, 1089 | accelerationTime: 2500, 1090 | decelerationTime: 2500 1091 | }, t.defaultConfig); 1092 | return e.gutter = t.getLength(e.gutter), e.speed = e.speed / 40, e; 1093 | }), this.$computed(this, "_defaultStyle", function () { 1094 | return i({ 1095 | borderRadius: 20, 1096 | fontColor: "#000", 1097 | fontSize: "18px", 1098 | fontStyle: "sans-serif", 1099 | fontWeight: "400", 1100 | background: "transparent", 1101 | shadow: "", 1102 | wordWrap: !0, 1103 | lengthLimit: "90%" 1104 | }, t.defaultStyle); 1105 | }), this.$computed(this, "_activeStyle", function () { 1106 | return i({ 1107 | background: "#ffce98", 1108 | shadow: "" 1109 | }, t.activeStyle); 1110 | }); 1111 | }, h.prototype.initWatch = function () { 1112 | var t = this; 1113 | this.$watch("blocks", function (e) { 1114 | return t.init({ 1115 | blockImgs: e.map(function (t) { 1116 | return t.imgs; 1117 | }) 1118 | }); 1119 | }, { 1120 | deep: !0 1121 | }), this.$watch("prizes", function (e) { 1122 | return t.init({ 1123 | prizeImgs: e.map(function (t) { 1124 | return t.imgs; 1125 | }) 1126 | }); 1127 | }, { 1128 | deep: !0 1129 | }), this.$watch("buttons", function (e) { 1130 | var i = e.map(function (t) { 1131 | return t.imgs; 1132 | }); 1133 | return t.button && i.push(t.button.imgs), t.init({ 1134 | btnImgs: i 1135 | }); 1136 | }, { 1137 | deep: !0 1138 | }), this.$watch("button", function () { 1139 | var e = t.buttons.map(function (t) { 1140 | return t.imgs; 1141 | }); 1142 | return t.button && e.push(t.button.imgs), t.init({ 1143 | btnImgs: e 1144 | }); 1145 | }, { 1146 | deep: !0 1147 | }), this.$watch("rows", function () { 1148 | return t.init({}); 1149 | }), this.$watch("cols", function () { 1150 | return t.init({}); 1151 | }), this.$watch("defaultConfig", function () { 1152 | return t.draw(); 1153 | }, { 1154 | deep: !0 1155 | }), this.$watch("defaultStyle", function () { 1156 | return t.draw(); 1157 | }, { 1158 | deep: !0 1159 | }), this.$watch("activeStyle", function () { 1160 | return t.draw(); 1161 | }, { 1162 | deep: !0 1163 | }), this.$watch("startCallback", function () { 1164 | return t.init({}); 1165 | }), this.$watch("endCallback", function () { 1166 | return t.init({}); 1167 | }); 1168 | }, h.prototype.init = function (t) { 1169 | var e, 1170 | i, 1171 | n = this, 1172 | r = this, 1173 | o = r.config; 1174 | r.ctx, r.button; 1175 | this.setHTMLFontSize(), this.setDpr(), this.zoomCanvas(), null === (e = o.beforeInit) || void 0 === e || e.call(this), this.draw(), Object.keys(t).forEach(function (e) { 1176 | var i = e, 1177 | r = t[i], 1178 | o = { 1179 | blockImgs: "blocks", 1180 | prizeImgs: "prizes", 1181 | btnImgs: "buttons" 1182 | }[i]; 1183 | r && r.forEach(function (t, e) { 1184 | t && t.forEach(function (t, r) { 1185 | n.loadAndCacheImg(o, e, i, r, function () { 1186 | n.draw(); 1187 | }); 1188 | }); 1189 | }); 1190 | }), null === (i = o.afterInit) || void 0 === i || i.call(this); 1191 | }, h.prototype.handleClick = function (t) { 1192 | var e = this, 1193 | i = this.ctx; 1194 | o(this.buttons, [this.button]).forEach(function (n) { 1195 | var r; 1196 | 1197 | if (n) { 1198 | var o = e.getGeometricProperty([n.x, n.y, n.col || 1, n.row || 1]), 1199 | s = o[0], 1200 | a = o[1], 1201 | u = o[2], 1202 | h = o[3]; 1203 | i.beginPath(), i.rect(s, a, u, h), i.isPointInPath(t.offsetX, t.offsetY) && (e.startTime || null === (r = e.startCallback) || void 0 === r || r.call(e, t)); 1204 | } 1205 | }); 1206 | }, h.prototype.loadAndCacheImg = function (t, e, i, o, s) { 1207 | return n(this, void 0, void 0, function () { 1208 | var n, 1209 | a, 1210 | u, 1211 | h = this; 1212 | return r(this, function (r) { 1213 | return n = this[t][e], "buttons" === t && !this.buttons.length && this.button && (n = this.button), n && n.imgs && (a = n.imgs[o]) ? (this[i][e] || (this[i][e] = []), u = [this.loadImg(a.src, a), a.activeSrc && this.loadImg(a.activeSrc, a, "$activeResolve")], Promise.all(u).then(function (t) { 1214 | var n = t[0], 1215 | r = t[1]; 1216 | h[i][e][o] = { 1217 | defaultImg: n, 1218 | activeImg: r 1219 | }, s.call(h); 1220 | }).catch(function (i) { 1221 | console.error(t + "[" + e + "].imgs[" + o + "] " + i); 1222 | }), [2]) : [2]; 1223 | }); 1224 | }); 1225 | }, h.prototype.computedWidthAndHeight = function (t, e, i) { 1226 | if (!e.width && !e.height) return [t.width, t.height]; 1227 | 1228 | if (e.width && !e.height) { 1229 | var n = this.getWidth(e.width, i.col); 1230 | return [n, t.height * (n / t.width)]; 1231 | } 1232 | 1233 | if (!e.width && e.height) { 1234 | var r = this.getHeight(e.height, i.row); 1235 | return [t.width * (r / t.height), r]; 1236 | } 1237 | 1238 | return [this.getWidth(e.width, i.col), this.getHeight(e.height, i.row)]; 1239 | }, h.prototype.draw = function () { 1240 | var t, 1241 | e, 1242 | i = this, 1243 | n = this, 1244 | r = n.config, 1245 | h = n.ctx, 1246 | c = n._defaultConfig, 1247 | l = n._defaultStyle, 1248 | f = n._activeStyle; 1249 | null === (t = r.beforeDraw) || void 0 === t || t.call(this, h), h.clearRect(0, 0, r.width, r.height), this.cells = o(this.prizes, this.buttons), this.button && this.cells.push(this.button), this.cells.forEach(function (t) { 1250 | t.col = t.col || 1, t.row = t.row || 1; 1251 | }), this.prizeArea = this.blocks.reduce(function (t, e) { 1252 | var n = t.x, 1253 | r = t.y, 1254 | o = t.w, 1255 | a = t.h, 1256 | c = function (t) { 1257 | var e, 1258 | i = (null === (e = t.padding) || void 0 === e ? void 0 : e.replace(/px/g, "").split(" ").map(function (t) { 1259 | return ~~t; 1260 | })) || [0], 1261 | n = 0, 1262 | r = 0, 1263 | o = 0, 1264 | a = 0; 1265 | 1266 | switch (i.length) { 1267 | case 1: 1268 | n = r = o = a = i[0]; 1269 | break; 1270 | 1271 | case 2: 1272 | n = r = i[0], o = a = i[1]; 1273 | break; 1274 | 1275 | case 3: 1276 | n = i[0], o = a = i[1], r = i[2]; 1277 | break; 1278 | 1279 | default: 1280 | n = i[0], r = i[1], o = i[2], a = i[3]; 1281 | } 1282 | 1283 | var u = { 1284 | paddingTop: n, 1285 | paddingBottom: r, 1286 | paddingLeft: o, 1287 | paddingRight: a 1288 | }; 1289 | 1290 | for (var h in u) u[h] = Object.prototype.hasOwnProperty.call(t, h) && s(t[h], "string", "number") ? ~~String(t[h]).replace(/px/g, "") : u[h]; 1291 | 1292 | return [n, r, o, a]; 1293 | }(e), 1294 | f = c[0], 1295 | d = c[1], 1296 | p = c[2], 1297 | g = c[3], 1298 | m = e.borderRadius ? i.getLength(e.borderRadius) : 0, 1299 | v = e.background || l.background; 1300 | 1301 | return u(v) && k(h, n, r, o, a, m, i.handleBackground(n, r, o, a, v)), { 1302 | x: n + p, 1303 | y: r + f, 1304 | w: o - p - g, 1305 | h: a - f - d 1306 | }; 1307 | }, { 1308 | x: 0, 1309 | y: 0, 1310 | w: r.width, 1311 | h: r.height 1312 | }), this.cellWidth = (this.prizeArea.w - c.gutter * (this.cols - 1)) / this.cols, this.cellHeight = (this.prizeArea.h - c.gutter * (this.rows - 1)) / this.rows, this.cells.forEach(function (t, e) { 1313 | var n = i.getGeometricProperty([t.x, t.y, t.col, t.row]), 1314 | o = n[0], 1315 | s = n[1], 1316 | c = n[2], 1317 | d = n[3], 1318 | p = !1; 1319 | (void 0 === i.prizeFlag || i.prizeFlag > -1) && (p = e === i.currIndex % i.prizes.length >> 0); 1320 | var g = p ? f.background : t.background || l.background; 1321 | 1322 | if (u(g)) { 1323 | var m = (p ? f.shadow : t.shadow || l.shadow).replace(/px/g, "").split(",")[0].split(" ").map(function (t, e) { 1324 | return e < 3 ? Number(t) : t; 1325 | }); 1326 | 4 === m.length && (h.shadowColor = m[3], h.shadowOffsetX = m[0] * r.dpr, h.shadowOffsetY = m[1] * r.dpr, h.shadowBlur = m[2], m[0] > 0 ? c -= m[0] : (c += m[0], o -= m[0]), m[1] > 0 ? d -= m[1] : (d += m[1], s -= m[1])), k(h, o, s, c, d, i.getLength(t.borderRadius ? t.borderRadius : l.borderRadius), i.handleBackground(o, s, c, d, g)), h.shadowColor = "rgba(0, 0, 0, 0)", h.shadowOffsetX = 0, h.shadowOffsetY = 0, h.shadowBlur = 0; 1327 | } 1328 | 1329 | var v = "prizeImgs"; 1330 | e >= i.prizes.length && (v = "btnImgs", e -= i.prizes.length), t.imgs && t.imgs.forEach(function (n, r) { 1331 | if (i[v][e]) { 1332 | var a = i[v][e][r]; 1333 | 1334 | if (a) { 1335 | var u = p && a.activeImg || a.defaultImg; 1336 | 1337 | if (u) { 1338 | var h = i.computedWidthAndHeight(u, n, t), 1339 | c = h[0], 1340 | l = h[1], 1341 | f = [o + i.getOffsetX(c, t.col), s + i.getHeight(n.top, t.row)], 1342 | d = f[0], 1343 | g = f[1]; 1344 | i.drawImage(u, d, g, c, l); 1345 | } 1346 | } 1347 | } 1348 | }), t.fonts && t.fonts.forEach(function (e) { 1349 | var n = p && f.fontStyle ? f.fontStyle : e.fontStyle || l.fontStyle, 1350 | r = p && f.fontWeight ? f.fontWeight : e.fontWeight || l.fontWeight, 1351 | u = p && f.fontSize ? i.getLength(f.fontSize) : i.getLength(e.fontSize || l.fontSize), 1352 | c = p && f.lineHeight ? f.lineHeight : e.lineHeight || l.lineHeight || e.fontSize || l.fontSize; 1353 | h.font = r + " " + (u >> 0) + "px " + n, h.fillStyle = p && f.fontColor ? f.fontColor : e.fontColor || l.fontColor; 1354 | var d = [], 1355 | g = String(e.text); 1356 | 1357 | if (Object.prototype.hasOwnProperty.call(e, "wordWrap") ? e.wordWrap : l.wordWrap) { 1358 | g = a(g); 1359 | 1360 | for (var m = "", v = 0; v < g.length; v++) { 1361 | m += g[v], h.measureText(m).width > i.getWidth(e.lengthLimit || l.lengthLimit, t.col) && (d.push(m.slice(0, -1)), m = g[v]); 1362 | } 1363 | 1364 | m && d.push(m), d.length || d.push(g); 1365 | } else d = g.split("\n"); 1366 | 1367 | d.forEach(function (n, r) { 1368 | h.fillText(n, o + i.getOffsetX(h.measureText(n).width, t.col), s + i.getHeight(e.top, t.row) + (r + 1) * i.getLength(c)); 1369 | }); 1370 | }); 1371 | }), null === (e = r.afterDraw) || void 0 === e || e.call(this, h); 1372 | }, h.prototype.handleBackground = function (t, e, i, n, r) { 1373 | var o = this.ctx; 1374 | return r.includes("linear-gradient") && (r = function (t, e, i, n, r, o) { 1375 | var s = /linear-gradient\((.+)\)/.exec(o)[1].split(",").map(function (t) { 1376 | return t.trim(); 1377 | }), 1378 | a = s.shift(), 1379 | u = [0, 0, 0, 0]; 1380 | 1381 | if (a.includes("deg")) { 1382 | var h = function (t) { 1383 | return Math.tan(t / 180 * Math.PI); 1384 | }; 1385 | 1386 | (a = a.slice(0, -3) % 360) >= 0 && a < 45 ? u = [e, i + r, e + n, i + r - n * h(a - 0)] : a >= 45 && a < 90 ? u = [e, i + r, e + n - r * h(a - 45), i] : a >= 90 && a < 135 ? u = [e + n, i + r, e + n - r * h(a - 90), i] : a >= 135 && a < 180 ? u = [e + n, i + r, e, i + n * h(a - 135)] : a >= 180 && a < 225 ? u = [e + n, i, e, i + n * h(a - 180)] : a >= 225 && a < 270 ? u = [e + n, i, e + r * h(a - 225), i + r] : a >= 270 && a < 315 ? u = [e, i, e + r * h(a - 270), i + r] : a >= 315 && a < 360 && (u = [e, i, e + n, i + r - n * h(a - 315)]); 1387 | } else a.includes("top") ? u = [e, i + r, e, i] : a.includes("bottom") ? u = [e, i, e, i + r] : a.includes("left") ? u = [e + n, i, e, i] : a.includes("right") && (u = [e, i, e + n, i]); 1388 | 1389 | var c = t.createLinearGradient.apply(t, u.map(function (t) { 1390 | return t >> 0; 1391 | })); 1392 | return s.reduce(function (t, e, i) { 1393 | var n = e.split(" "); 1394 | return 1 === n.length ? t.addColorStop(i, n[0]) : 2 === n.length && t.addColorStop.apply(t, n), t; 1395 | }, c); 1396 | }(o, t, e, i, n, r)), r; 1397 | }, h.prototype.play = function () { 1398 | var t = this.config.clearInterval; 1399 | this.startTime || (t(this.timer), this.startTime = Date.now(), this.prizeFlag = void 0, this.run()); 1400 | }, h.prototype.stop = function (t) { 1401 | this.prizeFlag = t < 0 ? -1 : t % this.prizes.length, -1 === this.prizeFlag && (this.currIndex = 0, this.draw()); 1402 | }, h.prototype.run = function (t) { 1403 | void 0 === t && (t = 0); 1404 | var e = this, 1405 | i = e.rAF, 1406 | n = e.currIndex, 1407 | r = e.prizes, 1408 | o = e.prizeFlag, 1409 | s = e.startTime, 1410 | a = e._defaultConfig, 1411 | u = Date.now() - s; 1412 | 1413 | if (u >= a.accelerationTime && void 0 !== o) { 1414 | this.FPS = u / t, this.endTime = Date.now(), this.stopIndex = n; 1415 | 1416 | for (var h = 0; ++h;) { 1417 | var c = r.length * h + o - (n >> 0); 1418 | 1419 | if (T.easeOut(this.FPS, this.stopIndex, c, a.decelerationTime) - this.stopIndex > a.speed) { 1420 | this.endIndex = c; 1421 | break; 1422 | } 1423 | } 1424 | 1425 | return this.slowDown(); 1426 | } 1427 | 1428 | this.currIndex = (n + T.easeIn(u, .1, a.speed, a.accelerationTime)) % r.length, this.draw(), i(this.run.bind(this, t + 1)); 1429 | }, h.prototype.slowDown = function () { 1430 | var t, 1431 | e = this, 1432 | n = e.rAF, 1433 | r = e.prizes, 1434 | o = e.prizeFlag, 1435 | s = e.stopIndex, 1436 | a = e.endIndex, 1437 | u = e._defaultConfig, 1438 | h = Date.now() - this.endTime; 1439 | 1440 | if (-1 !== o) { 1441 | if (h > u.decelerationTime) return this.startTime = 0, void (null === (t = this.endCallback) || void 0 === t || t.call(this, i({}, r.find(function (t, e) { 1442 | return e === o; 1443 | })))); 1444 | this.currIndex = T.easeOut(h, s, a, u.decelerationTime) % r.length, this.draw(), n(this.slowDown.bind(this)); 1445 | } else this.startTime = 0; 1446 | }, h.prototype.walk = function () { 1447 | var t = this, 1448 | e = this.config, 1449 | i = e.setInterval; 1450 | (0, e.clearInterval)(this.timer), this.timer = i(function () { 1451 | t.currIndex += 1, t.draw(); 1452 | }, 1300); 1453 | }, h.prototype.getGeometricProperty = function (t) { 1454 | var e = t[0], 1455 | i = t[1], 1456 | n = t[2], 1457 | r = t[3], 1458 | o = this.cellWidth, 1459 | s = this.cellHeight, 1460 | a = this._defaultConfig.gutter, 1461 | u = [this.prizeArea.x + (o + a) * e, this.prizeArea.y + (s + a) * i]; 1462 | return n && r && u.push(o * n + a * (n - 1), s * r + a * (r - 1)), u; 1463 | }, h.prototype.getWidth = function (t, e) { 1464 | return void 0 === e && (e = 1), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, this.cellWidth * e + this._defaultConfig.gutter * (e - 1)) : 0; 1465 | }, h.prototype.getHeight = function (t, e) { 1466 | return void 0 === e && (e = 1), s(t, "number") ? t : s(t, "string") ? this.changeUnits(t, this.cellHeight * e + this._defaultConfig.gutter * (e - 1)) : 0; 1467 | }, h.prototype.getOffsetX = function (t, e) { 1468 | return void 0 === e && (e = 1), (this.cellWidth * e + this._defaultConfig.gutter * (e - 1) - t) / 2; 1469 | }, h.prototype.conversionAxis = function (t, e) { 1470 | var i = this.config; 1471 | return [t / i.dpr, e / i.dpr]; 1472 | }, h; 1473 | }(w); 1474 | 1475 | exports.LuckyGrid = D, exports.LuckyWheel = P; 1476 | }); 1477 | 1478 | var luckyCanvas = luckyCanvas_cjs_min; 1479 | 1480 | var name = "react-luck-draw"; 1481 | var version = "1.0.1"; 1482 | 1483 | var LuckyWheel = /*#__PURE__*/function (_React$Component) { 1484 | _inherits(LuckyWheel, _React$Component); 1485 | 1486 | var _super = _createSuper(LuckyWheel); 1487 | 1488 | function LuckyWheel(props) { 1489 | var _this; 1490 | 1491 | _classCallCheck(this, LuckyWheel); 1492 | 1493 | _this = _super.call(this, props); 1494 | _this.myLucky = /*#__PURE__*/React__default['default'].createRef(); 1495 | return _this; 1496 | } 1497 | 1498 | _createClass(LuckyWheel, [{ 1499 | key: "componentDidMount", 1500 | value: function componentDidMount() { 1501 | var props = this.props; 1502 | this.myLucky.current.setAttribute('package', "".concat(name, "@").concat(version)); 1503 | 1504 | try { 1505 | this.init(); 1506 | props.onSuccess && props.onSuccess(); 1507 | } catch (err) { 1508 | props.onError && props.onError(err); 1509 | } finally { 1510 | props.onFinally && props.onFinally(err); 1511 | } 1512 | } 1513 | }, { 1514 | key: "componentDidUpdate", 1515 | value: function componentDidUpdate(prevProps) { 1516 | if (this.props.blocks !== prevProps.blocks) { 1517 | this.$lucky.blocks = this.props.blocks; 1518 | } 1519 | 1520 | if (this.props.prizes !== prevProps.prizes) { 1521 | this.$lucky.prizes = this.props.prizes; 1522 | } 1523 | 1524 | if (this.props.buttons !== prevProps.buttons) { 1525 | this.$lucky.buttons = this.props.buttons; 1526 | } 1527 | } 1528 | }, { 1529 | key: "init", 1530 | value: function init() { 1531 | var props = this.props; 1532 | console.log(props); 1533 | this.$lucky = new luckyCanvas.LuckyWheel({ 1534 | flag: 'WEB', 1535 | width: props.width, 1536 | height: props.height, 1537 | divElement: this.myLucky.current 1538 | }, _objectSpread2(_objectSpread2({}, props), {}, { 1539 | start: function start() { 1540 | props.onStart && props.onStart.apply(props, arguments); 1541 | }, 1542 | end: function end() { 1543 | props.onEnd && props.onEnd.apply(props, arguments); 1544 | } 1545 | })); 1546 | } 1547 | }, { 1548 | key: "play", 1549 | value: function play() { 1550 | var _this$$lucky; 1551 | 1552 | (_this$$lucky = this.$lucky).play.apply(_this$$lucky, arguments); 1553 | } 1554 | }, { 1555 | key: "stop", 1556 | value: function stop() { 1557 | var _this$$lucky2; 1558 | 1559 | (_this$$lucky2 = this.$lucky).stop.apply(_this$$lucky2, arguments); 1560 | } 1561 | }, { 1562 | key: "render", 1563 | value: function render() { 1564 | return /*#__PURE__*/React__default['default'].createElement("div", { 1565 | ref: this.myLucky 1566 | }); 1567 | } 1568 | }]); 1569 | 1570 | return LuckyWheel; 1571 | }(React__default['default'].Component); 1572 | LuckyWheel.defaultProps = { 1573 | width: '', 1574 | height: '', 1575 | prizes: [], 1576 | blocks: [], 1577 | buttons: [], 1578 | defaultStyle: {}, 1579 | defaultConfig: {} 1580 | }; 1581 | 1582 | var LuckyGrid = /*#__PURE__*/function (_React$Component) { 1583 | _inherits(LuckyGrid, _React$Component); 1584 | 1585 | var _super = _createSuper(LuckyGrid); 1586 | 1587 | function LuckyGrid(props) { 1588 | var _this; 1589 | 1590 | _classCallCheck(this, LuckyGrid); 1591 | 1592 | _this = _super.call(this, props); 1593 | _this.myLucky = /*#__PURE__*/React__default['default'].createRef(); 1594 | return _this; 1595 | } 1596 | 1597 | _createClass(LuckyGrid, [{ 1598 | key: "componentDidMount", 1599 | value: function componentDidMount() { 1600 | var props = this.props; 1601 | this.myLucky.current.setAttribute('package', "".concat(name, "@").concat(version)); 1602 | 1603 | try { 1604 | this.init(); 1605 | props.onSuccess && props.onSuccess(); 1606 | } catch (err) { 1607 | props.onError && props.onError(err); 1608 | } finally { 1609 | props.onFinally && props.onFinally(err); 1610 | } 1611 | } 1612 | }, { 1613 | key: "componentDidUpdate", 1614 | value: function componentDidUpdate(prevProps) { 1615 | if (this.props.cols !== prevProps.cols) { 1616 | this.$lucky.cols = this.props.cols; 1617 | } 1618 | 1619 | if (this.props.rows !== prevProps.rows) { 1620 | this.$lucky.rows = this.props.rows; 1621 | } 1622 | 1623 | if (this.props.blocks !== prevProps.blocks) { 1624 | this.$lucky.blocks = this.props.blocks; 1625 | } 1626 | 1627 | if (this.props.prizes !== prevProps.prizes) { 1628 | this.$lucky.prizes = this.props.prizes; 1629 | } 1630 | 1631 | if (this.props.buttons !== prevProps.buttons) { 1632 | this.$lucky.buttons = this.props.buttons; 1633 | } 1634 | } 1635 | }, { 1636 | key: "init", 1637 | value: function init() { 1638 | var props = this.props; 1639 | this.$lucky = new luckyCanvas.LuckyGrid({ 1640 | flag: 'WEB', 1641 | width: props.width, 1642 | height: props.height, 1643 | divElement: this.myLucky.current 1644 | }, _objectSpread2(_objectSpread2({}, props), {}, { 1645 | start: function start() { 1646 | props.onStart && props.onStart.apply(props, arguments); 1647 | }, 1648 | end: function end() { 1649 | props.onEnd && props.onEnd.apply(props, arguments); 1650 | } 1651 | })); 1652 | } 1653 | }, { 1654 | key: "play", 1655 | value: function play() { 1656 | var _this$$lucky; 1657 | 1658 | (_this$$lucky = this.$lucky).play.apply(_this$$lucky, arguments); 1659 | } 1660 | }, { 1661 | key: "stop", 1662 | value: function stop() { 1663 | var _this$$lucky2; 1664 | 1665 | (_this$$lucky2 = this.$lucky).stop.apply(_this$$lucky2, arguments); 1666 | } 1667 | }, { 1668 | key: "render", 1669 | value: function render() { 1670 | return /*#__PURE__*/React__default['default'].createElement("div", { 1671 | ref: this.myLucky 1672 | }); 1673 | } 1674 | }]); 1675 | 1676 | return LuckyGrid; 1677 | }(React__default['default'].Component); 1678 | LuckyGrid.defaultProps = { 1679 | width: '', 1680 | height: '', 1681 | cols: 3, 1682 | rows: 3, 1683 | blocks: [], 1684 | prizes: [], 1685 | buttons: [], 1686 | defaultStyle: {}, 1687 | activeStyle: {}, 1688 | defaultConfig: {} 1689 | }; 1690 | 1691 | exports.LuckyGrid = LuckyGrid; 1692 | exports.LuckyWheel = LuckyWheel; 1693 | 1694 | Object.defineProperty(exports, '__esModule', { value: true }); 1695 | 1696 | }))); 1697 | -------------------------------------------------------------------------------- /dist/react-luck-draw.umd.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ReactLuckDraw={},t.React)}(this,(function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=n(e);function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n0&&r[r.length-1])||6!==o[0]&&2!==o[0])){s=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]this.length)&&-1!==this.indexOf(t,e)}),Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(t){if(null==this)throw new TypeError('"this" is null or not defined');var e=Object(this),n=e.length>>>0;if("function"!=typeof t)throw new TypeError("predicate must be a function");for(var i=arguments[1],r=0;r '"+e.src+"' 不能为空或不合法"),"WEB"===i.config.flag){var s=new Image;s.src=t,s.onload=function(){return r(s)},s.onerror=function(){return o("=> '"+e.src+"' 图片加载失败")}}else e[n]=r}))},t.prototype.drawImage=function(t,e,n,i,r){var o,s=this.config,a=this.ctx;return["WEB","MP-WX"].includes(s.flag)?o=t:["UNI-H5","UNI-MP","TARO-H5","TARO-MP"].includes(s.flag)&&(o=t.path),a.drawImage(o,e,n,i,r)},t.prototype.getLength=function(t){return u(t,"number")?t:u(t,"string")?this.changeUnits(t):0},t.prototype.changeUnits=function(t,e){var n=this;return void 0===e&&(e=1),Number(t.replace(/^([-]*[0-9.]*)([a-z%]*)$/,(function(t,i,r){var o={"%":function(t){return t*(e/100)},px:function(t){return 1*t},rem:function(t){return t*n.htmlFontSize}}[r];if(o)return o(i);var s=n.config.unitFunc;return s?s(i,r):i})))},t.prototype.$set=function(t,e,n){t&&"object"==typeof t&&m(t,e,n)},t.prototype.$computed=function(t,e,n){var i=this;Object.defineProperty(t,e,{get:function(){return n.call(i)}})},t.prototype.$watch=function(t,e,n){void 0===n&&(n={}),"object"==typeof e&&(e=(n=e).handler);var i=new w(this,t,e,n);return n.immediate&&e.call(this,i.value),function(){}},t}(),z=function(t){return Math.PI/180*t},S=function(t,e){return[+(Math.cos(t)*e).toFixed(8),+(Math.sin(t)*e).toFixed(8)]},I=function(t,e){var n=-t/e;return[n,-n*t+e]},x=function(t,e,n,i,r,o){var s;if(void 0===o&&(o=!0),Math.abs(r-i).toFixed(8)>=z(180).toFixed(8)){var a=(r+i)/2;return o?(x(t,e,n,i,a,o),x(t,e,n,a,r,o)):(x(t,e,n,a,r,o),x(t,e,n,i,a,o)),!1}o||(i=(s=[r,i])[0],r=s[1]);var u=S(i,n),c=u[0],h=u[1],l=S(r,n),f=l[0],p=l[1],d=I(c,h),g=d[0],y=d[1],v=I(f,p),m=v[0],b=v[1],w=(b-y)/(g-m),k=(m*y-g*b)/(m-g);isNaN(w)&&(Math.abs(c)===+n.toFixed(8)&&(w=c),Math.abs(f)===+n.toFixed(8)&&(w=f)),g===1/0||g===-1/0?k=m*w+b:m!==1/0&&m!==-1/0||(k=g*w+y),e.lineTo(c,h),t.indexOf("MP")>0?e.quadraticCurveTo(w,k,f,p):e.arcTo(w,k,f,p,n)},O=function(t,e,n,i,r,o,s){var a=Math.min(i,r);o>a/2&&(o=a/2),t.beginPath(),t.fillStyle=s,t.moveTo(e+o,n),t.lineTo(e+o,n),t.lineTo(e+i-o,n),t.quadraticCurveTo(e+i,n,e+i,n+o),t.lineTo(e+i,n+r-o),t.quadraticCurveTo(e+i,n+r,e+i-o,n+r),t.lineTo(e+o,n+r),t.quadraticCurveTo(e,n+r,e,n+r-o),t.lineTo(e,n+o),t.quadraticCurveTo(e,n,e+o,n),t.closePath(),t.fill()},C={easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),-n*(t/=i)*(t-2)+e}},T={easeIn:function(t,e,n,i){return t>=i&&(t=i),-n*Math.cos(t/i*(Math.PI/2))+n+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*Math.sin(t/i*(Math.PI/2))+e}},E={easeIn:function(t,e,n,i){return t>=i&&(t=i),0==t?e:n*Math.pow(2,10*(t/i-1))+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),t==i?e+n:n*(1-Math.pow(2,-10*t/i))+e}},P={easeIn:function(t,e,n,i){return t>=i&&(t=i),-n*(Math.sqrt(1-(t/=i)*t)-1)+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*Math.sqrt(1-(t=t/i-1)*t)+e}},_=Object.freeze({__proto__:null,quad:C,cubic:{easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*((t=t/i-1)*t*t+1)+e}},quart:{easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t*t*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),-n*((t=t/i-1)*t*t*t-1)+e}},quint:{easeIn:function(t,e,n,i){return t>=i&&(t=i),n*(t/=i)*t*t*t*t+e},easeOut:function(t,e,n,i){return t>=i&&(t=i),n*((t=t/i-1)*t*t*t*t+1)+e}},sine:T,expo:E,circ:P}),D=function(t){function e(e,n){void 0===n&&(n={});var i=t.call(this,e)||this;return i.blocks=[],i.prizes=[],i.buttons=[],i.defaultConfig={},i._defaultConfig={gutter:"0px",offsetDegree:0,speed:20,speedFunction:"quad",accelerationTime:2500,decelerationTime:2500,stopRange:.8},i.defaultStyle={},i._defaultStyle={fontSize:"18px",fontColor:"#000",fontStyle:"sans-serif",fontWeight:"400",lineHeight:"",background:"transparent",wordWrap:!0,lengthLimit:"90%"},i.Radius=0,i.prizeRadius=0,i.prizeDeg=0,i.prizeRadian=0,i.rotateDeg=0,i.maxBtnRadius=0,i.startTime=0,i.endTime=0,i.stopDeg=0,i.endDeg=0,i.FPS=16.6,i.blockImgs=[[]],i.prizeImgs=[[]],i.btnImgs=[[]],e.ob&&(i.initData(n),i.initWatch()),i.initComputed(),i.init({blockImgs:i.blocks.map((function(t){return t.imgs})),prizeImgs:i.prizes.map((function(t){return t.imgs})),btnImgs:i.buttons.map((function(t){return t.imgs}))}),i}return i(e,t),e.prototype.initData=function(t){this.$set(this,"blocks",t.blocks||[]),this.$set(this,"prizes",t.prizes||[]),this.$set(this,"buttons",t.buttons||[]),this.$set(this,"defaultConfig",t.defaultConfig||{}),this.$set(this,"defaultStyle",t.defaultStyle||{}),this.$set(this,"startCallback",t.start),this.$set(this,"endCallback",t.end)},e.prototype.initComputed=function(){var t=this;this.$computed(this,"_defaultConfig",(function(){return r({gutter:"0px",offsetDegree:0,speed:20,speedFunction:"quad",accelerationTime:2500,decelerationTime:2500,stopRange:.8},t.defaultConfig)})),this.$computed(this,"_defaultStyle",(function(){return r({fontSize:"18px",fontColor:"#000",fontStyle:"sans-serif",fontWeight:"400",background:"transparent",wordWrap:!0,lengthLimit:"90%"},t.defaultStyle)}))},e.prototype.initWatch=function(){var t=this;this.$watch("blocks",(function(e){return t.init({blockImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("prizes",(function(e){return t.init({prizeImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("buttons",(function(e){return t.init({btnImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("defaultConfig",(function(){return t.draw()}),{deep:!0}),this.$watch("defaultStyle",(function(){return t.draw()}),{deep:!0}),this.$watch("startCallback",(function(){return t.init({})})),this.$watch("endCallback",(function(){return t.init({})}))},e.prototype.init=function(t){var e,n,i=this,r=this.config,o=this.ctx;this.setDpr(),this.setHTMLFontSize(),this.zoomCanvas(),this.Radius=Math.min(r.width,r.height)/2,null===(e=r.beforeInit)||void 0===e||e.call(this),o.translate(this.Radius,this.Radius),this.draw(),Object.keys(t).forEach((function(e){var n=e,r={blockImgs:"blocks",prizeImgs:"prizes",btnImgs:"buttons"}[n],o=t[n];o&&o.forEach((function(t,e){t&&t.forEach((function(t,o){i.loadAndCacheImg(r,e,n,o,(function(){i.draw()}))}))}))})),null===(n=r.afterInit)||void 0===n||n.call(this)},e.prototype.handleClick=function(t){var e,n=this.ctx;n.beginPath(),n.arc(0,0,this.maxBtnRadius,0,2*Math.PI,!1),n.isPointInPath(t.offsetX,t.offsetY)&&(this.startTime||null===(e=this.startCallback)||void 0===e||e.call(this,t))},e.prototype.loadAndCacheImg=function(t,e,n,i,r){return o(this,void 0,void 0,(function(){var o,a,u=this;return s(this,(function(s){return(o=this[t][e])&&o.imgs&&(a=o.imgs[i])?(this[n][e]||(this[n][e]=[]),this.loadImg(a.src,a).then((function(t){u[n][e][i]=t,r.call(u)})).catch((function(n){console.error(t+"["+e+"].imgs["+i+"] "+n)})),[2]):[2]}))}))},e.prototype.computedWidthAndHeight=function(t,e,n,i){if(!e.width&&!e.height)return[t.width,t.height];if(e.width&&!e.height){var r=this.getWidth(e.width,n);return[r,t.height*(r/t.width)]}if(!e.width&&e.height){var o=this.getHeight(e.height,i);return[t.width*(o/t.height),o]}return[this.getWidth(e.width,n),this.getHeight(e.height,i)]},e.prototype.draw=function(){var t,e,n=this,i=this,r=i.config,o=i.ctx,s=i._defaultConfig,a=i._defaultStyle;null===(t=r.beforeDraw)||void 0===t||t.call(this,o),o.clearRect(-this.Radius,-this.Radius,2*this.Radius,2*this.Radius),this.prizeRadius=this.blocks.reduce((function(t,e,i){return h(e.background)&&(o.beginPath(),o.fillStyle=e.background,o.arc(0,0,t,0,2*Math.PI,!1),o.fill()),e.imgs&&e.imgs.forEach((function(e,r){if(n.blockImgs[i]){var s=n.blockImgs[i][r];if(s){var a=n.computedWidthAndHeight(s,e,2*t,2*t),u=a[0],c=a[1],h=[n.getOffsetX(u),n.getHeight(e.top,2*t)-t],l=h[0],f=h[1];o.save(),e.rotate&&o.rotate(z(n.rotateDeg)),n.drawImage(s,l,f,u,c),o.restore()}}})),t-n.getLength(e.padding&&e.padding.split(" ")[0])}),this.Radius),this.prizeDeg=360/this.prizes.length,this.prizeRadian=z(this.prizeDeg);var u=z(-90+this.rotateDeg+s.offsetDegree),l=function(t){return n.getOffsetX(o.measureText(t).width)},f=function(t,e,i){var r=t.lineHeight||a.lineHeight||t.fontSize||a.fontSize;return n.getHeight(t.top,e)+(i+1)*n.getLength(r)};o.save(),this.prizes.forEach((function(t,e){var i=u+e*n.prizeRadian,p=n.prizeRadius-n.maxBtnRadius,d=t.background||a.background;h(d)&&function(t,e,n,i,r,o,s,a){s?function(t,e,n,i,r,o,s,a){n||(n=s);var u=z(90/Math.PI/i*s),c=z(90/Math.PI/n*s),h=r+u,l=o-u,f=r+c,p=o-c;e.beginPath(),e.fillStyle=a,e.moveTo.apply(e,S(h,i)),x(t,e,i,h,l,!0),p>f?x(t,e,n,f,p,!1):e.lineTo.apply(e,S((r+o)/2,s/2/Math.abs(Math.sin((r-o)/2)))),e.closePath(),e.fill()}(t,e,n,i,r,o,s,a):(e.beginPath(),e.fillStyle=a,e.moveTo(0,0),e.arc(0,0,i,r,o,!1),e.closePath(),e.fill())}(r.flag,o,n.maxBtnRadius,n.prizeRadius,i-n.prizeRadian/2,i+n.prizeRadian/2,n.getLength(s.gutter),d);var g=Math.cos(i)*n.prizeRadius,y=Math.sin(i)*n.prizeRadius;o.translate(g,y),o.rotate(i+z(90)),t.imgs&&t.imgs.forEach((function(t,i){if(n.prizeImgs[e]){var r=n.prizeImgs[e][i];if(r){var o=n.computedWidthAndHeight(r,t,n.prizeRadian*n.prizeRadius,p),s=o[0],a=o[1],u=[n.getOffsetX(s),n.getHeight(t.top,p)],c=u[0],h=u[1];n.drawImage(r,c,h,s,a)}}})),t.fonts&&t.fonts.forEach((function(t){var e=t.fontColor||a.fontColor,i=t.fontWeight||a.fontWeight,r=n.getLength(t.fontSize||a.fontSize),u=t.fontStyle||a.fontStyle;o.fillStyle=e,o.font=i+" "+(r>>0)+"px "+u;var h=[],d=String(t.text);if(Object.prototype.hasOwnProperty.call(t,"wordWrap")?t.wordWrap:a.wordWrap){d=c(d);for(var g="",y=0;yn.getWidth(t.lengthLimit||a.lengthLimit,m)&&(h.push(g.slice(0,-1)),g=d[y])}g&&h.push(g),h.length||h.push(d)}else h=d.split("\n");h.filter((function(t){return!!t})).forEach((function(e,n){o.fillText(e,l(e),f(t,p,n))}))})),o.rotate(z(360)-i-z(90)),o.translate(-g,-y)})),o.restore(),this.buttons.forEach((function(t,e){var i=n.getHeight(t.radius);n.maxBtnRadius=Math.max(n.maxBtnRadius,i),h(t.background)&&(o.beginPath(),o.fillStyle=t.background,o.arc(0,0,i,0,2*Math.PI,!1),o.fill()),t.pointer&&h(t.background)&&(o.beginPath(),o.fillStyle=t.background,o.moveTo(-i,0),o.lineTo(i,0),o.lineTo(0,2*-i),o.closePath(),o.fill()),t.imgs&&t.imgs.forEach((function(t,r){if(n.btnImgs[e]){var o=n.btnImgs[e][r];if(o){var s=n.computedWidthAndHeight(o,t,2*i,2*i),a=s[0],u=s[1],c=[n.getOffsetX(a),n.getHeight(t.top,i)],h=c[0],l=c[1];n.drawImage(o,h,l,a,u)}}})),t.fonts&&t.fonts.forEach((function(t){var e=t.fontColor||a.fontColor,r=t.fontWeight||a.fontWeight,s=n.getLength(t.fontSize||a.fontSize),u=t.fontStyle||a.fontStyle;o.fillStyle=e,o.font=r+" "+(s>>0)+"px "+u,String(t.text).split("\n").forEach((function(e,n){o.fillText(e,l(e),f(t,i,n))}))}))})),null===(e=r.afterDraw)||void 0===e||e.call(this,o)},e.prototype.play=function(){this.startTime||(this.startTime=Date.now(),this.prizeFlag=void 0,this.run())},e.prototype.stop=function(t){this.prizeFlag=t<0?-1:t%this.prizes.length,-1===this.prizeFlag&&(this.rotateDeg=this.prizeDeg/2-this._defaultConfig.offsetDegree,this.draw())},e.prototype.run=function(t){void 0===t&&(t=0);var e=this,n=e.rAF,i=e.prizeFlag,r=e.prizeDeg,o=e.rotateDeg,s=e._defaultConfig,a=Date.now()-this.startTime;if(a>=s.accelerationTime&&void 0!==i){this.FPS=a/t,this.endTime=Date.now(),this.stopDeg=o;for(var u=(Math.random()*r-r/2)*this.getLength(s.stopRange),c=0;++c;){var h=360*c-i*r-o-s.offsetDegree+u;if(_[s.speedFunction].easeOut(this.FPS,this.stopDeg,h,s.decelerationTime)-this.stopDeg>s.speed){this.endDeg=h;break}}return this.slowDown()}this.rotateDeg=(o+_[s.speedFunction].easeIn(a,0,s.speed,s.accelerationTime))%360,this.draw(),n(this.run.bind(this,t+1))},e.prototype.slowDown=function(){var t,e=this,n=e.rAF,i=e.prizes,o=e.prizeFlag,s=e.stopDeg,a=e.endDeg,u=e._defaultConfig,c=Date.now()-this.endTime;if(-1!==o){if(c>=u.decelerationTime)return this.startTime=0,void(null===(t=this.endCallback)||void 0===t||t.call(this,r({},i.find((function(t,e){return e===o})))));this.rotateDeg=_[u.speedFunction].easeOut(c,s,a,u.decelerationTime)%360,this.draw(),n(this.slowDown.bind(this))}else this.startTime=0},e.prototype.getWidth=function(t,e){return void 0===e&&(e=this.prizeRadian*this.prizeRadius),u(t,"number")?t:u(t,"string")?this.changeUnits(t,e):0},e.prototype.getHeight=function(t,e){return void 0===e&&(e=this.prizeRadius),u(t,"number")?t:u(t,"string")?this.changeUnits(t,e):0},e.prototype.getOffsetX=function(t){return-t/2},e.prototype.conversionAxis=function(t,e){var n=this.config;return[t/n.dpr-this.Radius,e/n.dpr-this.Radius]},e}(k),$=function(t){function e(e,n){void 0===n&&(n={});var i=t.call(this,e)||this;i.rows=3,i.cols=3,i.blocks=[],i.prizes=[],i.buttons=[],i.defaultConfig={},i._defaultConfig={gutter:5,speed:20,accelerationTime:2500,decelerationTime:2500},i.defaultStyle={},i._defaultStyle={borderRadius:20,fontColor:"#000",fontSize:"18px",fontStyle:"sans-serif",fontWeight:"400",lineHeight:"",background:"transparent",shadow:"",wordWrap:!0,lengthLimit:"90%"},i.activeStyle={},i._activeStyle={background:"#ffce98",shadow:"",fontStyle:"",fontWeight:"",fontSize:"",lineHeight:"",fontColor:""},i.cellWidth=0,i.cellHeight=0,i.startTime=0,i.endTime=0,i.currIndex=0,i.stopIndex=0,i.endIndex=0,i.demo=!1,i.timer=0,i.FPS=16.6,i.prizeFlag=-1,i.cells=[],i.blockImgs=[[]],i.btnImgs=[[]],i.prizeImgs=[],e.ob&&(i.initData(n),i.initWatch()),i.initComputed();var r=i.buttons.map((function(t){return t.imgs}));return i.button&&r.push(i.button.imgs),i.init({blockImgs:i.blocks.map((function(t){return t.imgs})),prizeImgs:i.prizes.map((function(t){return t.imgs})),btnImgs:r}),i}return i(e,t),e.prototype.initData=function(t){this.$set(this,"rows",Number(t.rows)||3),this.$set(this,"cols",Number(t.cols)||3),this.$set(this,"blocks",t.blocks||[]),this.$set(this,"prizes",t.prizes||[]),this.$set(this,"buttons",t.buttons||[]),this.$set(this,"button",t.button),this.$set(this,"defaultConfig",t.defaultConfig||{}),this.$set(this,"defaultStyle",t.defaultStyle||{}),this.$set(this,"activeStyle",t.activeStyle||{}),this.$set(this,"startCallback",t.start),this.$set(this,"endCallback",t.end)},e.prototype.initComputed=function(){var t=this;this.$computed(this,"_defaultConfig",(function(){var e=r({gutter:5,speed:20,accelerationTime:2500,decelerationTime:2500},t.defaultConfig);return e.gutter=t.getLength(e.gutter),e.speed=e.speed/40,e})),this.$computed(this,"_defaultStyle",(function(){return r({borderRadius:20,fontColor:"#000",fontSize:"18px",fontStyle:"sans-serif",fontWeight:"400",background:"transparent",shadow:"",wordWrap:!0,lengthLimit:"90%"},t.defaultStyle)})),this.$computed(this,"_activeStyle",(function(){return r({background:"#ffce98",shadow:""},t.activeStyle)}))},e.prototype.initWatch=function(){var t=this;this.$watch("blocks",(function(e){return t.init({blockImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("prizes",(function(e){return t.init({prizeImgs:e.map((function(t){return t.imgs}))})}),{deep:!0}),this.$watch("buttons",(function(e){var n=e.map((function(t){return t.imgs}));return t.button&&n.push(t.button.imgs),t.init({btnImgs:n})}),{deep:!0}),this.$watch("button",(function(){var e=t.buttons.map((function(t){return t.imgs}));return t.button&&e.push(t.button.imgs),t.init({btnImgs:e})}),{deep:!0}),this.$watch("rows",(function(){return t.init({})})),this.$watch("cols",(function(){return t.init({})})),this.$watch("defaultConfig",(function(){return t.draw()}),{deep:!0}),this.$watch("defaultStyle",(function(){return t.draw()}),{deep:!0}),this.$watch("activeStyle",(function(){return t.draw()}),{deep:!0}),this.$watch("startCallback",(function(){return t.init({})})),this.$watch("endCallback",(function(){return t.init({})}))},e.prototype.init=function(t){var e,n,i=this,r=this,o=r.config;r.ctx,r.button,this.setHTMLFontSize(),this.setDpr(),this.zoomCanvas(),null===(e=o.beforeInit)||void 0===e||e.call(this),this.draw(),Object.keys(t).forEach((function(e){var n=e,r=t[n],o={blockImgs:"blocks",prizeImgs:"prizes",btnImgs:"buttons"}[n];r&&r.forEach((function(t,e){t&&t.forEach((function(t,r){i.loadAndCacheImg(o,e,n,r,(function(){i.draw()}))}))}))})),null===(n=o.afterInit)||void 0===n||n.call(this)},e.prototype.handleClick=function(t){var e=this,n=this.ctx;a(this.buttons,[this.button]).forEach((function(i){var r;if(i){var o=e.getGeometricProperty([i.x,i.y,i.col||1,i.row||1]),s=o[0],a=o[1],u=o[2],c=o[3];n.beginPath(),n.rect(s,a,u,c),n.isPointInPath(t.offsetX,t.offsetY)&&(e.startTime||null===(r=e.startCallback)||void 0===r||r.call(e,t))}}))},e.prototype.loadAndCacheImg=function(t,e,n,i,r){return o(this,void 0,void 0,(function(){var o,a,u,c=this;return s(this,(function(s){return o=this[t][e],"buttons"===t&&!this.buttons.length&&this.button&&(o=this.button),o&&o.imgs&&(a=o.imgs[i])?(this[n][e]||(this[n][e]=[]),u=[this.loadImg(a.src,a),a.activeSrc&&this.loadImg(a.activeSrc,a,"$activeResolve")],Promise.all(u).then((function(t){var o=t[0],s=t[1];c[n][e][i]={defaultImg:o,activeImg:s},r.call(c)})).catch((function(n){console.error(t+"["+e+"].imgs["+i+"] "+n)})),[2]):[2]}))}))},e.prototype.computedWidthAndHeight=function(t,e,n){if(!e.width&&!e.height)return[t.width,t.height];if(e.width&&!e.height){var i=this.getWidth(e.width,n.col);return[i,t.height*(i/t.width)]}if(!e.width&&e.height){var r=this.getHeight(e.height,n.row);return[t.width*(r/t.height),r]}return[this.getWidth(e.width,n.col),this.getHeight(e.height,n.row)]},e.prototype.draw=function(){var t,e,n=this,i=this,r=i.config,o=i.ctx,s=i._defaultConfig,l=i._defaultStyle,f=i._activeStyle;null===(t=r.beforeDraw)||void 0===t||t.call(this,o),o.clearRect(0,0,r.width,r.height),this.cells=a(this.prizes,this.buttons),this.button&&this.cells.push(this.button),this.cells.forEach((function(t){t.col=t.col||1,t.row=t.row||1})),this.prizeArea=this.blocks.reduce((function(t,e){var i=t.x,r=t.y,s=t.w,a=t.h,c=function(t){var e,n=(null===(e=t.padding)||void 0===e?void 0:e.replace(/px/g,"").split(" ").map((function(t){return~~t})))||[0],i=0,r=0,o=0,s=0;switch(n.length){case 1:i=r=o=s=n[0];break;case 2:i=r=n[0],o=s=n[1];break;case 3:i=n[0],o=s=n[1],r=n[2];break;default:i=n[0],r=n[1],o=n[2],s=n[3]}var a={paddingTop:i,paddingBottom:r,paddingLeft:o,paddingRight:s};for(var c in a)a[c]=Object.prototype.hasOwnProperty.call(t,c)&&u(t[c],"string","number")?~~String(t[c]).replace(/px/g,""):a[c];return[i,r,o,s]}(e),f=c[0],p=c[1],d=c[2],g=c[3],y=e.borderRadius?n.getLength(e.borderRadius):0,v=e.background||l.background;return h(v)&&O(o,i,r,s,a,y,n.handleBackground(i,r,s,a,v)),{x:i+d,y:r+f,w:s-d-g,h:a-f-p}}),{x:0,y:0,w:r.width,h:r.height}),this.cellWidth=(this.prizeArea.w-s.gutter*(this.cols-1))/this.cols,this.cellHeight=(this.prizeArea.h-s.gutter*(this.rows-1))/this.rows,this.cells.forEach((function(t,e){var i=n.getGeometricProperty([t.x,t.y,t.col,t.row]),s=i[0],a=i[1],u=i[2],p=i[3],d=!1;(void 0===n.prizeFlag||n.prizeFlag>-1)&&(d=e===n.currIndex%n.prizes.length>>0);var g=d?f.background:t.background||l.background;if(h(g)){var y=(d?f.shadow:t.shadow||l.shadow).replace(/px/g,"").split(",")[0].split(" ").map((function(t,e){return e<3?Number(t):t}));4===y.length&&(o.shadowColor=y[3],o.shadowOffsetX=y[0]*r.dpr,o.shadowOffsetY=y[1]*r.dpr,o.shadowBlur=y[2],y[0]>0?u-=y[0]:(u+=y[0],s-=y[0]),y[1]>0?p-=y[1]:(p+=y[1],a-=y[1])),O(o,s,a,u,p,n.getLength(t.borderRadius?t.borderRadius:l.borderRadius),n.handleBackground(s,a,u,p,g)),o.shadowColor="rgba(0, 0, 0, 0)",o.shadowOffsetX=0,o.shadowOffsetY=0,o.shadowBlur=0}var v="prizeImgs";e>=n.prizes.length&&(v="btnImgs",e-=n.prizes.length),t.imgs&&t.imgs.forEach((function(i,r){if(n[v][e]){var o=n[v][e][r];if(o){var u=d&&o.activeImg||o.defaultImg;if(u){var c=n.computedWidthAndHeight(u,i,t),h=c[0],l=c[1],f=[s+n.getOffsetX(h,t.col),a+n.getHeight(i.top,t.row)],p=f[0],g=f[1];n.drawImage(u,p,g,h,l)}}}})),t.fonts&&t.fonts.forEach((function(e){var i=d&&f.fontStyle?f.fontStyle:e.fontStyle||l.fontStyle,r=d&&f.fontWeight?f.fontWeight:e.fontWeight||l.fontWeight,u=d&&f.fontSize?n.getLength(f.fontSize):n.getLength(e.fontSize||l.fontSize),h=d&&f.lineHeight?f.lineHeight:e.lineHeight||l.lineHeight||e.fontSize||l.fontSize;o.font=r+" "+(u>>0)+"px "+i,o.fillStyle=d&&f.fontColor?f.fontColor:e.fontColor||l.fontColor;var p=[],g=String(e.text);if(Object.prototype.hasOwnProperty.call(e,"wordWrap")?e.wordWrap:l.wordWrap){g=c(g);for(var y="",v=0;vn.getWidth(e.lengthLimit||l.lengthLimit,t.col)&&(p.push(y.slice(0,-1)),y=g[v]);y&&p.push(y),p.length||p.push(g)}else p=g.split("\n");p.forEach((function(i,r){o.fillText(i,s+n.getOffsetX(o.measureText(i).width,t.col),a+n.getHeight(e.top,t.row)+(r+1)*n.getLength(h))}))}))})),null===(e=r.afterDraw)||void 0===e||e.call(this,o)},e.prototype.handleBackground=function(t,e,n,i,r){var o=this.ctx;return r.includes("linear-gradient")&&(r=function(t,e,n,i,r,o){var s=/linear-gradient\((.+)\)/.exec(o)[1].split(",").map((function(t){return t.trim()})),a=s.shift(),u=[0,0,0,0];if(a.includes("deg")){var c=function(t){return Math.tan(t/180*Math.PI)};(a=a.slice(0,-3)%360)>=0&&a<45?u=[e,n+r,e+i,n+r-i*c(a-0)]:a>=45&&a<90?u=[e,n+r,e+i-r*c(a-45),n]:a>=90&&a<135?u=[e+i,n+r,e+i-r*c(a-90),n]:a>=135&&a<180?u=[e+i,n+r,e,n+i*c(a-135)]:a>=180&&a<225?u=[e+i,n,e,n+i*c(a-180)]:a>=225&&a<270?u=[e+i,n,e+r*c(a-225),n+r]:a>=270&&a<315?u=[e,n,e+r*c(a-270),n+r]:a>=315&&a<360&&(u=[e,n,e+i,n+r-i*c(a-315)])}else a.includes("top")?u=[e,n+r,e,n]:a.includes("bottom")?u=[e,n,e,n+r]:a.includes("left")?u=[e+i,n,e,n]:a.includes("right")&&(u=[e,n,e+i,n]);var h=t.createLinearGradient.apply(t,u.map((function(t){return t>>0})));return s.reduce((function(t,e,n){var i=e.split(" ");return 1===i.length?t.addColorStop(n,i[0]):2===i.length&&t.addColorStop.apply(t,i),t}),h)}(o,t,e,n,i,r)),r},e.prototype.play=function(){var t=this.config.clearInterval;this.startTime||(t(this.timer),this.startTime=Date.now(),this.prizeFlag=void 0,this.run())},e.prototype.stop=function(t){this.prizeFlag=t<0?-1:t%this.prizes.length,-1===this.prizeFlag&&(this.currIndex=0,this.draw())},e.prototype.run=function(t){void 0===t&&(t=0);var e=this,n=e.rAF,i=e.currIndex,r=e.prizes,o=e.prizeFlag,s=e.startTime,a=e._defaultConfig,u=Date.now()-s;if(u>=a.accelerationTime&&void 0!==o){this.FPS=u/t,this.endTime=Date.now(),this.stopIndex=i;for(var c=0;++c;){var h=r.length*c+o-(i>>0);if(C.easeOut(this.FPS,this.stopIndex,h,a.decelerationTime)-this.stopIndex>a.speed){this.endIndex=h;break}}return this.slowDown()}this.currIndex=(i+C.easeIn(u,.1,a.speed,a.accelerationTime))%r.length,this.draw(),n(this.run.bind(this,t+1))},e.prototype.slowDown=function(){var t,e=this,n=e.rAF,i=e.prizes,o=e.prizeFlag,s=e.stopIndex,a=e.endIndex,u=e._defaultConfig,c=Date.now()-this.endTime;if(-1!==o){if(c>u.decelerationTime)return this.startTime=0,void(null===(t=this.endCallback)||void 0===t||t.call(this,r({},i.find((function(t,e){return e===o})))));this.currIndex=C.easeOut(c,s,a,u.decelerationTime)%i.length,this.draw(),n(this.slowDown.bind(this))}else this.startTime=0},e.prototype.walk=function(){var t=this,e=this.config,n=e.setInterval;(0,e.clearInterval)(this.timer),this.timer=n((function(){t.currIndex+=1,t.draw()}),1300)},e.prototype.getGeometricProperty=function(t){var e=t[0],n=t[1],i=t[2],r=t[3],o=this.cellWidth,s=this.cellHeight,a=this._defaultConfig.gutter,u=[this.prizeArea.x+(o+a)*e,this.prizeArea.y+(s+a)*n];return i&&r&&u.push(o*i+a*(i-1),s*r+a*(r-1)),u},e.prototype.getWidth=function(t,e){return void 0===e&&(e=1),u(t,"number")?t:u(t,"string")?this.changeUnits(t,this.cellWidth*e+this._defaultConfig.gutter*(e-1)):0},e.prototype.getHeight=function(t,e){return void 0===e&&(e=1),u(t,"number")?t:u(t,"string")?this.changeUnits(t,this.cellHeight*e+this._defaultConfig.gutter*(e-1)):0},e.prototype.getOffsetX=function(t,e){return void 0===e&&(e=1),(this.cellWidth*e+this._defaultConfig.gutter*(e-1)-t)/2},e.prototype.conversionAxis=function(t,e){var n=this.config;return[t/n.dpr,e/n.dpr]},e}(k);e.LuckyGrid=$,e.LuckyWheel=D})),y="react-luck-draw",v="1.0.1",m=function(t){h(n,t);var e=d(n);function n(t){var o;return r(this,n),(o=e.call(this,t)).myLucky=i.default.createRef(),o}return s(n,[{key:"componentDidMount",value:function(){var t=this.props;this.myLucky.current.setAttribute("package","".concat(y,"@").concat(v));try{this.init(),t.onSuccess&&t.onSuccess()}catch(e){t.onError&&t.onError(e)}finally{t.onFinally&&t.onFinally(err)}}},{key:"componentDidUpdate",value:function(t){this.props.blocks!==t.blocks&&(this.$lucky.blocks=this.props.blocks),this.props.prizes!==t.prizes&&(this.$lucky.prizes=this.props.prizes),this.props.buttons!==t.buttons&&(this.$lucky.buttons=this.props.buttons)}},{key:"init",value:function(){var t=this.props;console.log(t),this.$lucky=new g.LuckyWheel({flag:"WEB",width:t.width,height:t.height,divElement:this.myLucky.current},c(c({},t),{},{start:function(){t.onStart&&t.onStart.apply(t,arguments)},end:function(){t.onEnd&&t.onEnd.apply(t,arguments)}}))}},{key:"play",value:function(){var t;(t=this.$lucky).play.apply(t,arguments)}},{key:"stop",value:function(){var t;(t=this.$lucky).stop.apply(t,arguments)}},{key:"render",value:function(){return i.default.createElement("div",{ref:this.myLucky})}}]),n}(i.default.Component);m.defaultProps={width:"",height:"",prizes:[],blocks:[],buttons:[],defaultStyle:{},defaultConfig:{}};var b=function(t){h(n,t);var e=d(n);function n(t){var o;return r(this,n),(o=e.call(this,t)).myLucky=i.default.createRef(),o}return s(n,[{key:"componentDidMount",value:function(){var t=this.props;this.myLucky.current.setAttribute("package","".concat(y,"@").concat(v));try{this.init(),t.onSuccess&&t.onSuccess()}catch(e){t.onError&&t.onError(e)}finally{t.onFinally&&t.onFinally(err)}}},{key:"componentDidUpdate",value:function(t){this.props.cols!==t.cols&&(this.$lucky.cols=this.props.cols),this.props.rows!==t.rows&&(this.$lucky.rows=this.props.rows),this.props.blocks!==t.blocks&&(this.$lucky.blocks=this.props.blocks),this.props.prizes!==t.prizes&&(this.$lucky.prizes=this.props.prizes),this.props.buttons!==t.buttons&&(this.$lucky.buttons=this.props.buttons)}},{key:"init",value:function(){var t=this.props;this.$lucky=new g.LuckyGrid({flag:"WEB",width:t.width,height:t.height,divElement:this.myLucky.current},c(c({},t),{},{start:function(){t.onStart&&t.onStart.apply(t,arguments)},end:function(){t.onEnd&&t.onEnd.apply(t,arguments)}}))}},{key:"play",value:function(){var t;(t=this.$lucky).play.apply(t,arguments)}},{key:"stop",value:function(){var t;(t=this.$lucky).stop.apply(t,arguments)}},{key:"render",value:function(){return i.default.createElement("div",{ref:this.myLucky})}}]),n}(i.default.Component);b.defaultProps={width:"",height:"",cols:3,rows:3,blocks:[],prizes:[],buttons:[],defaultStyle:{},activeStyle:{},defaultConfig:{}},t.LuckyGrid=b,t.LuckyWheel=m,Object.defineProperty(t,"__esModule",{value:!0})})); 17 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./dist/react-luck-draw.cjs.js') 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-luck-draw", 3 | "version": "1.0.1", 4 | "description": "react抽奖插件", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "rollup --config rollup.config.dev.js -w", 8 | "build": "rollup --config rollup.config.build.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/LuckDraw/react-luck-draw.git" 13 | }, 14 | "keywords": [ 15 | "react抽奖插件", 16 | "大转盘抽奖", 17 | "九宫格抽奖" 18 | ], 19 | "author": "ldq ", 20 | "license": "BSD-3-Clause", 21 | "bugs": { 22 | "url": "https://github.com/LuckDraw/react-luck-draw/issues" 23 | }, 24 | "homepage": "https://100px.net", 25 | "files": [ 26 | "package.json", 27 | "LICENSE", 28 | "dist", 29 | "index.js" 30 | ], 31 | "devDependencies": { 32 | "@babel/core": "^7.12.10", 33 | "@babel/preset-env": "^7.12.11", 34 | "@babel/preset-react": "^7.12.10", 35 | "@rollup/plugin-commonjs": "^17.0.0", 36 | "@rollup/plugin-json": "^4.1.0", 37 | "@rollup/plugin-node-resolve": "^11.1.0", 38 | "rollup": "^2.38.0", 39 | "rollup-plugin-babel": "^4.4.0", 40 | "rollup-plugin-terser": "^7.0.2" 41 | }, 42 | "dependencies": { 43 | "lucky-canvas": "^1.5.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /rollup.config.build.js: -------------------------------------------------------------------------------- 1 | import { name } from './package.json' 2 | import json from '@rollup/plugin-json' 3 | import resolve from '@rollup/plugin-node-resolve' 4 | import commonjs from '@rollup/plugin-commonjs' 5 | import babel from 'rollup-plugin-babel' 6 | import { terser } from 'rollup-plugin-terser' 7 | 8 | export default { 9 | input: './src/index.js', 10 | output: [ 11 | { 12 | file: `./dist/${name}.cjs.js`, 13 | format: 'cjs', 14 | }, 15 | { 16 | file: `./dist/${name}.cjs.min.js`, 17 | format: 'cjs', 18 | plugins: [terser()] 19 | }, 20 | { 21 | file: `./dist/${name}.umd.js`, 22 | format: 'umd', 23 | name: 'ReactLuckDraw', 24 | }, 25 | { 26 | file: `./dist/${name}.umd.min.js`, 27 | format: 'umd', 28 | name: 'ReactLuckDraw', 29 | plugins: [terser()] 30 | }, 31 | ], 32 | plugins: [ 33 | babel(), 34 | resolve(), 35 | commonjs(), 36 | json(), 37 | ], 38 | external: ['react'], 39 | } 40 | -------------------------------------------------------------------------------- /rollup.config.dev.js: -------------------------------------------------------------------------------- 1 | import { name } from './package.json' 2 | import json from '@rollup/plugin-json' 3 | import resolve from '@rollup/plugin-node-resolve' 4 | import commonjs from '@rollup/plugin-commonjs' 5 | import babel from 'rollup-plugin-babel' 6 | 7 | export default { 8 | input: './src/index.js', 9 | output: [ 10 | { 11 | file: `./dist/${name}.cjs.js`, 12 | format: 'cjs', 13 | }, 14 | ], 15 | plugins: [ 16 | babel(), 17 | resolve(), 18 | commonjs(), 19 | json(), 20 | ], 21 | external: ['react'], 22 | } 23 | -------------------------------------------------------------------------------- /src/components/LuckyGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { LuckyGrid as Grid } from 'lucky-canvas' 3 | import { name, version } from '../../package.json' 4 | 5 | export default class LuckyGrid extends React.Component { 6 | constructor (props) { 7 | super(props) 8 | this.myLucky = React.createRef() 9 | } 10 | componentDidMount () { 11 | const { props } = this 12 | this.myLucky.current.setAttribute('package', `${name}@${version}`) 13 | try { 14 | this.init() 15 | props.onSuccess && props.onSuccess() 16 | } catch (err) { 17 | props.onError && props.onError(err) 18 | } finally { 19 | props.onFinally && props.onFinally(err) 20 | } 21 | } 22 | componentDidUpdate (prevProps) { 23 | if (this.props.cols !== prevProps.cols) { 24 | this.$lucky.cols = this.props.cols 25 | } 26 | if (this.props.rows !== prevProps.rows) { 27 | this.$lucky.rows = this.props.rows 28 | } 29 | if (this.props.blocks !== prevProps.blocks) { 30 | this.$lucky.blocks = this.props.blocks 31 | } 32 | if (this.props.prizes !== prevProps.prizes) { 33 | this.$lucky.prizes = this.props.prizes 34 | } 35 | if (this.props.buttons !== prevProps.buttons) { 36 | this.$lucky.buttons = this.props.buttons 37 | } 38 | } 39 | init () { 40 | const { props } = this 41 | this.$lucky = new Grid({ 42 | flag: 'WEB', 43 | width: props.width, 44 | height: props.height, 45 | divElement: this.myLucky.current 46 | }, { 47 | ...props, 48 | start: (...rest) => { 49 | props.onStart && props.onStart(...rest) 50 | }, 51 | end: (...rest) => { 52 | props.onEnd && props.onEnd(...rest) 53 | } 54 | }) 55 | } 56 | play (...rest) { 57 | this.$lucky.play(...rest) 58 | } 59 | stop (...rest) { 60 | this.$lucky.stop(...rest) 61 | } 62 | render () { 63 | return
64 | } 65 | } 66 | 67 | LuckyGrid.defaultProps = { 68 | width: '', 69 | height: '', 70 | cols: 3, 71 | rows: 3, 72 | blocks: [], 73 | prizes: [], 74 | buttons: [], 75 | defaultStyle: {}, 76 | activeStyle: {}, 77 | defaultConfig: {}, 78 | } 79 | -------------------------------------------------------------------------------- /src/components/LuckyWheel.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { LuckyWheel as Wheel } from 'lucky-canvas' 3 | import { name, version } from '../../package.json' 4 | 5 | export default class LuckyWheel extends React.Component { 6 | constructor (props) { 7 | super(props) 8 | this.myLucky = React.createRef() 9 | } 10 | componentDidMount () { 11 | const { props } = this 12 | this.myLucky.current.setAttribute('package', `${name}@${version}`) 13 | try { 14 | this.init() 15 | props.onSuccess && props.onSuccess() 16 | } catch (err) { 17 | props.onError && props.onError(err) 18 | } finally { 19 | props.onFinally && props.onFinally(err) 20 | } 21 | } 22 | componentDidUpdate (prevProps) { 23 | if (this.props.blocks !== prevProps.blocks) { 24 | this.$lucky.blocks = this.props.blocks 25 | } 26 | if (this.props.prizes !== prevProps.prizes) { 27 | this.$lucky.prizes = this.props.prizes 28 | } 29 | if (this.props.buttons !== prevProps.buttons) { 30 | this.$lucky.buttons = this.props.buttons 31 | } 32 | } 33 | init () { 34 | const { props } = this 35 | console.log(props) 36 | this.$lucky = new Wheel({ 37 | flag: 'WEB', 38 | width: props.width, 39 | height: props.height, 40 | divElement: this.myLucky.current 41 | }, { 42 | ...props, 43 | start: (...rest) => { 44 | props.onStart && props.onStart(...rest) 45 | }, 46 | end: (...rest) => { 47 | props.onEnd && props.onEnd(...rest) 48 | } 49 | }) 50 | } 51 | play (...rest) { 52 | this.$lucky.play(...rest) 53 | } 54 | stop (...rest) { 55 | this.$lucky.stop(...rest) 56 | } 57 | render () { 58 | return
59 | } 60 | } 61 | 62 | LuckyWheel.defaultProps = { 63 | width: '', 64 | height: '', 65 | prizes: [], 66 | blocks: [], 67 | buttons: [], 68 | defaultStyle: {}, 69 | defaultConfig: {}, 70 | } 71 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as LuckyWheel } from './components/LuckyWheel.js' 2 | export { default as LuckyGrid } from './components/LuckyGrid.js' 3 | --------------------------------------------------------------------------------