xy-map 1.1.32 → 1.1.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/xy-map.common.js +75 -52
- package/xy-map.umd.js +75 -52
- package/xy-map.umd.min.js +3 -3
package/package.json
CHANGED
package/xy-map.common.js
CHANGED
|
@@ -224,7 +224,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".mapLoad[data-v-fa3ebcb8]{position:abs
|
|
|
224
224
|
|
|
225
225
|
/***/ }),
|
|
226
226
|
|
|
227
|
-
/***/
|
|
227
|
+
/***/ 2071:
|
|
228
228
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
229
229
|
|
|
230
230
|
"use strict";
|
|
@@ -238,7 +238,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
238
238
|
|
|
239
239
|
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
|
|
240
240
|
// Module
|
|
241
|
-
___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-
|
|
241
|
+
___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-20664206]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:rgba(145,147,184,.103)}", ""]);
|
|
242
242
|
// Exports
|
|
243
243
|
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
|
|
244
244
|
|
|
@@ -42912,19 +42912,19 @@ var update = add("7474eb16", content, true, {"sourceMap":false,"shadowMode":fals
|
|
|
42912
42912
|
|
|
42913
42913
|
/***/ }),
|
|
42914
42914
|
|
|
42915
|
-
/***/
|
|
42915
|
+
/***/ 6916:
|
|
42916
42916
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
42917
42917
|
|
|
42918
42918
|
// style-loader: Adds some css to the DOM by adding a <style> tag
|
|
42919
42919
|
|
|
42920
42920
|
// load the styles
|
|
42921
|
-
var content = __webpack_require__(
|
|
42921
|
+
var content = __webpack_require__(2071);
|
|
42922
42922
|
if(content.__esModule) content = content.default;
|
|
42923
42923
|
if(typeof content === 'string') content = [[module.id, content, '']];
|
|
42924
42924
|
if(content.locals) module.exports = content.locals;
|
|
42925
42925
|
// add the styles to the DOM
|
|
42926
42926
|
var add = (__webpack_require__(7037)/* ["default"] */ .Z)
|
|
42927
|
-
var update = add("
|
|
42927
|
+
var update = add("4a7b31d4", content, true, {"sourceMap":false,"shadowMode":false});
|
|
42928
42928
|
|
|
42929
42929
|
/***/ }),
|
|
42930
42930
|
|
|
@@ -118333,8 +118333,8 @@ var component = normalizeComponent(
|
|
|
118333
118333
|
)
|
|
118334
118334
|
|
|
118335
118335
|
/* harmony default export */ var mapMarker = (component.exports);
|
|
118336
|
-
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=
|
|
118337
|
-
var
|
|
118336
|
+
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=20664206&scoped=true&
|
|
118337
|
+
var mapRainvue_type_template_id_20664206_scoped_true_render = function render() {
|
|
118338
118338
|
var _vm = this,
|
|
118339
118339
|
_c = _vm._self._c;
|
|
118340
118340
|
return _c('canvas', {
|
|
@@ -118344,14 +118344,14 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_render = function render()
|
|
|
118344
118344
|
}
|
|
118345
118345
|
}, [_vm._v("不支持canvas")]);
|
|
118346
118346
|
};
|
|
118347
|
-
var
|
|
118347
|
+
var mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns = [];
|
|
118348
118348
|
|
|
118349
118349
|
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=script&lang=js&
|
|
118350
118350
|
/* harmony default export */ var mapRainvue_type_script_lang_js_ = ({
|
|
118351
118351
|
props: {
|
|
118352
118352
|
id: {
|
|
118353
118353
|
type: String,
|
|
118354
|
-
default: '
|
|
118354
|
+
default: 'rain'
|
|
118355
118355
|
},
|
|
118356
118356
|
angle: {
|
|
118357
118357
|
// 角度
|
|
@@ -118366,17 +118366,24 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
|
|
|
118366
118366
|
len: {
|
|
118367
118367
|
// 雨滴长度
|
|
118368
118368
|
type: Number,
|
|
118369
|
-
default:
|
|
118369
|
+
default: 70
|
|
118370
118370
|
},
|
|
118371
|
-
|
|
118372
|
-
//
|
|
118371
|
+
lineWidth: {
|
|
118372
|
+
// 雨滴宽度
|
|
118373
118373
|
type: Number,
|
|
118374
|
-
default:
|
|
118374
|
+
default: 1.5
|
|
118375
|
+
},
|
|
118376
|
+
isRain: {
|
|
118377
|
+
// 是否下雨
|
|
118378
|
+
type: Boolean,
|
|
118379
|
+
default: true
|
|
118375
118380
|
}
|
|
118376
118381
|
},
|
|
118377
118382
|
data() {
|
|
118378
118383
|
return {
|
|
118379
|
-
timer: ''
|
|
118384
|
+
timer: '',
|
|
118385
|
+
ctx: null,
|
|
118386
|
+
count: 500
|
|
118380
118387
|
};
|
|
118381
118388
|
},
|
|
118382
118389
|
destroyed() {
|
|
@@ -118385,61 +118392,77 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
|
|
|
118385
118392
|
mounted() {
|
|
118386
118393
|
this.start();
|
|
118387
118394
|
},
|
|
118395
|
+
watch: {
|
|
118396
|
+
status() {
|
|
118397
|
+
window.clearInterval(this.timer);
|
|
118398
|
+
this.start();
|
|
118399
|
+
}
|
|
118400
|
+
},
|
|
118388
118401
|
methods: {
|
|
118389
118402
|
start() {
|
|
118403
|
+
this.$nextTick(() => {
|
|
118404
|
+
const canvas = document.getElementById(this.id);
|
|
118405
|
+
const width = canvas.clientWidth;
|
|
118406
|
+
const height = canvas.clientHeight;
|
|
118407
|
+
if (this.status === 'small') {
|
|
118408
|
+
this.count = 100;
|
|
118409
|
+
}
|
|
118410
|
+
if (this.status === 'default') {
|
|
118411
|
+
this.count = 300;
|
|
118412
|
+
}
|
|
118413
|
+
if (this.status === 'large') {
|
|
118414
|
+
this.count = 1000;
|
|
118415
|
+
}
|
|
118416
|
+
canvas.width = width;
|
|
118417
|
+
canvas.height = height;
|
|
118418
|
+
this.ctx = canvas.getContext('2d');
|
|
118419
|
+
this.timer = setInterval(() => {
|
|
118420
|
+
if (this.isRain) {
|
|
118421
|
+
this.clearCanvas();
|
|
118422
|
+
this.draws();
|
|
118423
|
+
} else {
|
|
118424
|
+
this.clearCanvas();
|
|
118425
|
+
}
|
|
118426
|
+
}, 50);
|
|
118427
|
+
});
|
|
118428
|
+
},
|
|
118429
|
+
draws() {
|
|
118390
118430
|
const self = this;
|
|
118391
|
-
|
|
118392
|
-
|
|
118393
|
-
|
|
118394
|
-
let
|
|
118395
|
-
|
|
118396
|
-
let count = this.count;
|
|
118397
|
-
let lineWidth = 1;
|
|
118398
|
-
if (this.status === 'small') {
|
|
118399
|
-
x2 = 0;
|
|
118400
|
-
len = 50;
|
|
118401
|
-
count = 100;
|
|
118402
|
-
}
|
|
118403
|
-
if (this.status === 'large') {
|
|
118404
|
-
x2 = -35;
|
|
118405
|
-
count = 1000;
|
|
118406
|
-
lineWidth = 1.5;
|
|
118407
|
-
}
|
|
118408
|
-
canvas.width = width;
|
|
118409
|
-
canvas.height = height;
|
|
118410
|
-
let ctx = canvas.getContext('2d');
|
|
118411
|
-
self.timer = setInterval(clearCanvas, 50);
|
|
118412
|
-
function clearCanvas() {
|
|
118413
|
-
ctx.clearRect(0, 0, width, height);
|
|
118414
|
-
draws();
|
|
118431
|
+
const canvas = document.getElementById(this.id);
|
|
118432
|
+
const width = canvas.clientWidth;
|
|
118433
|
+
const height = canvas.clientHeight;
|
|
118434
|
+
for (let i = 1; i <= this.count; i++) {
|
|
118435
|
+
draw(Math.random() * width, Math.random() * height);
|
|
118415
118436
|
}
|
|
118416
118437
|
function draw(x, y) {
|
|
118438
|
+
let ctx = self.ctx;
|
|
118417
118439
|
//canvas写渐变:createLinearGradient(startX,startY,endX,endY)
|
|
118418
|
-
let grd = ctx.createLinearGradient(x, y, x +
|
|
118440
|
+
let grd = ctx.createLinearGradient(x, y, x + self.angle, (y + self.len) * 5);
|
|
118419
118441
|
grd.addColorStop(0, 'rgba(255,255,255,0.1)');
|
|
118420
118442
|
grd.addColorStop(0.5, 'rgba(105,105,105,0.3)');
|
|
118421
118443
|
grd.addColorStop(1, 'rgba(255,255,255,0.5)');
|
|
118422
118444
|
ctx.strokeStyle = grd;
|
|
118423
118445
|
ctx.beginPath();
|
|
118424
118446
|
ctx.moveTo(x, y);
|
|
118425
|
-
ctx.lineTo(x +
|
|
118426
|
-
ctx.lineWidth = lineWidth;
|
|
118447
|
+
ctx.lineTo(x + self.angle, y + self.len);
|
|
118448
|
+
ctx.lineWidth = self.lineWidth;
|
|
118427
118449
|
ctx.stroke();
|
|
118428
118450
|
ctx.closePath();
|
|
118429
118451
|
}
|
|
118430
|
-
|
|
118431
|
-
|
|
118432
|
-
|
|
118433
|
-
|
|
118434
|
-
|
|
118452
|
+
},
|
|
118453
|
+
clearCanvas() {
|
|
118454
|
+
const canvas = document.getElementById(this.id);
|
|
118455
|
+
const width = canvas.clientWidth;
|
|
118456
|
+
const height = canvas.clientHeight;
|
|
118457
|
+
this.ctx.clearRect(0, 0, width, height);
|
|
118435
118458
|
}
|
|
118436
118459
|
}
|
|
118437
118460
|
});
|
|
118438
118461
|
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=script&lang=js&
|
|
118439
118462
|
/* harmony default export */ var components_mapRainvue_type_script_lang_js_ = (mapRainvue_type_script_lang_js_);
|
|
118440
|
-
// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=
|
|
118441
|
-
var
|
|
118442
|
-
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=
|
|
118463
|
+
// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
|
|
118464
|
+
var mapRainvue_type_style_index_0_id_20664206_prod_lang_scss_scoped_true_ = __webpack_require__(6916);
|
|
118465
|
+
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
|
|
118443
118466
|
|
|
118444
118467
|
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue
|
|
118445
118468
|
|
|
@@ -118452,11 +118475,11 @@ var mapRainvue_type_style_index_0_id_59d7e867_prod_lang_scss_scoped_true_ = __we
|
|
|
118452
118475
|
|
|
118453
118476
|
var mapRain_component = normalizeComponent(
|
|
118454
118477
|
components_mapRainvue_type_script_lang_js_,
|
|
118455
|
-
|
|
118456
|
-
|
|
118478
|
+
mapRainvue_type_template_id_20664206_scoped_true_render,
|
|
118479
|
+
mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns,
|
|
118457
118480
|
false,
|
|
118458
118481
|
null,
|
|
118459
|
-
"
|
|
118482
|
+
"20664206",
|
|
118460
118483
|
null
|
|
118461
118484
|
|
|
118462
118485
|
)
|
package/xy-map.umd.js
CHANGED
|
@@ -234,7 +234,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".mapLoad[data-v-fa3ebcb8]{position:abs
|
|
|
234
234
|
|
|
235
235
|
/***/ }),
|
|
236
236
|
|
|
237
|
-
/***/
|
|
237
|
+
/***/ 871:
|
|
238
238
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
239
239
|
|
|
240
240
|
"use strict";
|
|
@@ -248,7 +248,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
248
248
|
|
|
249
249
|
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
|
|
250
250
|
// Module
|
|
251
|
-
___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-
|
|
251
|
+
___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-20664206]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-color:rgba(145,147,184,.103)}", ""]);
|
|
252
252
|
// Exports
|
|
253
253
|
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
|
|
254
254
|
|
|
@@ -42922,19 +42922,19 @@ var update = add("5d9c6596", content, true, {"sourceMap":false,"shadowMode":fals
|
|
|
42922
42922
|
|
|
42923
42923
|
/***/ }),
|
|
42924
42924
|
|
|
42925
|
-
/***/
|
|
42925
|
+
/***/ 354:
|
|
42926
42926
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
42927
42927
|
|
|
42928
42928
|
// style-loader: Adds some css to the DOM by adding a <style> tag
|
|
42929
42929
|
|
|
42930
42930
|
// load the styles
|
|
42931
|
-
var content = __webpack_require__(
|
|
42931
|
+
var content = __webpack_require__(871);
|
|
42932
42932
|
if(content.__esModule) content = content.default;
|
|
42933
42933
|
if(typeof content === 'string') content = [[module.id, content, '']];
|
|
42934
42934
|
if(content.locals) module.exports = content.locals;
|
|
42935
42935
|
// add the styles to the DOM
|
|
42936
42936
|
var add = (__webpack_require__(208)/* ["default"] */ .Z)
|
|
42937
|
-
var update = add("
|
|
42937
|
+
var update = add("33a2ac54", content, true, {"sourceMap":false,"shadowMode":false});
|
|
42938
42938
|
|
|
42939
42939
|
/***/ }),
|
|
42940
42940
|
|
|
@@ -118351,8 +118351,8 @@ var component = normalizeComponent(
|
|
|
118351
118351
|
)
|
|
118352
118352
|
|
|
118353
118353
|
/* harmony default export */ var mapMarker = (component.exports);
|
|
118354
|
-
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=
|
|
118355
|
-
var
|
|
118354
|
+
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=template&id=20664206&scoped=true&
|
|
118355
|
+
var mapRainvue_type_template_id_20664206_scoped_true_render = function render() {
|
|
118356
118356
|
var _vm = this,
|
|
118357
118357
|
_c = _vm._self._c;
|
|
118358
118358
|
return _c('canvas', {
|
|
@@ -118362,14 +118362,14 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_render = function render()
|
|
|
118362
118362
|
}
|
|
118363
118363
|
}, [_vm._v("不支持canvas")]);
|
|
118364
118364
|
};
|
|
118365
|
-
var
|
|
118365
|
+
var mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns = [];
|
|
118366
118366
|
|
|
118367
118367
|
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=script&lang=js&
|
|
118368
118368
|
/* harmony default export */ var mapRainvue_type_script_lang_js_ = ({
|
|
118369
118369
|
props: {
|
|
118370
118370
|
id: {
|
|
118371
118371
|
type: String,
|
|
118372
|
-
default: '
|
|
118372
|
+
default: 'rain'
|
|
118373
118373
|
},
|
|
118374
118374
|
angle: {
|
|
118375
118375
|
// 角度
|
|
@@ -118384,17 +118384,24 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
|
|
|
118384
118384
|
len: {
|
|
118385
118385
|
// 雨滴长度
|
|
118386
118386
|
type: Number,
|
|
118387
|
-
default:
|
|
118387
|
+
default: 70
|
|
118388
118388
|
},
|
|
118389
|
-
|
|
118390
|
-
//
|
|
118389
|
+
lineWidth: {
|
|
118390
|
+
// 雨滴宽度
|
|
118391
118391
|
type: Number,
|
|
118392
|
-
default:
|
|
118392
|
+
default: 1.5
|
|
118393
|
+
},
|
|
118394
|
+
isRain: {
|
|
118395
|
+
// 是否下雨
|
|
118396
|
+
type: Boolean,
|
|
118397
|
+
default: true
|
|
118393
118398
|
}
|
|
118394
118399
|
},
|
|
118395
118400
|
data() {
|
|
118396
118401
|
return {
|
|
118397
|
-
timer: ''
|
|
118402
|
+
timer: '',
|
|
118403
|
+
ctx: null,
|
|
118404
|
+
count: 500
|
|
118398
118405
|
};
|
|
118399
118406
|
},
|
|
118400
118407
|
destroyed() {
|
|
@@ -118403,61 +118410,77 @@ var mapRainvue_type_template_id_59d7e867_scoped_true_staticRenderFns = [];
|
|
|
118403
118410
|
mounted() {
|
|
118404
118411
|
this.start();
|
|
118405
118412
|
},
|
|
118413
|
+
watch: {
|
|
118414
|
+
status() {
|
|
118415
|
+
window.clearInterval(this.timer);
|
|
118416
|
+
this.start();
|
|
118417
|
+
}
|
|
118418
|
+
},
|
|
118406
118419
|
methods: {
|
|
118407
118420
|
start() {
|
|
118421
|
+
this.$nextTick(() => {
|
|
118422
|
+
const canvas = document.getElementById(this.id);
|
|
118423
|
+
const width = canvas.clientWidth;
|
|
118424
|
+
const height = canvas.clientHeight;
|
|
118425
|
+
if (this.status === 'small') {
|
|
118426
|
+
this.count = 100;
|
|
118427
|
+
}
|
|
118428
|
+
if (this.status === 'default') {
|
|
118429
|
+
this.count = 300;
|
|
118430
|
+
}
|
|
118431
|
+
if (this.status === 'large') {
|
|
118432
|
+
this.count = 1000;
|
|
118433
|
+
}
|
|
118434
|
+
canvas.width = width;
|
|
118435
|
+
canvas.height = height;
|
|
118436
|
+
this.ctx = canvas.getContext('2d');
|
|
118437
|
+
this.timer = setInterval(() => {
|
|
118438
|
+
if (this.isRain) {
|
|
118439
|
+
this.clearCanvas();
|
|
118440
|
+
this.draws();
|
|
118441
|
+
} else {
|
|
118442
|
+
this.clearCanvas();
|
|
118443
|
+
}
|
|
118444
|
+
}, 50);
|
|
118445
|
+
});
|
|
118446
|
+
},
|
|
118447
|
+
draws() {
|
|
118408
118448
|
const self = this;
|
|
118409
|
-
|
|
118410
|
-
|
|
118411
|
-
|
|
118412
|
-
let
|
|
118413
|
-
|
|
118414
|
-
let count = this.count;
|
|
118415
|
-
let lineWidth = 1;
|
|
118416
|
-
if (this.status === 'small') {
|
|
118417
|
-
x2 = 0;
|
|
118418
|
-
len = 50;
|
|
118419
|
-
count = 100;
|
|
118420
|
-
}
|
|
118421
|
-
if (this.status === 'large') {
|
|
118422
|
-
x2 = -35;
|
|
118423
|
-
count = 1000;
|
|
118424
|
-
lineWidth = 1.5;
|
|
118425
|
-
}
|
|
118426
|
-
canvas.width = width;
|
|
118427
|
-
canvas.height = height;
|
|
118428
|
-
let ctx = canvas.getContext('2d');
|
|
118429
|
-
self.timer = setInterval(clearCanvas, 50);
|
|
118430
|
-
function clearCanvas() {
|
|
118431
|
-
ctx.clearRect(0, 0, width, height);
|
|
118432
|
-
draws();
|
|
118449
|
+
const canvas = document.getElementById(this.id);
|
|
118450
|
+
const width = canvas.clientWidth;
|
|
118451
|
+
const height = canvas.clientHeight;
|
|
118452
|
+
for (let i = 1; i <= this.count; i++) {
|
|
118453
|
+
draw(Math.random() * width, Math.random() * height);
|
|
118433
118454
|
}
|
|
118434
118455
|
function draw(x, y) {
|
|
118456
|
+
let ctx = self.ctx;
|
|
118435
118457
|
//canvas写渐变:createLinearGradient(startX,startY,endX,endY)
|
|
118436
|
-
let grd = ctx.createLinearGradient(x, y, x +
|
|
118458
|
+
let grd = ctx.createLinearGradient(x, y, x + self.angle, (y + self.len) * 5);
|
|
118437
118459
|
grd.addColorStop(0, 'rgba(255,255,255,0.1)');
|
|
118438
118460
|
grd.addColorStop(0.5, 'rgba(105,105,105,0.3)');
|
|
118439
118461
|
grd.addColorStop(1, 'rgba(255,255,255,0.5)');
|
|
118440
118462
|
ctx.strokeStyle = grd;
|
|
118441
118463
|
ctx.beginPath();
|
|
118442
118464
|
ctx.moveTo(x, y);
|
|
118443
|
-
ctx.lineTo(x +
|
|
118444
|
-
ctx.lineWidth = lineWidth;
|
|
118465
|
+
ctx.lineTo(x + self.angle, y + self.len);
|
|
118466
|
+
ctx.lineWidth = self.lineWidth;
|
|
118445
118467
|
ctx.stroke();
|
|
118446
118468
|
ctx.closePath();
|
|
118447
118469
|
}
|
|
118448
|
-
|
|
118449
|
-
|
|
118450
|
-
|
|
118451
|
-
|
|
118452
|
-
|
|
118470
|
+
},
|
|
118471
|
+
clearCanvas() {
|
|
118472
|
+
const canvas = document.getElementById(this.id);
|
|
118473
|
+
const width = canvas.clientWidth;
|
|
118474
|
+
const height = canvas.clientHeight;
|
|
118475
|
+
this.ctx.clearRect(0, 0, width, height);
|
|
118453
118476
|
}
|
|
118454
118477
|
}
|
|
118455
118478
|
});
|
|
118456
118479
|
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=script&lang=js&
|
|
118457
118480
|
/* harmony default export */ var components_mapRainvue_type_script_lang_js_ = (mapRainvue_type_script_lang_js_);
|
|
118458
|
-
// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=
|
|
118459
|
-
var
|
|
118460
|
-
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=
|
|
118481
|
+
// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
|
|
118482
|
+
var mapRainvue_type_style_index_0_id_20664206_prod_lang_scss_scoped_true_ = __webpack_require__(354);
|
|
118483
|
+
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue?vue&type=style&index=0&id=20664206&prod&lang=scss&scoped=true&
|
|
118461
118484
|
|
|
118462
118485
|
;// CONCATENATED MODULE: ./src/package/components/mapRain.vue
|
|
118463
118486
|
|
|
@@ -118470,11 +118493,11 @@ var mapRainvue_type_style_index_0_id_59d7e867_prod_lang_scss_scoped_true_ = __we
|
|
|
118470
118493
|
|
|
118471
118494
|
var mapRain_component = normalizeComponent(
|
|
118472
118495
|
components_mapRainvue_type_script_lang_js_,
|
|
118473
|
-
|
|
118474
|
-
|
|
118496
|
+
mapRainvue_type_template_id_20664206_scoped_true_render,
|
|
118497
|
+
mapRainvue_type_template_id_20664206_scoped_true_staticRenderFns,
|
|
118475
118498
|
false,
|
|
118476
118499
|
null,
|
|
118477
|
-
"
|
|
118500
|
+
"20664206",
|
|
118478
118501
|
null
|
|
118479
118502
|
|
|
118480
118503
|
)
|