diff --git a/compile_go.sh b/compile_go.sh new file mode 100644 index 0000000000000000000000000000000000000000..05101ba1d75d402bbd0795b1130b80121d6fdb66 --- /dev/null +++ b/compile_go.sh @@ -0,0 +1,37 @@ +# Copyright (C) 2021 Huawei Device Co., Ltd. +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# http://www.apache.org/licenses/LICENSE-2.0 +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +CURWORK_DIR=$(pwd); +LOCAL_PROPTIES_FILE="local.properties"; +echo "sdk.dir="$CURWORK_DIR"/hmsdk">$LOCAL_PROPTIES_FILE; +wget https://nodejs.org/download/release/v12.19.0/node-v12.19.0-linux-x64.tar.xz; +tar xvJf node-v12.19.0-linux-x64.tar.xz; +export NODE_HOME=$CURWORK_DIR/node-v12.19.0-linux-x64/bin; +export PATH=$PATH:$NODE_HOME; +git clone https://gitee.com/wurep/hmsdk.git; +chmod 777 hmsdk/toolchains/restool; +chmod 777 gradlew; +if [ ! -n "$1" ]; then + ./gradlew assembleDebug; +else + ./gradlew $1; +fi +if [ $? -eq 0 ]; then + rm -rf hmsdk; + rm node-v12.19.0-linux-x64.tar.xz; + rm -rf node-v12.19.0-linux-x64; +else + exit 1 +fi + + + + + diff --git a/entry/src/main/js/default/common/components/LVBattery/LVBattery.hml b/entry/src/main/js/default/common/components/LVBattery/LVBattery.hml new file mode 100644 index 0000000000000000000000000000000000000000..5fa4f5373d9ad851193fcc8127a0d60af8d64040 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVBattery/LVBattery.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVBattery/LVBattery.js b/entry/src/main/js/default/common/components/LVBattery/LVBattery.js new file mode 100644 index 0000000000000000000000000000000000000000..61a4eb762b2b55f2735793d55ccf09f40d2614f0 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVBattery/LVBattery.js @@ -0,0 +1,151 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBatteryController} from '../../component/LVBattery/LVBatteryController.js' +import {Rect} from '../../component/base/Rect.js' + +export default { + props: { + controller: { + default: new LVBatteryController() + } + }, + data: { + visable1: "hidden", + visable2: "visible", + compWidth: 0, + compHeight: 0, + paddingVertical: 0, + paddingHorizontal: 0, + mBodyCorner: 3, + mBodyValueCorner: 1, + mBatterySpace: 3, + mHeadwidth: 0, + rectFBody: new Rect(), + rectFBodyValue: new Rect(), + mVlaue: 0, + isNotAnim: false + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + if (this.controller.getPaddingVertical() != -1) { + this.paddingVertical = this.controller.getPaddingVertical() + this.paddingHorizontal = this.controller.getPaddingHorizontal() + } else { + this.paddingVertical = 6 + this.paddingHorizontal = (this.compWidth - (this.compHeight - 12 - this.mBatterySpace * 2) / 3) / 2 + } + this.mHeadwidth = (this.compWidth - this.paddingHorizontal * 2) / 3 + this.rectFBody.top = this.paddingVertical + this.mHeadwidth / 2 + this.rectFBody.bottom = this.compHeight - this.paddingVertical + this.rectFBody.left = this.paddingHorizontal + this.rectFBody.right = this.compWidth - this.paddingHorizontal + this.rectFBodyValue.top = 0 + this.rectFBodyValue.bottom = this.rectFBody.bottom - this.mBatterySpace + this.rectFBodyValue.left = this.rectFBody.left + this.mBatterySpace + this.rectFBodyValue.right = this.rectFBody.right - this.mBatterySpace + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + if (!this.isNotAnim) { + this.mVlaue = this.controller.getAnimValue() + } + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + this.drawHead(ctx); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + this.drawBody(ctx); + this.drawValue(ctx); + this.drawText(ctx); + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable1 = "hidden" + this.visable2 = "visible" + } else { + this.visable1 = "visible" + this.visable2 = "hidden" + } + + this.isNotAnim = false + }, + drawHead(ctx) { + ctx.fillStyle = this.controller.getViewColor() + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.paddingVertical + this.mHeadwidth / 2, + this.mHeadwidth / 2, + -320 / 360 * Math.PI, -40 / 360 * Math.PI); + ctx.closePath(); + ctx.fill() + }, + drawBody(ctx) { + ctx.beginPath(); + ctx.strokeStyle = this.controller.getViewColor() + ctx.arc(this.rectFBody.left + this.mBodyCorner, this.rectFBody.top + this.mBodyCorner, this.mBodyCorner, -Math.PI, -Math.PI / 2) + ctx.lineTo(this.rectFBody.right - this.mBodyCorner, this.rectFBody.top) + ctx.arc(this.rectFBody.right - this.mBodyCorner, this.rectFBody.top + this.mBodyCorner, this.mBodyCorner, -Math.PI / 2, 0) + ctx.lineTo(this.rectFBody.right, this.rectFBody.bottom - this.mBodyCorner) + ctx.arc(this.rectFBody.right - this.mBodyCorner, this.rectFBody.bottom - this.mBodyCorner, this.mBodyCorner, 0, Math.PI / 2) + ctx.lineTo(this.rectFBody.left + this.mBodyCorner, this.rectFBody.bottom) + ctx.arc(this.rectFBody.left + this.mBodyCorner, this.rectFBody.bottom - this.mBodyCorner, this.mBodyCorner, Math.PI / 2, Math.PI) + ctx.lineTo(this.rectFBody.left, this.rectFBody.top + this.mBodyCorner) + ctx.stroke(); + }, + drawValue(ctx) { + this.rectFBodyValue.top = this.rectFBodyValue.bottom - (this.rectFBodyValue.bottom - this.rectFBody.top - this.mBatterySpace) * this.controller.getAnimValue() + ctx.beginPath(); + ctx.fillStyle = this.controller.getCellColor() + ctx.arc(this.rectFBodyValue.left + this.mBodyValueCorner, this.rectFBodyValue.top + this.mBodyValueCorner, this.mBodyValueCorner, -Math.PI, -Math.PI / 2) + ctx.lineTo(this.rectFBodyValue.right - this.mBodyValueCorner, this.rectFBodyValue.top) + ctx.arc(this.rectFBodyValue.right - this.mBodyValueCorner, this.rectFBodyValue.top + this.mBodyValueCorner, this.mBodyValueCorner, -Math.PI / 2, 0) + ctx.lineTo(this.rectFBodyValue.right, this.rectFBodyValue.bottom - this.mBodyValueCorner) + ctx.arc(this.rectFBodyValue.right - this.mBodyValueCorner, this.rectFBodyValue.bottom - this.mBodyValueCorner, this.mBodyValueCorner, 0, Math.PI / 2) + ctx.lineTo(this.rectFBodyValue.left + this.mBodyValueCorner, this.rectFBodyValue.bottom) + ctx.arc(this.rectFBodyValue.left + this.mBodyValueCorner, this.rectFBodyValue.bottom - this.mBodyValueCorner, this.mBodyValueCorner, Math.PI / 2, Math.PI) + ctx.lineTo(this.rectFBodyValue.left, this.rectFBodyValue.top + this.mBodyValueCorner) + ctx.fill(); + }, + drawText(ctx) { + ctx.fillStyle = this.controller.getViewColor() + ctx.textBaseline = 'middle'; + ctx.font = this.controller.getTextSize() + 'px sans-serif'; + var text = parseInt(this.controller.getAnimValue() * 100) + "%"; + var textWidth = ctx.measureText(text).width; + ctx.fillText(text, this.rectFBody.getCenterX() - textWidth / 2, this.rectFBody.getCenterY()); + }, + startAnim() { + this.controller.startViewAnim(5000, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, + setValue(value) { + this.mVlaue = parseInt(value) / 100; + this.isNotAnim = true + this.onDraw() + } +} diff --git a/entry/src/main/js/default/common/components/LVBattery/LVBatteryController.js b/entry/src/main/js/default/common/components/LVBattery/LVBatteryController.js new file mode 100644 index 0000000000000000000000000000000000000000..3400a030792232502158d1292aa509a13e1e5a3d --- /dev/null +++ b/entry/src/main/js/default/common/components/LVBattery/LVBatteryController.js @@ -0,0 +1,74 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVBatteryController extends LVBase { + animValue = 0; + viewColor = 'white'; + cellColor = 'rgb(67, 213, 81)'; + textSize = 40; + paddingVertical = -1; + paddingHorizontal = -1; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getPaddingVertical() { + return this.paddingVertical; + } + + getPaddingHorizontal() { + return this.paddingHorizontal; + } + + setPadding(paddingVertical, paddingHorizontal) { + this.paddingVertical = paddingVertical; + this.paddingHorizontal = paddingHorizontal; + return this; + } + + getCellColor() { + return this.cellColor; + } + + setCellColor(cellColor) { + this.cellColor = cellColor; + return this; + } + + getTextSize() { + return this.textSize; + } + + setTextSize(textSize) { + this.textSize = textSize; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value + } + + OnAnimationStop() { + this.animValue = 0 + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVBlock/LVBlock.hml b/entry/src/main/js/default/common/components/LVBlock/LVBlock.hml new file mode 100644 index 0000000000000000000000000000000000000000..996e3ab1764a3639396bf24cb9616dcb503c1d6a --- /dev/null +++ b/entry/src/main/js/default/common/components/LVBlock/LVBlock.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVBlock/LVBlock.js b/entry/src/main/js/default/common/components/LVBlock/LVBlock.js new file mode 100644 index 0000000000000000000000000000000000000000..f3b968a8598e7a3b4bcbf1abbb4c68d223e1263b --- /dev/null +++ b/entry/src/main/js/default/common/components/LVBlock/LVBlock.js @@ -0,0 +1,378 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBlockController} from '../../component/LVBlock/LVBlockController.js' + +export default { + props: { + controller: { + default: new LVBlockController() + } + }, + data: { + visable2: "visible", + compWidth: 0, + compHeight: 0, + minWidth: 0, + rhomboidsX: 0, + rhomboidsY: 0, + moveYtoCenter: 0, + viewColor: "rgb(247,202,42)", + viewColorLeft: "rgb(227,144,11)", + viewColorRight: "rgb(188,91,26)", + shadowColor: "rgb(0,0,0)", + }, + onAttached() { + this.viewColor = this.controller.getViewColor() + this.viewColorLeft = this.controller.getViewColorLeft() + this.viewColorRight = this.controller.getViewColorRight() + this.controller.setAnimValue(0, 3) + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.rhomboidsX = 3 * this.minWidth / 16 / Math.sqrt(3); + this.rhomboidsY = this.minWidth / 16; + if (!this.controller.getIsShadow()) { + this.moveYtoCenter = this.minWidth / 4; + } else { + this.moveYtoCenter = 0; + } + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + if (this.controller.getAnimStep() == 0) { + this.drawStep1(ctx, this.controller.getAnimValue()); + if (this.controller.getIsShadow()) { + this.drawShadowStep1(ctx, this.controller.getAnimValue()); + } + } else if (this.controller.getAnimStep() == 1) { + this.drawStep2(ctx, this.controller.getAnimValue()); + if (this.controller.getIsShadow()) { + this.drawShadowStep2(ctx, this.controller.getAnimValue()); + } + } else { + this.drawStep3(ctx, this.controller.getAnimValue()); + if (this.controller.getIsShadow()) { + this.drawShadowStep3(ctx, this.controller.getAnimValue()); + } + } + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable2 = "visible" + } else { + this.visable2 = "hidden" + } + }, + drawStep1(ctx, animValue) { + var moveX = this.rhomboidsX / 2.0 * animValue; + var moveY = this.rhomboidsY / 2.0 * animValue; + + ctx.fillStyle = this.viewColorLeft; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - moveX, this.rhomboidsY * 12 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 - moveX, this.rhomboidsY * 12 - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 12 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 12 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + + ctx.fillStyle = this.viewColor; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - moveX, this.rhomboidsY * 12 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 11 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - moveX, this.minWidth / 4 * 3 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + moveX, this.rhomboidsY * 12 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 11 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + moveX, this.minWidth / 4 * 3 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 12 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 11 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.minWidth / 4 * 3 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 11 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + + ctx.fillStyle = this.viewColorRight; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.minWidth / 4 * 3 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.minWidth / 4 * 3 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 + this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + }, + drawStep2(ctx, animValue) { + var moveX = this.rhomboidsX * animValue; + var moveY = this.rhomboidsY * animValue; + + ctx.fillStyle = this.viewColorRight; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 + this.rhomboidsX - this.rhomboidsX / 2, this.minWidth / 4 * 3 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - this.rhomboidsX / 2, this.minWidth / 4 * 3 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.moveTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + + ctx.fillStyle = this.viewColorLeft; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + + ctx.fillStyle = this.viewColor; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 11 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX / 2 + moveX, this.minWidth / 4 * 3 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 12 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 11 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 11 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - this.rhomboidsX / 2, this.minWidth / 4 * 3 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 11 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + + }, + drawStep3(ctx, animValue) { + var moveX = this.rhomboidsX / 2.0 * animValue; + var moveY = this.rhomboidsY / 2.0 * animValue; + + ctx.fillStyle = this.viewColorLeft; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + + ctx.fillStyle = this.viewColorRight; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.rhomboidsY * 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + + ctx.fillStyle = this.viewColor; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 11 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.minWidth / 4 * 3 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - this.rhomboidsY + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 12 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 11 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2 + moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 11 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + this.rhomboidsY - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 11 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.minWidth / 4 * 3 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - moveY - this.minWidth / 2 + this.moveYtoCenter); + ctx.closePath(); + ctx.fill(); + }, + drawShadowStep1(ctx, animValue) { + var moveX = this.rhomboidsX / 2.0 * animValue; + var moveY = this.rhomboidsY / 2.0 * animValue; + + ctx.fillStyle = this.shadowColor; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - moveX, this.rhomboidsY * 12 - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 11 - moveY); + ctx.lineTo(this.minWidth / 2 - moveX, this.minWidth / 4 * 3 - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 - moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + moveX, this.rhomboidsY * 12 - this.rhomboidsY + moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 11 - this.rhomboidsY + moveY); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + moveX, this.minWidth / 4 * 3 - this.rhomboidsY + moveY); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 - this.rhomboidsY + moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 12 + moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 11 + moveY); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + moveX, this.minWidth / 4 * 3 + moveY); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + moveX, this.rhomboidsY * 13 + moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 11 + this.rhomboidsY - moveY); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY - moveY); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY - moveY); + ctx.closePath(); + ctx.fill() + }, + drawShadowStep2(ctx, animValue) { + var moveX = this.rhomboidsX * animValue; + var moveY = this.rhomboidsY * animValue; + + ctx.fillStyle = this.shadowColor; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 11 - this.rhomboidsY / 2 - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX / 2 + moveX, this.minWidth / 4 * 3 - this.rhomboidsY / 2 - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 12 - this.rhomboidsY + this.rhomboidsY / 2); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 11 - this.rhomboidsY + this.rhomboidsY / 2); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 11 + this.rhomboidsY / 2 + moveY); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + moveY); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 11 + this.rhomboidsY - this.rhomboidsY / 2); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - this.rhomboidsX / 2, this.minWidth / 4 * 3 + this.rhomboidsY - this.rhomboidsY / 2); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2); + ctx.closePath(); + ctx.fill() + }, + drawShadowStep3(ctx, animValue) { + var moveX = this.rhomboidsX / 2.0 * animValue; + var moveY = this.rhomboidsY / 2.0 * animValue; + + ctx.fillStyle = this.shadowColor; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 12 - this.rhomboidsY / 2 - this.rhomboidsY + moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 11 - this.rhomboidsY / 2 - this.rhomboidsY + moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.minWidth / 4 * 3 - this.rhomboidsY / 2 - this.rhomboidsY + moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX - this.rhomboidsX / 2 + this.rhomboidsX + moveX, this.rhomboidsY * 13 - this.rhomboidsY / 2 - this.rhomboidsY + moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 12 - this.rhomboidsY + this.rhomboidsY / 2 + moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 11 - this.rhomboidsY + this.rhomboidsY / 2 + moveY); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.minWidth / 4 * 3 - this.rhomboidsY + this.rhomboidsY / 2 + moveY); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 + moveX, this.rhomboidsY * 13 - this.rhomboidsY + this.rhomboidsY / 2 + moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 12 + this.rhomboidsY / 2 + this.rhomboidsY - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 11 + this.rhomboidsY / 2 + this.rhomboidsY - moveY); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.minWidth / 4 * 3 + this.rhomboidsY / 2 + this.rhomboidsY - moveY); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX + this.rhomboidsX + this.rhomboidsX / 2 - this.rhomboidsX - moveX, this.rhomboidsY * 13 + this.rhomboidsY / 2 + this.rhomboidsY - moveY); + ctx.closePath(); + ctx.moveTo(this.minWidth / 2 - this.rhomboidsX * 2 + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 12 + this.rhomboidsY - this.rhomboidsY / 2 - moveY); + ctx.lineTo(this.minWidth / 2 - this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 11 + this.rhomboidsY - this.rhomboidsY / 2 - moveY); + ctx.lineTo(this.minWidth / 2 + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.minWidth / 4 * 3 + this.rhomboidsY - this.rhomboidsY / 2 - moveY); + ctx.lineTo(this.minWidth / 2 + -this.rhomboidsX + this.rhomboidsX - this.rhomboidsX / 2 - moveX, this.rhomboidsY * 13 + this.rhomboidsY - this.rhomboidsY / 2 - moveY); + ctx.closePath(); + ctx.fill() + }, + startAnim() { + this.controller.startViewAnim(500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVBlock/LVBlockController.js b/entry/src/main/js/default/common/components/LVBlock/LVBlockController.js new file mode 100644 index 0000000000000000000000000000000000000000..1c8fe066bc24e37e2c47439ced07a4c81776deb1 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVBlock/LVBlockController.js @@ -0,0 +1,105 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVBlockController extends LVBase { + animValue = 0; + viewColor = 'rgb(247,202,42)'; + viewColorLeft = 'rgb(227,144,11)'; + viewColorRight = 'rgb(188,91,26)'; + shadowColor = 'rgb(0,0,0)'; + animStep = 0; + mShadow = true; + + getAnimValue() { + return this.animValue; + } + + getAnimStep() { + return this.animStep; + } + + getViewColor() { + return this.viewColor; + } + + getViewColorLeft() { + return this.viewColorLeft; + } + + getViewColorRight() { + return this.viewColorRight; + } + + setViewColor(viewColor) { + if (viewColor.substr(0, 1) == "#") { + viewColor = this.hexToRgb(viewColor) + } + var rgbs = this.getRgb(viewColor) + var red = rgbs[0] + var green = rgbs[1] + var blue = rgbs[2] + + this.viewColor = viewColor; + this.viewColorLeft = "rgb(" + ((red - 20) > 0 ? red - 20 : 0) + "," + ((green - 58) > 0 ? green - 58 : 0) + "," + ((blue - 31) > 0 ? blue - 31 : 0) + ")"; + this.viewColorRight = "rgb(" + ((red - 59) > 0 ? red - 59 : 0) + "," + ((green - 111) > 0 ? green - 111 : 0) + "," + ((blue - 16) > 0 ? blue - 16 : 0) + ")"; + return this; + } + + hexToRgb(hexColor) { + var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; + if (hexColor && reg.test(hexColor)) { + if (hexColor.length === 4) { + var sColorNew = "#"; + for (var i = 1; i < 4; i += 1) { + sColorNew += hexColor.slice(i, i + 1).concat(hexColor.slice(i, i + 1)); + } + hexColor = sColorNew; + } + //处理六位的颜色值 + var sColorChange = []; + for (var i = 1; i < 7; i += 2) { + sColorChange.push(parseInt("0x" + hexColor.slice(i, i + 2))); + } + return "rgb(" + sColorChange.join(",") + ")"; + } else { + return hexColor; + } + } + + getRgb(rgbColor) { + return rgbColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); + } + + getShadowColor() { + return this.shadowColor; + } + + setShadowColor(shadowColor) { + this.shadowColor = shadowColor; + return this; + } + + getIsShadow() { + return this.mShadow; + } + + isShadow(show) { + this.mShadow = show; + return this; + } + + OnAnimationUpdate(value) { + this.animStep = parseInt(value) + this.animValue = value - this.animStep; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogo.hml b/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogo.hml new file mode 100644 index 0000000000000000000000000000000000000000..996e3ab1764a3639396bf24cb9616dcb503c1d6a --- /dev/null +++ b/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogo.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogo.js b/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogo.js new file mode 100644 index 0000000000000000000000000000000000000000..ba8cf9526279581d43be7ec1890185ca3fba931e --- /dev/null +++ b/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogo.js @@ -0,0 +1,168 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVChromeLogoController} from '../../component/LVChromeLogo/LVChromeLogoController.js' +import {CanvasRotateUtil} from '../../component/base/CanvasRotateUtil.js' +import {Point} from '../../component/base/Point.js' + +export default { + props: { + controller: { + default: new LVChromeLogoController() + } + }, + data: { + visable2: "visible", + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 3, + yellow: "rgb(253, 197, 53)", + green: "rgb(27, 147, 76)", + red: "rgb(211, 57, 53)", + canvasRotateUtil1: null, + canvasRotateUtil2: null, + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + // 初始化画布旋转工具类 + if (this.canvasRotateUtil1 == null) { + this.canvasRotateUtil1 = new CanvasRotateUtil(this.compWidth, this.compHeight) + this.canvasRotateUtil2 = new CanvasRotateUtil(this.compWidth, this.compHeight) + } + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + var rotate = 360 * this.controller.getAnimValue() + // 通过工具类让画布绕中心点旋转 + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.canvasRotateUtil2.rotate(ctx, rotate) + } else { + this.canvasRotateUtil1.rotate(ctx, rotate) + } + + // 将圆分成三个扇形 + this.drawSector(ctx) + // 画三个等边三角形组成的大三角形正好是内切三角形 + this.drawTriangle(ctx) + // 画中心的圆覆盖 + this.drawCircle(ctx) + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable2 = "visible" + } else { + this.visable2 = "hidden" + } + }, + drawSector(ctx) { + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + ctx.fillStyle = this.yellow; + ctx.beginPath(); + ctx.arc(this.minWidth / 2, this.minWidth / 2, + this.minWidth / 2 - this.padding, + -30 / 360 * Math.PI * 2, 90 / 360 * Math.PI * 2); + ctx.lineTo(this.minWidth / 2, this.minWidth / 2) + ctx.fill() + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = this.green; + ctx.beginPath(); + ctx.arc(this.minWidth / 2, this.minWidth / 2, + this.minWidth / 2 - this.padding, + 90 / 360 * Math.PI * 2, 210 / 360 * Math.PI * 2); + ctx.lineTo(this.minWidth / 2, this.minWidth / 2) + ctx.fill() + ctx.fillStyle = this.red; + ctx.beginPath(); + ctx.arc(this.minWidth / 2, this.minWidth / 2, + this.minWidth / 2 - this.padding, + 210 / 360 * Math.PI * 2, 330 / 360 * Math.PI * 2); + ctx.lineTo(this.minWidth / 2, this.minWidth / 2) + ctx.fill() + }, + drawTriangle(ctx) { + var point1 = this.getPoint((this.minWidth / 2 - this.padding) / 2, 90); + var point2 = this.getPoint((this.minWidth / 2 - this.padding), 150); + var point3 = this.getPoint((this.minWidth / 2 - this.padding) / 2, 210); + var point4 = this.getPoint((this.minWidth / 2 - this.padding), 270); + var point5 = this.getPoint((this.minWidth / 2 - this.padding) / 2, 330); + var point6 = this.getPoint((this.minWidth / 2 - this.padding), 30); + ctx.fillStyle = this.yellow; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - point1.x, this.minWidth / 2 - point1.y); + ctx.lineTo(this.minWidth / 2 - point2.x, this.minWidth / 2 - point2.y); + ctx.lineTo(this.minWidth / 2 - point3.x, this.minWidth / 2 - point3.y); + ctx.closePath(); + ctx.fill() + ctx.fillStyle = this.green; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - point3.x, this.minWidth / 2 - point3.y); + ctx.lineTo(this.minWidth / 2 - point4.x, this.minWidth / 2 - point4.y); + ctx.lineTo(this.minWidth / 2 - point5.x, this.minWidth / 2 - point5.y); + ctx.closePath(); + ctx.fill() + ctx.fillStyle = this.red; + ctx.beginPath(); + ctx.moveTo(this.minWidth / 2 - point5.x, this.minWidth / 2 - point5.y); + ctx.lineTo(this.minWidth / 2 - point6.x, this.minWidth / 2 - point6.y); + ctx.lineTo(this.minWidth / 2 - point1.x, this.minWidth / 2 - point1.y); + ctx.closePath(); + ctx.fill() + }, + drawCircle(ctx) { + ctx.fillStyle = "white"; + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, // 圆心 + (this.minWidth / 2 - this.padding) / 2, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.fill(); + ctx.fillStyle = "rgb(61, 117, 242)"; + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, // 圆心 + (this.minWidth / 2 - this.padding) / 2 / 6 * 5, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.fill(); + }, + getPoint(radius, angle) { + var x = radius * Math.cos(angle * Math.PI / 180); + var y = radius * Math.sin(angle * Math.PI / 180); + return new Point(x, y); + }, + startAnim() { + this.controller.startViewAnim(1500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogoController.js b/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogoController.js new file mode 100644 index 0000000000000000000000000000000000000000..329956d54f0f920156ec96bee49e5f53d1076d95 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVChromeLogo/LVChromeLogoController.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVChromeLogoController extends LVBase { + animValue = 0; + + getAnimValue() { + return this.animValue; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVCircular/LVCircular.hml b/entry/src/main/js/default/common/components/LVCircular/LVCircular.hml new file mode 100644 index 0000000000000000000000000000000000000000..996e3ab1764a3639396bf24cb9616dcb503c1d6a --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircular/LVCircular.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVCircular/LVCircular.js b/entry/src/main/js/default/common/components/LVCircular/LVCircular.js new file mode 100644 index 0000000000000000000000000000000000000000..9de7dd2a5b88789b2f60bfa5d5c7417034e601ff --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircular/LVCircular.js @@ -0,0 +1,89 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVCircularController} from '../../component/LVCircular/LVCircularController.js' + +export default { + props: { + controller: { + default: new LVCircularController() + } + }, + data: { + visable2: "visible", + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 0, + roundRadius: 4, + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + this.roundRadius = this.minWidth / 30 + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + ctx.beginPath(); + ctx.fillStyle = this.controller.getRoundColor(); + for (var i = 0; i < 9; i++) { + var x2 = (this.compWidth / 2 - this.padding - this.roundRadius) * Math.cos((this.controller.getAnimValue() + 45 * i) * Math.PI / 180) + var y2 = (this.compHeight / 2 - this.padding - this.roundRadius) * Math.sin((this.controller.getAnimValue() + 45 * i) * Math.PI / 180) + ctx.moveTo(this.compWidth / 2 - x2 + this.roundRadius, this.compHeight / 2 - y2) + ctx.arc(this.compWidth / 2 - x2, this.compHeight / 2 - y2, // 圆心 + this.roundRadius, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + } + ctx.fill(); + ctx.globalCompositeOperation = 'source-over'; + ctx.beginPath(); + ctx.fillStyle = this.controller.getViewColor(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, // 圆心 + this.minWidth / 2 - this.padding - this.roundRadius * 6, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.fill(); + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable2 = "visible" + } else { + this.visable2 = "hidden" + } + }, + startAnim() { + this.controller.startViewAnim(3500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVCircular/LVCircularController.js b/entry/src/main/js/default/common/components/LVCircular/LVCircularController.js new file mode 100644 index 0000000000000000000000000000000000000000..ed5e932845caa607f9f6e9c9ef35db513abf12af --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircular/LVCircularController.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVCircularController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + roundColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getRoundColor() { + return this.roundColor; + } + + setRoundColor(roundColor) { + this.roundColor = roundColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = 360 * value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCD.hml b/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCD.hml new file mode 100644 index 0000000000000000000000000000000000000000..996e3ab1764a3639396bf24cb9616dcb503c1d6a --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCD.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCD.js b/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCD.js new file mode 100644 index 0000000000000000000000000000000000000000..616a996e8f90ce69ea4d399de0b3eb6d9ef248f2 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCD.js @@ -0,0 +1,111 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVCircularCDController} from '../../component/LVCircularCD/LVCircularCDController.js' + +export default { + props: { + controller: { + default: new LVCircularCDController() + } + }, + data: { + visable2: "visible", + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 5 + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + onPageShow() { + // 页面的第一个控件需要做延迟，否则宽高有一定概率获取不到 + setTimeout(() => { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.onDraw() + }, 50) + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + // 外圈 + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.strokeStyle = this.controller.getViewColor(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 2 - ctx.lineWidth / 2 - this.padding, + 0, Math.PI * 2); + ctx.stroke(); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + // 中心小圆 + ctx.beginPath(); + ctx.lineWidth = 3; //圆环宽度 + ctx.arc(this.compWidth / 2, this.compHeight / 2, // 圆心 + 5, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.stroke(); + // 中间的弧 + ctx.beginPath(); + ctx.lineWidth = 2; + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 3 - ctx.lineWidth / 2 - this.padding, + this.controller.getAnimValue() / 360 * Math.PI * 2, (this.controller.getAnimValue() + 80) / 360 * Math.PI * 2); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 3 - ctx.lineWidth / 2 - this.padding, + (this.controller.getAnimValue() + 180) / 360 * Math.PI * 2, (this.controller.getAnimValue() + 260) / 360 * Math.PI * 2); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 4 - ctx.lineWidth / 2 - this.padding, + this.controller.getAnimValue() / 360 * Math.PI * 2, (this.controller.getAnimValue() + 80) / 360 * Math.PI * 2); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 4 - ctx.lineWidth / 2 - this.padding, + (this.controller.getAnimValue() + 180) / 360 * Math.PI * 2, (this.controller.getAnimValue() + 260) / 360 * Math.PI * 2); + ctx.stroke(); + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable2 = "visible" + } else { + this.visable2 = "hidden" + } + }, + startAnim() { + this.controller.startViewAnim(1500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCDController.js b/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCDController.js new file mode 100644 index 0000000000000000000000000000000000000000..dc2cef7ea632dd00cd24b6407e81f03576fb0356 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularCD/LVCircularCDController.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVCircularCDController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = 360 * value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJump.hml b/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJump.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJump.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJump.js b/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJump.js new file mode 100644 index 0000000000000000000000000000000000000000..19f0e5d9ae2aa495c2c62d2cbc9b91ec328c4b57 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJump.js @@ -0,0 +1,83 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVCircularJumpController} from '../../component/LVCircularJump/LVCircularJumpController.js' + +export default { + props: { + controller: { + default: new LVCircularJumpController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + padding: 0, + circularCount: 4, + circularRadius: 6 + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + this.controller.setAnimValue(0, this.circularCount) + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + ctx.fillStyle = this.controller.getViewColor(); + + var circularX = (this.compWidth - this.padding * 2) / this.circularCount; + if (this.controller.getAnimTimes() == 0 && this.controller.getAnimValue() == 0) { + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + for (var i = 0; i < this.circularCount; i++) { + if (i == 1) { + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'source-over'; + } + ctx.beginPath(); + ctx.arc(i * circularX + circularX / 2 + this.padding, this.compHeight / 2, + this.circularRadius, + 0, Math.PI * 2); + ctx.fill(); + } + } else { + for (var i = 0; i < this.circularCount; i++) { + if (i == this.controller.getAnimTimes() % this.circularCount) { + ctx.clearRect(i * circularX + circularX / 2 + this.padding - this.circularRadius, 0, + this.circularRadius * 2, this.compHeight) + ctx.beginPath(); + ctx.arc(i * circularX + circularX / 2 + this.padding, this.compHeight / 2 - this.compHeight / 2 * this.controller.getAnimValue(), + this.circularRadius, + 0, Math.PI * 2); + ctx.fill(); + } + } + } + }, + startAnim() { + this.controller.startViewAnim(500 * this.circularCount, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJumpController.js b/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJumpController.js new file mode 100644 index 0000000000000000000000000000000000000000..c8e92b968f06cf4738f7dfb4cb244608b2d58670 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularJump/LVCircularJumpController.js @@ -0,0 +1,43 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVCircularJumpController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + animTimes = 0; + + getAnimValue() { + return this.animValue; + } + + getAnimTimes() { + return this.animTimes; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animTimes = parseInt(value) + this.animValue = value - this.animTimes; + if (this.animValue > 0.5) { + this.animValue = 1 - this.animValue; + } + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRing.hml b/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRing.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRing.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRing.js b/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRing.js new file mode 100644 index 0000000000000000000000000000000000000000..84236c0a2fc80f48a0f971561323193e9dc772dd --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRing.js @@ -0,0 +1,72 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVCircularRingController} from '../../component/LVCircularRing/LVCircularRingController.js' + +export default { + props: { + controller: { + default: new LVCircularRingController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 5 + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + ctx.beginPath(); + ctx.lineWidth = 8; //圆环宽度 + ctx.strokeStyle = this.controller.getViewColor(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, // 圆心 + this.minWidth / 2 - ctx.lineWidth / 2 - this.padding, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.stroke(); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + ctx.beginPath(); + ctx.lineWidth = 8; + ctx.strokeStyle = this.controller.getBarColor(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 2 - ctx.lineWidth / 2 - this.padding, + this.controller.getAnimValue() / 360 * Math.PI * 2, (this.controller.getAnimValue() + 100) / 360 * Math.PI * 2); + ctx.stroke(); + + }, + startAnim() { + this.controller.startViewAnim(500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRingController.js b/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRingController.js new file mode 100644 index 0000000000000000000000000000000000000000..65f8f8b7d8e096bfa94404fd7e2ccb3f40c741f0 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularRing/LVCircularRingController.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVCircularRingController extends LVBase { + animValue = 0; + viewColor = '#A0FFFFFF'; + barColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getBarColor() { + return this.barColor; + } + + setBarColor(barColor) { + this.barColor = barColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = 360 * value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoom.hml b/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoom.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoom.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoom.js b/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoom.js new file mode 100644 index 0000000000000000000000000000000000000000..aa1ce1d16c9c7e7397559e6f979d57d8ae987067 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoom.js @@ -0,0 +1,83 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVCircularZoomController} from '../../component/LVCircularZoom/LVCircularZoomController.js' + +export default { + props: { + controller: { + default: new LVCircularZoomController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + padding: 0, + circularCount: 3, + circularRadius: 8 + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + this.controller.setAnimValue(0, this.circularCount) + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + ctx.fillStyle = this.controller.getViewColor(); + + var circularX = (this.compWidth - this.padding * 2) / this.circularCount; + if (this.controller.getAnimTimes() == 0 && this.controller.getAnimValue() == 0) { + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + for (var i = 0; i < this.circularCount; i++) { + if (i == 1) { + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'source-over'; + } + ctx.beginPath(); + ctx.arc(i * circularX + circularX / 2 + this.padding, this.compHeight / 2, + this.circularRadius, + 0, Math.PI * 2); + ctx.fill(); + } + } else { + for (var i = 0; i < this.circularCount; i++) { + if (i == this.controller.getAnimTimes() % this.circularCount) { + ctx.clearRect(i * circularX + circularX / 2 + this.padding - this.circularRadius, 0, + this.circularRadius * 2, this.compHeight) + ctx.beginPath(); + ctx.arc(i * circularX + circularX / 2 + this.padding, this.compHeight / 2, + this.circularRadius * this.controller.getAnimValue(), + 0, Math.PI * 2); + ctx.fill(); + } + } + } + }, + startAnim() { + this.controller.startViewAnim(500 * this.circularCount, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoomController.js b/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoomController.js new file mode 100644 index 0000000000000000000000000000000000000000..b37096793b7ff155bd6f788a4bc56c9899ed8c00 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVCircularZoom/LVCircularZoomController.js @@ -0,0 +1,43 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVCircularZoomController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + animTimes = 0; + + getAnimValue() { + return this.animValue; + } + + getAnimTimes() { + return this.animTimes; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animTimes = parseInt(value) + this.animValue = value - this.animTimes; + if (this.animValue < 0.2) { + this.animValue = 0.2; + } + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeans.hml b/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeans.hml new file mode 100644 index 0000000000000000000000000000000000000000..deb3780359ebf8f76216e8cab033e5e3f3024657 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeans.hml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeans.js b/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeans.js new file mode 100644 index 0000000000000000000000000000000000000000..51dafdfb0a943b1ddeabf0994e89e35c6e2d5a84 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeans.js @@ -0,0 +1,123 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVEatBeansController} from '../../component/LVEatBeans/LVEatBeansController.js' + +export default { + props: { + controller: { + default: new LVEatBeansController() + } + }, + data: { + visable1: "hidden", + visable2: "visible", + compWidth: 0, + compHeight: 0, + padding: 5, + eatErWidth: 60, + eatErPositonX: 0, + eatSpeed: 5, + beansWidth: 10, + mAngle: 34, + eatErStrtAngle: 34, + eatErEndAngle: 326, + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + this.eatErPositonX = (this.compWidth - 2 * this.padding - this.eatErWidth) * this.controller.getAnimValue(); + this.eatErStrtAngle = this.mAngle * (1 - (this.controller.getAnimValue() * this.eatSpeed - parseInt(this.controller.getAnimValue() * this.eatSpeed))); + this.eatErEndAngle = 360 - this.eatErStrtAngle; + var eatRightX = this.padding + this.eatErWidth + this.eatErPositonX; + this.drawEatEr(ctx) + this.drawBeans(ctx, eatRightX) + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable1 = "hidden" + this.visable2 = "visible" + } else { + this.visable1 = "visible" + this.visable2 = "hidden" + } + + }, + drawEatEr(ctx) { + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + ctx.fillStyle = this.controller.getViewColor(); + ctx.beginPath() + ctx.arc(this.padding + this.eatErWidth / 2 + this.eatErPositonX, this.compHeight / 2, + this.eatErWidth / 2, + this.eatErStrtAngle / 360 * Math.PI * 2, (this.eatErEndAngle) / 360 * Math.PI * 2); + ctx.lineTo(this.padding + this.eatErWidth / 2 + this.eatErPositonX, this.compHeight / 2) + ctx.closePath() + ctx.fill() + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = this.controller.getEyesColor(); + ctx.beginPath() + ctx.arc(this.padding + this.eatErWidth / 2 + this.eatErPositonX, this.compHeight / 2 - this.eatErWidth / 4, + this.beansWidth / 2, + 0, Math.PI * 2); + ctx.fill() + }, + drawBeans(ctx, eatRightX) { + var beansCount = parseInt((this.compWidth - this.padding * 2 - this.eatErWidth) / this.beansWidth / 2); + ctx.fillStyle = this.controller.getViewColor(); + for (var i = 0; i < beansCount; i++) { + var x = beansCount * i + this.beansWidth / 2 + this.padding + this.eatErWidth; + if (x > eatRightX) { + ctx.beginPath() + ctx.arc(x, this.compHeight / 2, + this.beansWidth / 2, + 0, Math.PI * 2); + ctx.fill() + } + } + }, + drawOthers(ctx, radius) { + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2 + this.minWidth / this.signalSize, + radius, + -135 / 360 * Math.PI * 2, (-45) / 360 * Math.PI * 2); + ctx.stroke(); + }, + startAnim() { + this.controller.startViewAnim(3500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeansController.js b/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeansController.js new file mode 100644 index 0000000000000000000000000000000000000000..dd6c0fabc3404eeca68cb0803be68c74dbec4ca6 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVEatBeans/LVEatBeansController.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVEatBeansController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + eyesColor = '#000000'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getEyesColor() { + return this.eyesColor; + } + + setEyesColor(eyesColor) { + this.eyesColor = eyesColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStar.hml b/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStar.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStar.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStar.js b/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStar.js new file mode 100644 index 0000000000000000000000000000000000000000..c192d842a11fac3286ec6d0b03833336090e3c85 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStar.js @@ -0,0 +1,147 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVFivePoiStarController} from '../../component/LVFivePoiStar/LVFivePoiStarController.js' +import {Point} from '../../component/base/Point.js' + +export default { + props: { + controller: { + default: new LVFivePoiStarController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 5, + hornCount: 5, + listPoint: null, + lastAnimValue: 0 + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + getPoint(radius, angle) { + var x = (radius) * Math.cos(angle * Math.PI / 180) - (this.compWidth - this.minWidth) / 2; + var y = (radius) * Math.sin(angle * Math.PI / 180) - (this.compHeight - this.minWidth) / 2; + var p = new Point(x, y); + return p; + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + if (this.listPoint == null) { + this.listPoint = new Array() + for (var i = 0; i < this.hornCount; i++) { + var p = this.getPoint(this.minWidth / 2 - this.padding, (90 - 360 / this.hornCount) + 360 / this.hornCount * i) + this.listPoint[i] = p + } + } + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const canvas = this.$refs.canvas.getContext('2d', { + antialias: true + }) + canvas.lineWidth = 3 + + var mAnimatedValue = this.controller.getAnimValue(); + if (this.lastAnimValue == 0 && mAnimatedValue != 0) { // 说明动画刚开始，需要清除默认显示的五角星 + // 忽略上一次的绘制结果，只显示下面绘制的内容 + canvas.globalCompositeOperation = 'copy'; + } else if (mAnimatedValue < this.lastAnimValue) { // 说明开始了新一轮的动画，需要清除上次动画留下的痕迹 + // 忽略上一次的绘制结果，只显示下面绘制的内容 + canvas.globalCompositeOperation = 'copy'; + } else { // 说明动画执行中，需要保留绘制痕迹 + // 切换回默认显示模式，否则上面绘制的图像将不显示 + canvas.globalCompositeOperation = 'source-over'; + } + this.lastAnimValue = mAnimatedValue + var cp; + var currenttime = (mAnimatedValue * 10 - parseInt(mAnimatedValue * 10)); + if (mAnimatedValue == 0) { + this.drawPathEdge(canvas, this.listPoint[0], this.listPoint[2], this.minWidth); + this.drawPathEdge(canvas, this.listPoint[2], this.listPoint[4], this.minWidth); + this.drawPathEdge(canvas, this.listPoint[4], this.listPoint[1], this.minWidth); + this.drawPathEdge(canvas, this.listPoint[1], this.listPoint[3], this.minWidth); + this.drawPathEdge(canvas, this.listPoint[3], this.listPoint[0], this.minWidth); + canvas.beginPath(); + canvas.strokeStyle = this.controller.getCircleColor(); + canvas.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 2 - canvas.lineWidth / 2 - this.padding, + 0, Math.PI * 2); + canvas.stroke(); + } else if (mAnimatedValue > 0 && mAnimatedValue <= 0.1) { + cp = this.drawOneEdge(currenttime, 1, this.listPoint[0], this.listPoint[2]); + this.drawPathEdge(canvas, this.listPoint[0], cp, this.minWidth); + } else if (mAnimatedValue > 0.1 && mAnimatedValue <= 0.2) { + this.drawPathEdge(canvas, this.listPoint[0], this.listPoint[2], this.minWidth); + cp = this.drawOneEdge(currenttime, 1, this.listPoint[2], this.listPoint[4]); + this.drawPathEdge(canvas, this.listPoint[2], cp, this.minWidth); + } else if (mAnimatedValue > 0.2 && mAnimatedValue <= 0.3) { + this.drawPathEdge(canvas, this.listPoint[2], this.listPoint[4], this.minWidth); + cp = this.drawOneEdge(currenttime, 1, this.listPoint[4], this.listPoint[1]); + this.drawPathEdge(canvas, this.listPoint[4], cp, this.minWidth); + } else if (mAnimatedValue > 0.3 && mAnimatedValue <= 0.4) { + this.drawPathEdge(canvas, this.listPoint[4], this.listPoint[1], this.minWidth); + cp = this.drawOneEdge(currenttime, 1, this.listPoint[1], this.listPoint[3]); + this.drawPathEdge(canvas, this.listPoint[1], cp, this.minWidth); + } else if (mAnimatedValue > 0.4 && mAnimatedValue <= 0.5) { + this.drawPathEdge(canvas, this.listPoint[1], this.listPoint[3], this.minWidth); + cp = this.drawOneEdge(currenttime, 1, this.listPoint[3], this.listPoint[0]); + this.drawPathEdge(canvas, this.listPoint[3], cp, this.minWidth); + } else if (mAnimatedValue > 0.5 && mAnimatedValue <= 0.75) { + this.drawPathEdge(canvas, this.listPoint[3], this.listPoint[0], this.minWidth); + canvas.beginPath(); + canvas.strokeStyle = this.controller.getCircleColor(); + canvas.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 2 - canvas.lineWidth / 2 - this.padding, + (-180 + ((90 - 360 / this.hornCount))) / 360 * Math.PI * 2, (360 / 0.25 * (mAnimatedValue - 0.5)) / 360 * Math.PI * 2); + canvas.stroke(); + } else { + canvas.beginPath(); + canvas.lineWidth = 5 + canvas.strokeStyle = this.controller.getCircleColor(); + canvas.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 2 - canvas.lineWidth / 2 - this.padding, + 0, Math.PI * 2); + canvas.stroke(); + } + + }, + drawOneEdge(currenttime, alltime, startP, endP) { + var x = startP.getX() - (startP.getX() - endP.getX()) / alltime * currenttime; + var y = startP.getY() - (startP.getY() - endP.getY()) / alltime * currenttime; + var resPoint = new Point(x, y); + return resPoint; + }, + drawPathEdge(canvas, start, end, mWidth) { + canvas.beginPath(); + canvas.strokeStyle = this.controller.getViewColor(); + canvas.moveTo(mWidth / 2 - start.getX(), mWidth / 2 - start.getY()); + canvas.lineTo(mWidth / 2 - end.getX(), mWidth / 2 - end.getY()); + canvas.stroke(); + }, + startAnim() { + this.controller.startViewAnim(3500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStarController.js b/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStarController.js new file mode 100644 index 0000000000000000000000000000000000000000..457ad45e02280016d5c5577d73f68ffc705779b6 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVFivePoiStar/LVFivePoiStarController.js @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVFivePoiStarController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + circleColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getCircleColor() { + return this.circleColor; + } + + setCircleColor(circleColor) { + this.circleColor = circleColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBar.hml b/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBar.hml new file mode 100644 index 0000000000000000000000000000000000000000..996e3ab1764a3639396bf24cb9616dcb503c1d6a --- /dev/null +++ b/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBar.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBar.js b/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBar.js new file mode 100644 index 0000000000000000000000000000000000000000..94650a3745fb9df96ea9ed5a9883ddf7c28ff269 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBar.js @@ -0,0 +1,161 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVFunnyBarController} from '../../component/LVFunnyBar/LVFunnyBarController.js' + +export default { + props: { + controller: { + default: new LVFunnyBarController() + } + }, + data: { + visable2: "visible", + compWidth: 0, + compHeight: 0, + drawHeight: 0, + heightPadding: 0, + wspace: 0, + hspace: 0, + viewColor: "rgb(247,202,42)", + viewColorLeft: "rgb(227,144,11)", + viewColorRight: "rgb(188,91,26)", + }, + onAttached() { + this.viewColor = this.controller.getViewColor() + this.viewColorLeft = this.controller.getViewColorLeft() + this.viewColorRight = this.controller.getViewColorRight() + this.controller.setAnimRepeatMode(true) + this.controller.setIsBack(true) + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.drawHeight = parseInt(this.compWidth / Math.sqrt(3)) + this.heightPadding = (this.compWidth - this.drawHeight) / 2 > 0 ? (this.compWidth - this.drawHeight) / 2 : 0 + this.wspace = this.compWidth / 8 + this.hspace = this.drawHeight / 8 + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + + var leftLong + // 左右都需要绘制3根 + for (var i = 0; i < 3; i++) { + leftLong = this.controller.getAnimValue() * (1 + i / 4); + if (leftLong > 1) { + leftLong = 1; + } + var wlong = this.compWidth / 2 * leftLong - this.wspace / 2; + var hlong = this.drawHeight / 2 * leftLong - this.hspace / 2; + if (wlong < this.wspace / 8 / 8 / 2) { + wlong = this.wspace / 8 / 8 / 2; + } + if (hlong < this.hspace / 8 / 8 / 2) { + hlong = this.wspace / 8 / 8 / 2; + } + + // 左边第一根上面 + ctx.fillStyle = this.viewColor; + ctx.beginPath(); + ctx.moveTo((i + 0.5) * this.wspace, this.drawHeight / 2 + (i * this.hspace) + this.heightPadding); + ctx.lineTo((i + 1) * this.wspace + wlong, this.drawHeight / 2 - this.hspace / 2 + (i * this.hspace) - hlong + this.heightPadding); + ctx.lineTo((i + 1.5) * this.wspace + wlong, this.drawHeight / 2 + (i * this.hspace) - hlong + this.heightPadding); + ctx.lineTo((i + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (i * this.hspace) + this.heightPadding); + ctx.closePath(); + ctx.fill() + if (i == 0) { + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + } + + // 左边第一根左面 + ctx.fillStyle = this.viewColorLeft; + ctx.beginPath(); + ctx.moveTo((i + 0.5) * this.wspace, this.drawHeight / 2 + (i * this.hspace) + this.heightPadding); + ctx.lineTo((i + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (i * this.hspace) + this.heightPadding); + ctx.lineTo((i + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (i * this.hspace) + this.hspace + this.heightPadding); + ctx.lineTo((i + 0.5) * this.wspace, this.drawHeight / 2 + (i * this.hspace) + this.hspace + this.heightPadding); + ctx.closePath(); + ctx.fill() + + // 左边第一根右面 + ctx.fillStyle = this.viewColorRight; + ctx.beginPath(); + ctx.moveTo((i + 1.5) * this.wspace + wlong, this.drawHeight / 2 + (i * this.hspace) - hlong + this.heightPadding); + ctx.lineTo((i + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (i * this.hspace) + this.heightPadding); + ctx.lineTo((i + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (i * this.hspace) + this.hspace + this.heightPadding); + ctx.lineTo((i + 1.5) * this.wspace + wlong, this.drawHeight / 2 + (i * this.hspace) + this.hspace - hlong + this.heightPadding); + ctx.closePath(); + ctx.fill() + + var rightPosition = i; + // 右边第一根上面 + ctx.fillStyle = this.viewColor; + ctx.beginPath(); + ctx.moveTo(this.compWidth - (rightPosition + 1.5) * this.wspace - wlong, this.drawHeight / 2 + (rightPosition * this.hspace) - hlong + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 1) * this.wspace - wlong, this.drawHeight / 2 - this.hspace / 2 + (rightPosition * this.hspace) - hlong + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 0.5) * this.wspace, this.drawHeight / 2 + (rightPosition * this.hspace) + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (rightPosition * this.hspace) + this.heightPadding); + ctx.closePath(); + ctx.fill() + + // 右边第一根左面 + ctx.fillStyle = this.viewColorLeft; + ctx.beginPath(); + ctx.moveTo(this.compWidth - (rightPosition + 1.5) * this.wspace - wlong, this.drawHeight / 2 + (rightPosition * this.hspace) - hlong + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (rightPosition * this.hspace) + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (rightPosition * this.hspace) + this.hspace + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 1.5) * this.wspace - wlong, this.drawHeight / 2 + (rightPosition * this.hspace) + this.hspace - hlong + this.heightPadding); + ctx.closePath(); + ctx.fill() + + // 右边第一根右面 + ctx.fillStyle = this.viewColorRight; + ctx.beginPath(); + ctx.moveTo(this.compWidth - (rightPosition + 0.5) * this.wspace, this.drawHeight / 2 + (rightPosition * this.hspace) + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (rightPosition * this.hspace) + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 1) * this.wspace, this.drawHeight / 2 + this.hspace / 2 + (rightPosition * this.hspace) + this.hspace + this.heightPadding); + ctx.lineTo(this.compWidth - (rightPosition + 0.5) * this.wspace, this.drawHeight / 2 + (rightPosition * this.hspace) + this.hspace + this.heightPadding); + ctx.closePath(); + ctx.fill() + } + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable2 = "visible" + } else { + this.visable2 = "hidden" + } + }, + startAnim() { + this.controller.startViewAnim(500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBarController.js b/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBarController.js new file mode 100644 index 0000000000000000000000000000000000000000..8d2cf7c9434c3485aaad0c6ca40b73f65366d879 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVFunnyBar/LVFunnyBarController.js @@ -0,0 +1,79 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVFunnyBarController extends LVBase { + animValue = 1; + viewColor = 'rgb(247,202,42)'; + viewColorLeft = 'rgb(227,144,11)'; + viewColorRight = 'rgb(188,91,26)'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + getViewColorLeft() { + return this.viewColorLeft; + } + + getViewColorRight() { + return this.viewColorRight; + } + + setViewColor(viewColor) { + if (viewColor.substr(0, 1) == "#") { + viewColor = this.hexToRgb(viewColor) + } + var rgbs = this.getRgb(viewColor) + var red = rgbs[0] + var green = rgbs[1] + var blue = rgbs[2] + + this.viewColor = viewColor; + this.viewColorLeft = "rgb(" + ((red - 60) > 0 ? red - 60 : 0) + "," + ((green - 54) > 0 ? green - 54 : 0) + "," + ((blue - 13) > 0 ? blue - 13 : 0) + ")"; + this.viewColorRight = "rgb(" + ((red - 96) > 0 ? red - 96 : 0) + "," + ((green - 70) > 0 ? green - 70 : 0) + "," + ((blue - 22) > 0 ? blue - 22 : 0) + ")"; + return this; + } + + hexToRgb(hexColor) { + var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; + if (hexColor && reg.test(hexColor)) { + if (hexColor.length === 4) { + var sColorNew = "#"; + for (var i = 1; i < 4; i += 1) { + sColorNew += hexColor.slice(i, i + 1).concat(hexColor.slice(i, i + 1)); + } + hexColor = sColorNew; + } + //处理六位的颜色值 + var sColorChange = []; + for (var i = 1; i < 7; i += 2) { + sColorChange.push(parseInt("0x" + hexColor.slice(i, i + 2))); + } + return "rgb(" + sColorChange.join(",") + ")"; + } else { + return hexColor; + } + } + + getRgb(rgbColor) { + return rgbColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); + } + + OnAnimationUpdate(value) { + this.animValue = value + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVGears/LVGears.hml b/entry/src/main/js/default/common/components/LVGears/LVGears.hml new file mode 100644 index 0000000000000000000000000000000000000000..996e3ab1764a3639396bf24cb9616dcb503c1d6a --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGears/LVGears.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVGears/LVGears.js b/entry/src/main/js/default/common/components/LVGears/LVGears.js new file mode 100644 index 0000000000000000000000000000000000000000..52ae9e0f3720a365a12f3ad61ae278e4d88eb955 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGears/LVGears.js @@ -0,0 +1,127 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVGearsController} from '../../component/LVGears/LVGearsController.js' + +export default { + props: { + controller: { + default: new LVGearsController() + } + }, + data: { + visable2: "visible", + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 0, + mWheelSmallLength: 0, // 小齿轮的齿的长度 + mWheelBigLength: 0, // 大齿轮的齿的长度 + mWheelSmallSpace: 8, // 小齿轮的齿的间隔度数 + mWheelBigSpace: 6, // 大齿轮的齿的间隔度数 + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } else { + this.padding = this.minWidth / 10 + } + this.mWheelSmallLength = this.minWidth / 16 + this.mWheelBigLength = this.minWidth / 20 + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + ctx.strokeStyle = this.controller.getViewColor(); + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + this.drawWheelBig(ctx) + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + this.drawWheelSmall(ctx) + this.drawCircleAndAxle(ctx) + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable2 = "visible" + } else { + this.visable2 = "hidden" + } + }, + drawWheelBig(ctx) { + ctx.lineWidth = 3; + ctx.beginPath(); + for (var i = 0; i < 360; i = i + this.mWheelBigSpace) { + var angle = this.controller.getAnimValue() * this.mWheelBigSpace + i; // clockwise 顺时针 + var x = (this.minWidth / 2 - this.padding + this.mWheelBigLength) * Math.cos(angle * Math.PI / 180); + var y = (this.minWidth / 2 - this.padding + this.mWheelBigLength) * Math.sin(angle * Math.PI / 180); + var x2 = (this.minWidth / 2 - this.padding) * Math.cos(angle * Math.PI / 180); + var y2 = (this.minWidth / 2 - this.padding) * Math.sin(angle * Math.PI / 180); + ctx.moveTo(this.compWidth / 2 - x, this.compHeight / 2 - y); + ctx.lineTo(this.compWidth / 2 - x2, this.compHeight / 2 - y2); + } + ctx.stroke(); + }, + drawWheelSmall(ctx) { + ctx.lineWidth = 1.5; + ctx.beginPath(); + for (var i = 0; i < 360; i = i + this.mWheelSmallSpace) { + var angle = 360 - this.controller.getAnimValue() * this.mWheelSmallSpace + i; // anticlockwise 逆时针 + var x = (this.minWidth / 4 - this.padding / 2) * Math.cos(angle * Math.PI / 180); + var y = (this.minWidth / 4 - this.padding / 2) * Math.sin(angle * Math.PI / 180); + var x2 = (this.minWidth / 4 - this.padding / 2 + this.mWheelSmallLength) * Math.cos(angle * Math.PI / 180); + var y2 = (this.minWidth / 4 - this.padding / 2 + this.mWheelSmallLength) * Math.sin(angle * Math.PI / 180); + ctx.moveTo(this.compWidth / 2 - x, this.compHeight / 2 - y); + ctx.lineTo(this.compWidth / 2 - x2, this.compHeight / 2 - y2); + } + ctx.stroke(); + }, + drawCircleAndAxle(ctx) { + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 2 - this.padding, + -Math.PI, Math.PI); + ctx.moveTo(this.compWidth / 2 - this.minWidth / 4 + this.padding / 2); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 4 - this.padding / 2, + -Math.PI, Math.PI); + for (var i = 0; i < 3; i++) { + var x = (this.minWidth / 2 - this.padding) * Math.cos(i * (360 / 3) * Math.PI / 180); + var y = (this.minWidth / 2 - this.padding) * Math.sin(i * (360 / 3) * Math.PI / 180); + ctx.moveTo(this.compWidth / 2, this.compHeight / 2); + ctx.lineTo(this.compWidth / 2 - x, this.compHeight / 2 - y); + } + ctx.stroke(); + }, + startAnim() { + this.controller.startViewAnim(1000, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVGears/LVGearsController.js b/entry/src/main/js/default/common/components/LVGears/LVGearsController.js new file mode 100644 index 0000000000000000000000000000000000000000..84a2901b0c47ca3aacabd1062a2ee34d6e9b9479 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGears/LVGearsController.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVGearsController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwo.hml b/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwo.hml new file mode 100644 index 0000000000000000000000000000000000000000..4a4893b0ca233473e2aff644a6b2524392591e20 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwo.hml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwo.js b/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwo.js new file mode 100644 index 0000000000000000000000000000000000000000..133a6ae131d37a6ba6e0a84f1de396061a88d2f5 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwo.js @@ -0,0 +1,161 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVGearsTwoController} from '../../component/LVGearsTwo/LVGearsTwoController.js' +import {CanvasRotateUtil} from '../../component/base/CanvasRotateUtil.js' + +export default { + props: { + controller: { + default: new LVGearsTwoController() + } + }, + data: { + visable2: "visible", + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 15, + canvasRotateUtil1: null, + canvasRotateUtil2: null, + mWheelLength: 6, // 齿轮的齿的长度 + mWheelSmallSpace: 8, // 小齿轮的齿的间隔度数 + mWheelBigSpace: 6, // 大齿轮的齿的间隔度数 + hypotenuse: 0, + smallRingCenterX: 0, + smallRingCenterY: 0, + bigRingCenterX: 0, + bigRingCenterY: 0, + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.hypotenuse = this.minWidth * Math.sqrt(2) + this.smallRingCenterX = (this.hypotenuse / 6) * Math.cos(45 * Math.PI / 180) + this.smallRingCenterY = (this.hypotenuse / 6) * Math.sin(45 * Math.PI / 180) + this.bigRingCenterX = (this.hypotenuse / 2) * Math.cos(45 * Math.PI / 180); + this.bigRingCenterY = (this.hypotenuse / 2) * Math.sin(45 * Math.PI / 180); + // 初始化画布旋转工具类 + if (this.canvasRotateUtil1 == null) { + this.canvasRotateUtil1 = new CanvasRotateUtil(this.compWidth, this.compHeight) + this.canvasRotateUtil2 = new CanvasRotateUtil(this.compWidth, this.compHeight) + } + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + var rotate = 180 + // 通过工具类让画布绕中心点旋转 + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.canvasRotateUtil2.rotate(ctx, rotate) + } else { + this.canvasRotateUtil1.rotate(ctx, rotate) + } + + ctx.strokeStyle = this.controller.getViewColor(); + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + this.drawSmallRingAndGear(ctx) + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + this.drawBigRingAndGear(ctx) + this.drawAxle(ctx) + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable2 = "visible" + } else { + this.visable2 = "hidden" + } + }, + drawSmallRingAndGear(ctx) { + ctx.lineWidth = 3; + ctx.beginPath(); + ctx.arc(this.padding + this.smallRingCenterX, this.padding + this.smallRingCenterY, + this.smallRingCenterX, + 0, Math.PI * 2); + var smallCenterX = this.padding + this.smallRingCenterX + var smallCenterY = this.padding + this.smallRingCenterY + var smallR = this.smallRingCenterX / 2 + ctx.moveTo(smallCenterX + smallR, smallCenterY); + ctx.arc(smallCenterX, smallCenterY, smallR, 0, Math.PI * 2); + for (var i = 0; i < 360; i = i + this.mWheelSmallSpace) { + var angle = this.controller.getAnimValue() * this.mWheelSmallSpace + i; + var x3 = (this.smallRingCenterX) * Math.cos(angle * Math.PI / 180); + var y3 = (this.smallRingCenterY) * Math.sin(angle * Math.PI / 180); + var x4 = (this.smallRingCenterX + this.mWheelLength) * Math.cos(angle * Math.PI / 180); + var y4 = (this.smallRingCenterY + this.mWheelLength) * Math.sin(angle * Math.PI / 180); + ctx.moveTo(this.padding + this.smallRingCenterX - x4, this.smallRingCenterY + this.padding - y4); + ctx.lineTo(this.smallRingCenterX + this.padding - x3, this.smallRingCenterY + this.padding - y3); + } + ctx.stroke(); + }, + drawBigRingAndGear(ctx) { + ctx.lineWidth = 4; + var strokeWidth = ctx.lineWidth / 4; + ctx.beginPath(); + ctx.arc(this.bigRingCenterX + this.padding + this.mWheelLength * 2 + strokeWidth, this.bigRingCenterY + this.padding + this.mWheelLength * 2 + strokeWidth, + this.bigRingCenterX - this.smallRingCenterX - strokeWidth, + 0, Math.PI * 2); + var bigCenterX = this.bigRingCenterX + this.padding + this.mWheelLength * 2 + strokeWidth + var bigCenterY = this.bigRingCenterY + this.padding + this.mWheelLength * 2 + strokeWidth + var bigR = (this.bigRingCenterX - this.smallRingCenterX) / 2 - strokeWidth + ctx.moveTo(bigCenterX + bigR, bigCenterY); + ctx.arc(bigCenterX, bigCenterY, bigR, 0, Math.PI * 2); + for (var i = 0; i < 360; i = i + this.mWheelBigSpace) { + var angle = 360 - (this.controller.getAnimValue() * this.mWheelBigSpace + i); + var x3 = (this.bigRingCenterX - this.smallRingCenterX) * Math.cos(angle * Math.PI / 180); + var y3 = (this.bigRingCenterY - this.smallRingCenterY) * Math.sin(angle * Math.PI / 180); + var x4 = (this.bigRingCenterX - this.smallRingCenterX + this.mWheelLength) * Math.cos(angle * Math.PI / 180); + var y4 = (this.bigRingCenterY - this.smallRingCenterY + this.mWheelLength) * Math.sin(angle * Math.PI / 180); + ctx.moveTo(this.bigRingCenterX + this.padding - x4 + this.mWheelLength * 2 + strokeWidth, this.bigRingCenterY + this.padding - y4 + this.mWheelLength * 2 + strokeWidth); + ctx.lineTo(this.bigRingCenterX + this.padding - x3 + this.mWheelLength * 2 + strokeWidth, this.bigRingCenterY + this.padding - y3 + this.mWheelLength * 2 + strokeWidth); + } + ctx.stroke(); + }, + drawAxle(ctx) { + ctx.lineWidth = 4; + ctx.beginPath(); + for (var i = 0; i < 3; i++) { + var x3 = (this.smallRingCenterX) * Math.cos(i * (360 / 3) * Math.PI / 180); + var y3 = (this.smallRingCenterY) * Math.sin(i * (360 / 3) * Math.PI / 180); + ctx.moveTo(this.padding + this.smallRingCenterX, this.padding + this.smallRingCenterY); + ctx.lineTo(this.padding + this.smallRingCenterX - x3, this.padding + this.smallRingCenterY - y3); + } + for (var i = 0; i < 3; i++) { + var x3 = (this.bigRingCenterX - this.smallRingCenterX) * Math.cos(i * (360 / 3) * Math.PI / 180); + var y3 = (this.bigRingCenterY - this.smallRingCenterY) * Math.sin(i * (360 / 3) * Math.PI / 180); + ctx.moveTo(this.bigRingCenterX + this.padding + this.mWheelLength * 2, this.bigRingCenterY + this.padding + this.mWheelLength * 2); + ctx.lineTo(this.bigRingCenterX + this.padding + this.mWheelLength * 2 - x3, this.bigRingCenterY + this.padding + this.mWheelLength * 2 - y3); + } + ctx.stroke(); + }, + startAnim() { + this.controller.startViewAnim(1000, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwoController.js b/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwoController.js new file mode 100644 index 0000000000000000000000000000000000000000..94e87980ceba71226ff32c80069416434a577a97 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGearsTwo/LVGearsTwoController.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVGearsTwoController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVGhost/LVGhost.hml b/entry/src/main/js/default/common/components/LVGhost/LVGhost.hml new file mode 100644 index 0000000000000000000000000000000000000000..5fa4f5373d9ad851193fcc8127a0d60af8d64040 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGhost/LVGhost.hml @@ -0,0 +1,4 @@ + + + + diff --git a/entry/src/main/js/default/common/components/LVGhost/LVGhost.js b/entry/src/main/js/default/common/components/LVGhost/LVGhost.js new file mode 100644 index 0000000000000000000000000000000000000000..f239214985331f5f9ccd2c98621dc83631a7a2fc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGhost/LVGhost.js @@ -0,0 +1,181 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVGhostController} from '../../component/LVGhost/LVGhostController.js' +import {Rect} from '../../component/base/Rect.js' + +export default { + props: { + controller: { + default: new LVGhostController() + } + }, + data: { + visable1: "hidden", + visable2: "visible", + compWidth: 0, + compHeight: 0, + padding: 10, + mskirtH: 0, + wspace: 10, + hspace: 10, + viewColor: "white", + eyesColor: "#DC000000", + shadowColor: "#3C000000", + rectFGhost: new Rect(), + rectFGhostShadow: new Rect(), + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + this.viewColor = this.controller.getViewColor() + this.eyesColor = this.controller.getEyesColor() + this.controller.setAnimRepeatMode(true) + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.mskirtH = parseInt(this.compWidth / 40) + this.onDraw() + }, + onDraw() { + // 获取画布控件,使用两层画布，解决绘制的东西闪现的问题 + var ctx = null; + if (this.controller.getAnimDrawTime() % 2 == 0) { + ctx = this.$refs.canvas2.getContext('2d', { + antialias: true + }) + } else { + ctx = this.$refs.canvas1.getContext('2d', { + antialias: true + }) + } + + if (!this.controller.getAnimIsRunning()) { + this.wspace = 10 + } else if (this.controller.getIsBack()) { + this.wspace = 22 + } else { + this.wspace = -2 + } + var mAnimatedValue = this.controller.getAnimValue() + var distance = (this.compWidth - 2 * this.padding) / 3 * 2 * mAnimatedValue; + this.rectFGhost.left = this.padding + distance; + this.rectFGhost.right = (this.compWidth - 2 * this.padding) / 3 + distance; + var moveY; + var moveYMax = this.compHeight / 4 / 2; + var shadowHighMax = 5; + var shadowHigh = 0; + if (mAnimatedValue <= 0.25) { + moveY = moveYMax / 0.25 * mAnimatedValue; + this.rectFGhost.top = moveY; + this.rectFGhost.bottom = this.compHeight / 4 * 3 + moveY; + shadowHigh = shadowHighMax / 0.25 * mAnimatedValue; + } else if (mAnimatedValue > 0.25 && mAnimatedValue <= 0.5) { + moveY = moveYMax / 0.25 * (mAnimatedValue - 0.25); + this.rectFGhost.top = moveYMax - moveY; + this.rectFGhost.bottom = this.compHeight / 4 * 3 + moveYMax - moveY; + shadowHigh = shadowHighMax - shadowHighMax / 0.25 * (mAnimatedValue - 0.25); + } else if (mAnimatedValue > 0.5 && mAnimatedValue <= 0.75) { + moveY = moveYMax / 0.25 * (mAnimatedValue - 0.5); + this.rectFGhost.top = moveY; + this.rectFGhost.bottom = this.compHeight / 4 * 3 + moveY; + shadowHigh = shadowHighMax / 0.25 * (mAnimatedValue - 0.5); + } else if (mAnimatedValue > 0.75 && mAnimatedValue <= 1) { + moveY = moveYMax / 0.25 * (mAnimatedValue - 0.75); + this.rectFGhost.top = moveYMax - moveY; + this.rectFGhost.bottom = this.compHeight / 4 * 3 + moveYMax - moveY; + shadowHigh = shadowHighMax - shadowHighMax / 0.25 * (mAnimatedValue - 0.75); + } + this.rectFGhostShadow.top = this.compHeight - 25 + shadowHigh; + this.rectFGhostShadow.bottom = this.compHeight - 5 - shadowHigh; + this.rectFGhostShadow.left = this.rectFGhost.left + 5 + shadowHigh * 3; + this.rectFGhostShadow.right = this.rectFGhost.right - 5 - shadowHigh * 3; + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + this.drawShadow(ctx); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + this.drawHead(ctx); + this.drawBody(ctx); + this.drawEyes(ctx); + + if (this.controller.getAnimDrawTime() % 2 == 0) { + this.visable1 = "hidden" + this.visable2 = "visible" + } else { + this.visable1 = "visible" + this.visable2 = "hidden" + } + }, + drawShadow(ctx) { + ctx.fillStyle = this.shadowColor + ctx.beginPath(); + ctx.ellipse(this.rectFGhostShadow.getCenterX(), this.rectFGhostShadow.getCenterY(), + this.rectFGhostShadow.getWidth() / 2, this.rectFGhostShadow.getHeight() / 2, + 0, 0, Math.PI * 2, 0); + ctx.fill(); + }, + drawHead(ctx) { + ctx.fillStyle = this.viewColor + ctx.beginPath(); + ctx.arc(this.rectFGhost.getCenterX(), this.rectFGhost.getWidth() / 2 + this.rectFGhost.top, + this.rectFGhost.getWidth() / 2 - 15, + 0, Math.PI * 2); + }, + drawBody(ctx) { + var x = (this.rectFGhost.getWidth() / 2 - 15) * Math.cos(5 * Math.PI / 180); + var y = (this.rectFGhost.getWidth() / 2 - 15) * Math.sin(5 * Math.PI / 180); + var x2 = (this.rectFGhost.getWidth() / 2 - 15) * Math.cos(175 * Math.PI / 180); + var y2 = (this.rectFGhost.getWidth() / 2 - 15) * Math.sin(175 * Math.PI / 180); + + ctx.moveTo(this.rectFGhost.getCenterX() - x, this.rectFGhost.getWidth() / 2 - y + this.rectFGhost.top); + ctx.lineTo(this.rectFGhost.getCenterX() - x2, this.rectFGhost.getWidth() / 2 - y2 + this.rectFGhost.top); + ctx.quadraticCurveTo(this.rectFGhost.right + this.wspace / 2, this.rectFGhost.bottom, + this.rectFGhost.right - this.wspace, this.rectFGhost.bottom - this.hspace); + var m = (this.rectFGhost.getWidth() - 2 * this.wspace) / 7; + for (var i = 0; i < 7; i++) { + if (i % 2 == 0) { + ctx.quadraticCurveTo(this.rectFGhost.right - this.wspace - m * i - (m / 2), this.rectFGhost.bottom - this.hspace - this.mskirtH, + this.rectFGhost.right - this.wspace - (m * (i + 1)), this.rectFGhost.bottom - this.hspace); + } else { + ctx.quadraticCurveTo(this.rectFGhost.right - this.wspace - m * i - (m / 2), this.rectFGhost.bottom - this.hspace + this.mskirtH, + this.rectFGhost.right - this.wspace - (m * (i + 1)), this.rectFGhost.bottom - this.hspace); + } + } + ctx.quadraticCurveTo(this.rectFGhost.left - 5, this.rectFGhost.bottom, + this.rectFGhost.left + this.rectFGhost.getWidth() / 2 - x, this.rectFGhost.getWidth() / 2 - y + this.rectFGhost.top); + ctx.closePath(); + ctx.fill(); + }, + drawEyes(ctx) { + ctx.fillStyle = this.eyesColor + ctx.beginPath(); + ctx.arc(this.rectFGhost.getCenterX() - this.mskirtH * 3 / 2 + this.mskirtH * (this.controller.getIsBack() ? -1 : 1), + this.rectFGhost.getWidth() / 2 + this.mskirtH + this.rectFGhost.top, + this.mskirtH * 0.9, 0, Math.PI * 2); + ctx.arc(this.rectFGhost.left + this.rectFGhost.getWidth() / 2 + this.mskirtH * 3 / 2 + this.mskirtH * (this.controller.getIsBack() ? -1 : 1), + this.rectFGhost.getWidth() / 2 + this.mskirtH + this.rectFGhost.top, + this.mskirtH * 0.9, 0, Math.PI * 2); + ctx.fill(); + }, + startAnim() { + this.controller.startViewAnim(500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVGhost/LVGhostController.js b/entry/src/main/js/default/common/components/LVGhost/LVGhostController.js new file mode 100644 index 0000000000000000000000000000000000000000..ee4471f7c80629f5211d0e5e2f2a23df092af5c3 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVGhost/LVGhostController.js @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVGhostController extends LVBase { + animValue = 0; + viewColor = 'white'; + eyesColor = '#DC000000'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getEyesColor() { + return this.eyesColor; + } + + setEyesColor(eyesColor) { + this.eyesColor = eyesColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value + } + + OnAnimationStop() { + this.animValue = 0 + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVImg/LVImg.hml b/entry/src/main/js/default/common/components/LVImg/LVImg.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVImg/LVImg.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVImg/LVImg.js b/entry/src/main/js/default/common/components/LVImg/LVImg.js new file mode 100644 index 0000000000000000000000000000000000000000..4bd28e26ad4e97b5565bf7f174d72e21f3b675a0 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVImg/LVImg.js @@ -0,0 +1,77 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVImgController} from '../../component/LVImg/LVImgController.js' +import {CanvasRotateUtil} from '../../component/base/CanvasRotateUtil.js' + +export default { + props: { + controller: { + default: new LVImgController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 0, + imgsrc: '/common/images/loading_black.png', + canvasRotateUtil: null + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } else { + this.padding = this.minWidth / 6 + } + if (this.controller.getImgPath() != '') { + this.imgsrc = this.controller.getImgPath() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + if (this.canvasRotateUtil == null) { + // 初始化画布旋转工具类 + this.canvasRotateUtil = new CanvasRotateUtil(this.compWidth, this.compHeight) + } + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + + // 通过工具类让画布绕中心点旋转 + this.canvasRotateUtil.rotate(ctx, this.controller.getStartAngle()) + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + this.drawImage(ctx) + }, + drawImage(ctx) { + var img = new Image(); + img.src = this.imgsrc; + ctx.drawImage(img, (this.compWidth - this.minWidth) / 2 + this.padding, (this.compHeight - this.minWidth) / 2 + this.padding, + this.minWidth - this.padding * 2, this.minWidth - this.padding * 2); + }, + startAnim() { + this.controller.startViewAnim(1500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVImg/LVImgController.js b/entry/src/main/js/default/common/components/LVImg/LVImgController.js new file mode 100644 index 0000000000000000000000000000000000000000..5b3aaa51d64e467efae605ba70a64fc68862811f --- /dev/null +++ b/entry/src/main/js/default/common/components/LVImg/LVImgController.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVImgController extends LVBase { + startAngle = 0; + imgPath = ''; + + getStartAngle() { + return this.startAngle; + } + + getImgPath() { + return this.imgPath; + } + + setImgPath(imgPath) { + this.imgPath = imgPath; + return this; + } + + OnAnimationUpdate(value) { + this.startAngle = value * 360; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithText.hml b/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithText.hml new file mode 100644 index 0000000000000000000000000000000000000000..a77b12bdacd24754bea34ca8904cbe222776f36f --- /dev/null +++ b/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithText.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithText.js b/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithText.js new file mode 100644 index 0000000000000000000000000000000000000000..159ec175d3d6a9a9aae948adc758c92e9932fe4e --- /dev/null +++ b/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithText.js @@ -0,0 +1,86 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVLineWithTextController} from '../../component/LVLineWithText/LVLineWithTextController.js' + +export default { + props: { + controller: { + default: new LVLineWithTextController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + padding: 5, + lineWidth: 3, + textSize: 30, + mVlaue: 0 + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + if (this.controller.getLineWidth() != -1) { + this.lineWidth = this.controller.getLineWidth() + } + if (this.controller.getTextSize() != -1) { + this.textSize = this.controller.getTextSize() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + ctx.globalCompositeOperation = 'copy'; + ctx.strokeStyle = this.controller.getViewColor() + ctx.fillStyle = this.controller.getTextColor(); + ctx.lineWidth = this.lineWidth; + ctx.textBaseline = 'middle'; + ctx.font = this.textSize + 'px sans-serif'; + + var text = this.mVlaue + "%"; + var textWidth = ctx.measureText(text).width; + + if (this.mVlaue == 0) { + ctx.beginPath() + ctx.moveTo(this.padding + textWidth, this.compHeight / 2); + ctx.lineTo(this.compWidth - this.padding, this.compHeight / 2); + ctx.stroke(); + ctx.fillText(text, this.padding, this.compHeight / 2); + } else if (this.mVlaue >= 100) { + ctx.beginPath() + ctx.moveTo(this.padding, this.compHeight / 2); + ctx.lineTo(this.compWidth - this.padding - textWidth, this.compHeight / 2); + ctx.stroke(); + ctx.fillText(text, this.compWidth - this.padding - textWidth, this.compHeight / 2); + } else { + var width = this.compWidth - 2 * this.padding - textWidth; + ctx.beginPath() + ctx.moveTo(this.padding, this.compHeight / 2); + ctx.lineTo(parseInt(this.padding) + parseInt(width * this.mVlaue / 100), this.compHeight / 2); + ctx.moveTo(parseInt(this.padding) + parseInt(width * this.mVlaue / 100) + textWidth, this.compHeight / 2); + ctx.lineTo(this.compWidth - this.padding, this.compHeight / 2); + ctx.stroke(); + ctx.fillText(text, parseInt(this.padding) + parseInt(width * this.mVlaue / 100), this.compHeight / 2); + } + }, + setValue(value) { + this.mVlaue = parseInt(value); + this.onDraw() + } +} diff --git a/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithTextController.js b/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithTextController.js new file mode 100644 index 0000000000000000000000000000000000000000..c762d584712dabd704a216a30222348e22edc0c5 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVLineWithText/LVLineWithTextController.js @@ -0,0 +1,67 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +export class LVLineWithTextController { + padding = -1; + lineWidth = -1; + textSize = -1; + viewColor = '#FFFFFF'; + textColor = '#FFFFFF'; + animValue = 0; + + constructor() { + } + + getPadding() { + return this.padding; + } + + setPadding(padding) { + this.padding = padding; + return this; + } + + getLineWidth() { + return this.lineWidth; + } + + setLineWidth(lineWidth) { + this.lineWidth = lineWidth; + return this; + } + + getTextSize() { + return this.textSize; + } + + setTextSize(textSize) { + this.textSize = textSize; + return this; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getTextColor() { + return this.textColor; + } + + setTextColor(textColor) { + this.textColor = textColor; + return this; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVNews/LVNews.hml b/entry/src/main/js/default/common/components/LVNews/LVNews.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVNews/LVNews.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVNews/LVNews.js b/entry/src/main/js/default/common/components/LVNews/LVNews.js new file mode 100644 index 0000000000000000000000000000000000000000..1d1407e12c7c0f1e2906bf2c6771af1acc27106c --- /dev/null +++ b/entry/src/main/js/default/common/components/LVNews/LVNews.js @@ -0,0 +1,148 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVNewsController} from '../../component/LVNews/LVNewsController.js' +import {Rect} from '../../component/base/Rect.js' + +export default { + props: { + controller: { + default: new LVNewsController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 5, + cornerRadius: 9, + marggingSquareH: 0, + marggingSquareV: 0, + marggingLineH: 0, + marggingLineV: 0, + rectFSquare: new Rect(), + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + ctx.lineWidth = 3 + ctx.strokeStyle = this.controller.getViewColor(); + ctx.fillStyle = this.controller.getViewColor(); + ctx.globalAlpha = 1; + ctx.lineCap = 'round'; + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + ctx.beginPath() + // 绘制大边框 + this.drawBigSquare(ctx); + // 绘制内部的小方框的边 + this.drawContentSquare(ctx); + // 绘制内部的六条线 + this.drawSixLine(ctx); + ctx.stroke() + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + + // 绘制小方框里的填充色 + ctx.globalAlpha = 0.3; + ctx.fillRect(this.rectFSquare.left, this.rectFSquare.top, this.rectFSquare.getWidth(), this.rectFSquare.getHeight()); + }, + drawBigSquare(ctx) { + ctx.arc(this.padding + this.cornerRadius, this.padding + this.cornerRadius, this.cornerRadius, -Math.PI, -Math.PI / 2) + ctx.lineTo(this.compWidth - this.padding - this.cornerRadius, this.padding) + ctx.arc(this.compWidth - this.padding - this.cornerRadius, this.padding + this.cornerRadius, this.cornerRadius, -Math.PI / 2, 0) + ctx.lineTo(this.compWidth - this.padding, this.compHeight - this.padding - this.cornerRadius) + ctx.arc(this.compWidth - this.padding - this.cornerRadius, this.compHeight - this.padding - this.cornerRadius, this.cornerRadius, 0, Math.PI / 2) + ctx.lineTo(this.padding + this.cornerRadius, this.compHeight - this.padding) + ctx.arc(this.padding + this.cornerRadius, this.compHeight - this.padding - this.cornerRadius, this.cornerRadius, Math.PI / 2, Math.PI) + ctx.lineTo(this.padding, this.padding + this.cornerRadius) + }, + drawContentSquare(ctx) { + if (this.controller.getStep() == 1) { + this.marggingSquareH = 0 + (this.compWidth / 2 - this.cornerRadius) * this.controller.getAnimValue(); + this.marggingSquareV = 0; + this.marggingLineH = 0 + (this.compWidth / 2 - this.cornerRadius) * this.controller.getAnimValue(); + this.marggingLineV = 0; + } else if (this.controller.getStep() == 2) { + this.marggingSquareH = this.compWidth / 2 - this.cornerRadius; + this.marggingSquareV = 0 + (this.compWidth / 2 - this.cornerRadius) * this.controller.getAnimValue(); + this.marggingLineH = this.compWidth / 2 - this.cornerRadius; + this.marggingLineV = 0 + (-this.compWidth / 2 + this.cornerRadius) * this.controller.getAnimValue(); + } else if (this.controller.getStep() == 3) { + this.marggingSquareH = (this.compWidth / 2 - this.cornerRadius) - (this.compWidth / 2 - this.cornerRadius) * this.controller.getAnimValue(); + this.marggingSquareV = this.compWidth / 2 - this.cornerRadius; + this.marggingLineH = (this.compWidth / 2 - this.cornerRadius) - (this.compWidth / 2 - this.cornerRadius) * this.controller.getAnimValue(); + this.marggingLineV = -this.compWidth / 2 + this.cornerRadius; + } else if (this.controller.getStep() == 4) { + this.marggingSquareH = 0; + this.marggingSquareV = (this.compWidth / 2 - this.cornerRadius) - (this.compWidth / 2 - this.cornerRadius) * this.controller.getAnimValue(); + this.marggingLineH = 0; + this.marggingLineV = (-this.compWidth / 2 + this.cornerRadius) - (-this.compWidth / 2 + this.cornerRadius) * this.controller.getAnimValue(); + } + this.rectFSquare.top = this.padding + this.cornerRadius + this.marggingSquareV; + this.rectFSquare.left = this.padding + this.cornerRadius + this.marggingSquareH; + this.rectFSquare.bottom = this.compWidth / 2 - this.padding + this.marggingSquareV; + this.rectFSquare.right = this.compWidth / 2 - this.padding + this.marggingSquareH; + ctx.moveTo(this.rectFSquare.left, this.rectFSquare.top) + ctx.lineTo(this.rectFSquare.right, this.rectFSquare.top) + ctx.lineTo(this.rectFSquare.right, this.rectFSquare.bottom) + ctx.lineTo(this.rectFSquare.left, this.rectFSquare.bottom) + ctx.lineTo(this.rectFSquare.left, this.rectFSquare.top) + }, + drawSixLine(ctx) { + var line_width_short = (this.compWidth - this.padding - this.cornerRadius - this.marggingLineH) - + (this.compWidth / 2 + this.padding + this.cornerRadius / 2 - this.marggingLineH); + var line_width_long = (this.compWidth - this.padding - this.cornerRadius) - (this.padding + this.cornerRadius); + this.drawShortLine(ctx, line_width_short, 16, 1); + this.drawShortLine(ctx, line_width_short, 16, 2); + this.drawShortLine(ctx, line_width_short, 16, 3); + this.drawlongLine(ctx, line_width_long, 16, 4); + this.drawlongLine(ctx, line_width_long, 16, 5); + this.drawlongLine(ctx, line_width_long, 16, 6); + }, + drawShortLine(ctx, line_width_short, value, positon) { + positon = positon - 1; + ctx.moveTo(this.compWidth / 2 + this.padding + this.cornerRadius / 2 - this.marggingLineH, + this.padding + this.cornerRadius + this.cornerRadius - this.marggingLineV + this.rectFSquare.getHeight() / 3 * positon); + ctx.lineTo(this.compWidth / 2 + this.padding + this.cornerRadius / 2 - this.marggingLineH + line_width_short / 16.0 * value, + this.padding + this.cornerRadius + this.cornerRadius - this.marggingLineV + this.rectFSquare.getHeight() / 3 * positon); + }, + drawlongLine(ctx, line_width_long, value, positon) { + positon = positon - 4; + ctx.moveTo(this.padding + this.cornerRadius, + this.padding + this.cornerRadius + this.rectFSquare.getHeight() / 3 * positon + this.compWidth / 2 + this.marggingLineV); + ctx.lineTo(this.padding + this.cornerRadius + line_width_long / 16.0 * (value), + this.padding + this.cornerRadius + this.rectFSquare.getHeight() / 3 * positon + this.compWidth / 2 + this.marggingLineV); + }, + startAnim() { + this.controller.startViewAnim(500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVNews/LVNewsController.js b/entry/src/main/js/default/common/components/LVNews/LVNewsController.js new file mode 100644 index 0000000000000000000000000000000000000000..a948b1c5db5b9be231fa72589e65f7e14d7c1cc3 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVNews/LVNewsController.js @@ -0,0 +1,52 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVNewsController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + mStep = 1; + + getAnimValue() { + return this.animValue; + } + + getStep() { + return this.mStep; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + if (this.animValue > 0 && this.animValue <= 0.25) { + this.mStep = 1; + } else if (this.animValue > 0.25 && this.animValue <= 0.5) { + this.mStep = 2; + this.animValue = this.animValue - 0.25; + } else if (this.animValue > 0.5 && this.animValue <= 0.75) { + this.mStep = 3; + this.animValue = this.animValue - 0.5; + } else if (this.animValue > 0.75 && this.animValue <= 1.0) { + this.mStep = 4; + this.animValue = this.animValue - 0.75; + } + this.animValue = this.animValue / 0.25 + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBall.hml b/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBall.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBall.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBall.js b/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBall.js new file mode 100644 index 0000000000000000000000000000000000000000..62f64a9963cd6d2ac06b06146473d6bf4fc2851e --- /dev/null +++ b/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBall.js @@ -0,0 +1,106 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVPlayBallController} from '../../component/LVPlayBall/LVPlayBallController.js' + +export default { + props: { + controller: { + default: new LVPlayBallController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 5, + mRadius: 9, + mStrokeWidth: 2, + mRadiusBall: 12, + quadToStart: 0, + ballY: 0 + }, + onAttached() { + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + + var animValue = this.controller.getAnimValue() + if (animValue == 0) { + this.quadToStart = this.compHeight / 2; + this.ballY = this.compHeight / 2; + } else { + if (animValue > 0.75) { + this.quadToStart = this.compHeight / 2 - (1 - animValue) * this.compHeight / 3; + } else { + this.quadToStart = this.compHeight / 2 + (1 - animValue) * this.compHeight / 3; + } + if (animValue > 0.35) { + this.ballY = this.compHeight / 2 - (this.compHeight / 2 * animValue); + } else { + this.ballY = this.compHeight / 2 + (this.compHeight / 6 * animValue); + } + } + + ctx.lineWidth = this.mStrokeWidth; + ctx.strokeStyle = this.controller.getViewColor(); + ctx.fillStyle = this.controller.getBallColor(); + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + ctx.beginPath(); + ctx.arc(this.padding + this.mRadius + this.mStrokeWidth, this.compHeight / 2, // 圆心 + this.mRadius, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.moveTo(this.padding + this.mRadius * 2 + this.mStrokeWidth, this.compHeight / 2); + ctx.quadraticCurveTo(this.compWidth / 2, this.quadToStart, this.compWidth - this.padding - this.mRadius * 2 - this.mStrokeWidth, this.compHeight / 2); + ctx.arc(this.compWidth - this.padding - this.mRadius - this.mStrokeWidth, this.compHeight / 2, // 圆心 + this.mRadius, // 半径 + -Math.PI, Math.PI); // 起始点和绘制弧度 + ctx.stroke(); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + + ctx.beginPath(); + if (this.ballY - this.mRadiusBall > this.mRadiusBall) { + ctx.arc(this.compWidth / 2, this.ballY - this.mRadiusBall, // 圆心 + this.mRadiusBall, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + } else { + ctx.arc(this.compWidth / 2, this.mRadiusBall, // 圆心 + this.mRadiusBall, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + } + ctx.fill(); + + }, + startAnim() { + this.controller.startViewAnim(500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBallController.js b/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBallController.js new file mode 100644 index 0000000000000000000000000000000000000000..886516ab559e6d904e6f8310229b2d1853713dee --- /dev/null +++ b/entry/src/main/js/default/common/components/LVPlayBall/LVPlayBallController.js @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVPlayBallController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + ballColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + getBallColor() { + return this.ballColor; + } + + setBallColor(ballColor) { + this.ballColor = ballColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } + + OnAnimationStop() { + this.animValue = 0; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVSmile/LVSmile.hml b/entry/src/main/js/default/common/components/LVSmile/LVSmile.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVSmile/LVSmile.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVSmile/LVSmile.js b/entry/src/main/js/default/common/components/LVSmile/LVSmile.js new file mode 100644 index 0000000000000000000000000000000000000000..c8589dd1e92e02ff934e3fc67b155e6b521e4aca --- /dev/null +++ b/entry/src/main/js/default/common/components/LVSmile/LVSmile.js @@ -0,0 +1,91 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVSmileController} from '../../component/LVSmile/LVSmileController.js' + +export default { + props: { + controller: { + default: new LVSmileController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + minWidth: 0, + padding: 0, + mEyeWidth: 0, + isSmile: true, + startAngle: 0 + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + if (this.controller.getPadding() != -1) { + this.padding = this.controller.getPadding() + } else { + this.padding = this.minWidth / 5 + } + this.mEyeWidth = this.minWidth / 15 + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + + if (this.controller.getAnimValue() < 0.5 && this.controller.getAnimValue() > 0) { + this.isSmile = false; + this.startAngle = 720 * this.controller.getAnimValue(); + } else { + this.isSmile = true; + this.startAngle = 720; + } + + ctx.strokeStyle = this.controller.getViewColor(); + ctx.fillStyle = this.controller.getViewColor(); + ctx.lineCap = 'round' + ctx.lineWidth = this.minWidth / 25; + + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + if (this.isSmile) { + ctx.beginPath(); + ctx.arc((this.compWidth - this.minWidth) / 2 + this.padding + this.mEyeWidth * 1.5, (this.compHeight - this.minWidth) / 2 + this.compHeight / 3, // 圆心 + this.mEyeWidth, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.moveTo(this.compWidth - this.padding - this.mEyeWidth * 0.5 - (this.compWidth - this.minWidth) / 2, (this.compHeight - this.minWidth) / 2 + this.compHeight / 3,) + ctx.arc(this.compWidth - this.padding - this.mEyeWidth * 1.5 - (this.compWidth - this.minWidth) / 2, (this.compHeight - this.minWidth) / 2 + this.compHeight / 3, // 圆心 + this.mEyeWidth, // 半径 + 0, Math.PI * 2); // 起始点和绘制弧度 + ctx.fill(); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + } + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2, + this.minWidth / 2 - this.padding - ctx.lineWidth / 2, + this.startAngle / 360 * Math.PI * 2, (this.startAngle + 180) / 360 * Math.PI * 2); + ctx.stroke(); + + }, + startAnim() { + this.controller.startViewAnim(1000, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVSmile/LVSmileController.js b/entry/src/main/js/default/common/components/LVSmile/LVSmileController.js new file mode 100644 index 0000000000000000000000000000000000000000..0a5e9c00715cfc4cd535ec020b5ae4de97604481 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVSmile/LVSmileController.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVSmileController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/LVWifi/LVWifi.hml b/entry/src/main/js/default/common/components/LVWifi/LVWifi.hml new file mode 100644 index 0000000000000000000000000000000000000000..ab37dfc710eb27a724c3b25a114205aee32233cc --- /dev/null +++ b/entry/src/main/js/default/common/components/LVWifi/LVWifi.hml @@ -0,0 +1,3 @@ + + + diff --git a/entry/src/main/js/default/common/components/LVWifi/LVWifi.js b/entry/src/main/js/default/common/components/LVWifi/LVWifi.js new file mode 100644 index 0000000000000000000000000000000000000000..39a6d489c48fa58c963b37e49877e633ba9cca07 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVWifi/LVWifi.js @@ -0,0 +1,91 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVWifiController} from '../../component/LVWifi/LVWifiController.js' + +export default { + props: { + controller: { + default: new LVWifiController() + } + }, + data: { + compWidth: 0, + compHeight: 0, + minWidth: 0, + signalSize: 4 + }, + onPageShow() { + this.compWidth = parseInt(this.$refs.stack_id.getBoundingClientRect().width) + this.compHeight = parseInt(this.$refs.stack_id.getBoundingClientRect().height) + this.minWidth = Math.min(this.compWidth, this.compHeight) + this.onDraw() + }, + onDraw() { + // 获取画布控件 + const ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }) + ctx.lineWidth = this.minWidth / this.signalSize / 8 + ctx.strokeStyle = this.controller.getViewColor(); + ctx.fillStyle = this.controller.getViewColor(); + + var signalRadius = this.minWidth / 2 / this.signalSize; + + if (this.controller.getAnimValue() == 0) { // 初始状态绘制 + for (var i = 0; i < this.signalSize; i++) { + var radius = signalRadius * (i + 1); + if (i == 0) { + this.drawFirst(ctx, radius); + } else { + this.drawOthers(ctx, radius); + } + } + } else { // 动画开始后绘制 + var item = parseInt(this.controller.getAnimValue() / (1 / this.signalSize)) + 1 + var radius = signalRadius * item; + if (item == 1) { + // 忽略上一次的绘制结果，只显示下面绘制的内容 + ctx.globalCompositeOperation = 'copy'; + this.drawFirst(ctx, radius); + // 切换回默认显示模式，否则上面绘制的图像将不显示 + ctx.globalCompositeOperation = 'source-over'; + } else { + this.drawOthers(ctx, radius); + } + } + }, + drawFirst(ctx, radius) { + ctx.beginPath(); + ctx.moveTo(this.compWidth / 2, this.compHeight / 2 + this.minWidth / this.signalSize); + ctx.arc(this.compWidth / 2, this.compHeight / 2 + this.minWidth / this.signalSize, + radius, + -135 / 360 * Math.PI * 2, (-45) / 360 * Math.PI * 2); + ctx.closePath(); + ctx.fill(); + }, + drawOthers(ctx, radius) { + ctx.beginPath(); + ctx.arc(this.compWidth / 2, this.compHeight / 2 + this.minWidth / this.signalSize, + radius, + -135 / 360 * Math.PI * 2, (-45) / 360 * Math.PI * 2); + ctx.stroke(); + }, + startAnim() { + this.controller.startViewAnim(1500, this.onDraw) + }, + startAnimWithTime(time) { + this.controller.startViewAnim(time, this.onDraw) + }, + stopAnim() { + this.controller.stopViewAnim(this.onDraw) + }, +} diff --git a/entry/src/main/js/default/common/components/LVWifi/LVWifiController.js b/entry/src/main/js/default/common/components/LVWifi/LVWifiController.js new file mode 100644 index 0000000000000000000000000000000000000000..8cc5f458eba3d1f3e8477545fed5cc4ce71c0f07 --- /dev/null +++ b/entry/src/main/js/default/common/components/LVWifi/LVWifiController.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import {LVBase} from '../base/LVBase.js' + +export class LVWifiController extends LVBase { + animValue = 0; + viewColor = '#FFFFFF'; + + getAnimValue() { + return this.animValue; + } + + getViewColor() { + return this.viewColor; + } + + setViewColor(viewColor) { + this.viewColor = viewColor; + return this; + } + + OnAnimationUpdate(value) { + this.animValue = value; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/base/CanvasRotateUtil.js b/entry/src/main/js/default/common/components/base/CanvasRotateUtil.js new file mode 100644 index 0000000000000000000000000000000000000000..37b7dc1435f5621f2a8a80f742455e8699b51e79 --- /dev/null +++ b/entry/src/main/js/default/common/components/base/CanvasRotateUtil.js @@ -0,0 +1,49 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +export class CanvasRotateUtil { + radius = 0 + startAngled = 0 + startCenterX = 0 + startCenterY = 0 + hasRotate= 0 + hasTranslateX= 0 + hasTranslateY= 0 + + constructor(ctxWidth, ctxHeight) { + this.radius = Math.sqrt(ctxWidth * ctxWidth / 4 + ctxHeight * ctxHeight / 4) + this.startAngled = Math.atan(ctxHeight / ctxWidth) * 180 / Math.PI + this.startCenterX = this.getCoordinatesX(-this.startAngled, this.radius) // 初始位置中心点X坐标 + this.startCenterY = this.getCoordinatesY(-this.startAngled, this.radius) // 初始位置中心点Y坐标 + } + + rotate(ctx, rotate) { + var newX = this.getCoordinatesX(-this.startAngled - rotate, this.radius) // 旋转后位置中心点X坐标 + var newY = this.getCoordinatesY(-this.startAngled - rotate, this.radius) // 旋转后位置中心点Y坐标 + var translateX = this.startCenterX - newX // 需要位移的X距离 + var translateY = newY - this.startCenterY // 需要位移的Y距离 + ctx.rotate((-this.hasRotate) * Math.PI / 180); // 先将画布旋转恢复为原样 + ctx.translate(translateX - this.hasTranslateX, translateY - this.hasTranslateY); // 将画布中心点位移到初始位置的中心点 + ctx.rotate(rotate * Math.PI / 180); // 最后再旋转画布到最新的旋转角度 + // 记录旋转和位移的数值，用于下一次旋转和位移之前恢复 + this.hasTranslateX = translateX + this.hasTranslateY = translateY + this.hasRotate = rotate + } + + getCoordinatesX(angled, radius) { + return Math.cos(angled * Math.PI / 180) * radius + } + + getCoordinatesY(angled, radius) { + return Math.sin(angled * Math.PI / 180) * radius + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/base/LVBase.js b/entry/src/main/js/default/common/components/base/LVBase.js new file mode 100644 index 0000000000000000000000000000000000000000..c49275950eaab9233d0c0c939efec9104551dcc1 --- /dev/null +++ b/entry/src/main/js/default/common/components/base/LVBase.js @@ -0,0 +1,166 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import Animator from "@ohos.animator"; + +export class LVBase { + padding = -1 + animator = null + animing = false + animStartValue= 0 + animEndValue= 1 + lastAnimValue= 0 + isRestart = false + animDrawTime = 0 + animRepeatMode = false + isBack = false + + constructor() { + } + + getPadding() { + return this.padding; + } + + /** + * 设置内间距，有的组件不生效 + */ + setPadding(padding) { + this.padding = padding; + return this; + } + + /** + * 设置动画的开始值和结束值 + */ + setAnimValue(start, end) { + this.animStartValue = start + this.animEndValue = end + } + + /** + * 设置动画执行模式 + * 为true时动画值会一次由start变为end，一次由end变为start + * 为end时动画值每次都是由start变为end + */ + setAnimRepeatMode(animRepeatMode) { + this.animRepeatMode = animRepeatMode + } + + /** + * 设置动画第一次是由start变为end还是end变为start，只有当animRepeatMode为true时才有效 + * 为true时，动画第一次是由start变为end + * 为end时，动画第一次是由end变为start + */ + setIsBack(isBack) { + this.isBack = isBack + } + + /** + * 获取当前动画是由start变为end还是end变为start，只有当animRepeatMode为true时才有效 + */ + getIsBack() { + return this.isBack + } + + /** + * 获取动画是否是重复执行后的第一个值 + */ + getIsRestart() { + return this.isRestart; + } + + /** + * 获取动画当前执行次数 + */ + getAnimDrawTime() { + return this.animDrawTime; + } + + /** + * 获取动画是否在执行 + */ + getAnimIsRunning() { + return this.animing + } + + /** + * 开启动画 + */ + startViewAnim(time, callback) { + this.stopViewAnim() + var options = { + duration: time, + easing: 'linear', + fill: 'forwards', + iterations: Number.MAX_VALUE, + begin: this.animStartValue, + end: this.animEndValue + }; + this.animator = Animator.createAnimator(options); + var that = this + this.animator.onframe = function (value) { + if (that.animing) { + if (value < that.lastAnimValue) { + that.isRestart = true + that.isBack = !that.isBack; + that.OnAnimationRepeat(); + } else { + that.isRestart = false + } + that.lastAnimValue = value + that.animDrawTime++ + if (that.animRepeatMode) { + if (that.isBack) { + that.OnAnimationUpdate(that.animEndValue - value) + } else { + that.OnAnimationUpdate(value) + } + } else { + that.OnAnimationUpdate(value) + } + callback() + } + }; + this.animing = true + this.animator.play(); + } + + /** + * 停止动画 + */ + stopViewAnim(callback) { + if (this.animator != null && this.animing) { + this.animing = false + this.animator.pause() + this.animator.finish() + this.animator.cancel() + this.animator = null + this.animDrawTime = 0 + this.lastAnimValue = 0 + this.setIsBack(false) + this.OnAnimationStop() + callback() + } + } + + OnAnimationRepeat() { + + } + + OnAnimationUpdate(value) { + + } + + OnAnimationStop() { + + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/base/Point.js b/entry/src/main/js/default/common/components/base/Point.js new file mode 100644 index 0000000000000000000000000000000000000000..a1793aa32384f458e214ee007200be15a595c7a2 --- /dev/null +++ b/entry/src/main/js/default/common/components/base/Point.js @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +export class Point { + x = 0; + y = 0; + + constructor(x, y) { + this.x = x + this.y = y + } + + getX() { + return this.x; + } + + getY() { + return this.y; + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/common/components/base/Rect.js b/entry/src/main/js/default/common/components/base/Rect.js new file mode 100644 index 0000000000000000000000000000000000000000..5b2a037a1a4eb8b8267c58fb16dfb4096d6a18dd --- /dev/null +++ b/entry/src/main/js/default/common/components/base/Rect.js @@ -0,0 +1,33 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +export class Rect { + top = 0; + left = 0; + bottom = 0; + right = 0; + + getWidth() { + return this.right - this.left; + } + + getHeight() { + return this.bottom - this.top; + } + + getCenterX() { + return (this.left + this.right) / 2 + } + + getCenterY() { + return (this.top + this.bottom) / 2 + } +} \ No newline at end of file diff --git a/entry/src/main/js/default/pages/indexs/index.css b/entry/src/main/js/default/pages/indexs/index.css new file mode 100644 index 0000000000000000000000000000000000000000..4c3f9a1f09a6874880d23ce549df4d9fec793b8c --- /dev/null +++ b/entry/src/main/js/default/pages/indexs/index.css @@ -0,0 +1,69 @@ +.container_vertical { + width: 1080px; + height: 100%; + flex-direction: column; + background-color: #1253A2; +} + +.container_horizontal { + width: 100%; + height: 300px; + flex-direction: row; +} + +.container_horizontal1 { + width: 100%; + height: 360px; + flex-direction: row; +} + +.container_vertical1 { + flex-direction: column; +} + +.container_view { + width: 25%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.loading_view1 { + width: 150px; + height: 150px; +} + +.loading_view2 { + width: 1080px; + height: 90px; +} + +.loading_view3 { + width: 270px; + height: 300px; +} + +.loading_view4 { + width: 225px; + height: 225px; +} + +.loading_view5 { + width: 600px; + height: 360px; +} + +.loading_view6 { + width: 480px; + height: 360px; +} + +.text_stop { + position: absolute; + bottom: 0px; + right: 0px; + margin: 20px; + font-size: 50px; + font-weight: 700; +} diff --git a/entry/src/main/js/default/pages/indexs/index.hml b/entry/src/main/js/default/pages/indexs/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..b80c5b4b0995bf773845d3c6d34baca3b0f9c9e8 --- /dev/null +++ b/entry/src/main/js/default/pages/indexs/index.hml @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + +
+ +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + +
+ + StopAll +
diff --git a/entry/src/main/js/default/pages/indexs/index.js b/entry/src/main/js/default/pages/indexs/index.js new file mode 100644 index 0000000000000000000000000000000000000000..ca759c62265997f2075a9d043717db07ea4fe93f --- /dev/null +++ b/entry/src/main/js/default/pages/indexs/index.js @@ -0,0 +1,202 @@ +/** + * Copyright (c) 2021 ZhangXiaoqiu + * LoadingViewJs is licensed under Mulan PSL v2. + * You can use this software according to the terms and conditions of the Mulan PSL v2. + * You may obtain a copy of Mulan PSL v2 at: + * http://license.coscl.org.cn/MulanPSL2 + * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, + * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, + * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + * See the Mulan PSL v2 for more details. + */ +import Animator from "@ohos.animator"; +import {LVCircularCDController} from '../../common/component/LVCircularCD/LVCircularCDController.js' +import {LVCircularRingController} from '../../common/component/LVCircularRing/LVCircularRingController.js' +import {LVCircularController} from '../../common/component/LVCircular/LVCircularController.js' +import {LVFivePoiStarController} from '../../common/component/LVFivePoiStar/LVFivePoiStarController.js' +import {LVSmileController} from '../../common/component/LVSmile/LVSmileController.js' +import {LVGearsController} from '../../common/component/LVGears/LVGearsController.js' +import {LVGearsTwoController} from '../../common/component/LVGearsTwo/LVGearsTwoController.js' +import {LVWifiController} from '../../common/component/LVWifi/LVWifiController.js' +import {LVCircularJumpController} from '../../common/component/LVCircularJump/LVCircularJumpController.js' +import {LVCircularZoomController} from '../../common/component/LVCircularZoom/LVCircularZoomController.js' +import {LVPlayBallController} from '../../common/component/LVPlayBall/LVPlayBallController.js' +import {LVNewsController} from '../../common/component/LVNews/LVNewsController.js' +import {LVLineWithTextController} from '../../common/component/LVLineWithText/LVLineWithTextController.js' +import {LVEatBeansController} from '../../common/component/LVEatBeans/LVEatBeansController.js' +import {LVChromeLogoController} from '../../common/component/LVChromeLogo/LVChromeLogoController.js' +import {LVImgController} from '../../common/component/LVImg/LVImgController.js' +import {LVBlockController} from '../../common/component/LVBlock/LVBlockController.js' +import {LVFunnyBarController} from '../../common/component/LVFunnyBar/LVFunnyBarController.js' +import {LVGhostController} from '../../common/component/LVGhost/LVGhostController.js' +import {LVBatteryController} from '../../common/component/LVBattery/LVBatteryController.js' + +export default { + data: { + animator: null, + lvCircularCDController: null, + lvCircularRingController: null, + lvCircularController: null, + lvFivePoiStarController: null, + lvSmileController: null, + lvGearsController: null, + lvGearsTwoController: null, + lvWifiController: null, + lvCircularJumpController: null, + lvCircularZoomController: null, + lvPlayBallController: null, + lvNewsController: null, + lvLineWithTextController: null, + lvEatBeansController: null, + lvChromeLogoController: null, + lvImgController: null, + lvBlockController: null, + lvFunnyBarController: null, + lvGhostController: null, + lvBatteryController: null, + }, + onInit() { + this.lvCircularCDController = new LVCircularCDController() + .setViewColor("#00FF00") + + this.lvCircularRingController = new LVCircularRingController() + .setViewColor("#64FFFFFF").setBarColor("#FFFF00") + + this.lvCircularController = new LVCircularController() + .setViewColor("rgb(255,99,99)").setRoundColor("rgb(255,0,0)") + + this.lvFivePoiStarController = new LVFivePoiStarController() + .setViewColor("#FFFFFF").setCircleColor("#FFFF00") + + this.lvSmileController = new LVSmileController() + .setViewColor("rgb(144, 238, 146)") + + this.lvGearsController = new LVGearsController() + .setViewColor("rgb(55, 155, 233)") + + this.lvGearsTwoController = new LVGearsTwoController() + .setViewColor("rgb(155, 55, 233)") + + this.lvWifiController = new LVWifiController() + .setViewColor("black") + + this.lvCircularJumpController = new LVCircularJumpController() + .setViewColor("rgb(133, 66, 99)") + + this.lvCircularZoomController = new LVCircularZoomController() + .setViewColor("rgb(255, 0, 122)") + + this.lvPlayBallController = new LVPlayBallController() + .setViewColor("white").setBallColor("red") + + this.lvNewsController = new LVNewsController() + .setViewColor("white") + + this.lvLineWithTextController = new LVLineWithTextController() + .setViewColor("rgb(33, 66, 77)").setTextColor("rgb(233, 166, 177)") + + this.lvEatBeansController = new LVEatBeansController() + .setViewColor("white").setEyesColor("blue") + + this.lvChromeLogoController = new LVChromeLogoController() + + this.lvImgController = new LVImgController() + .setImgPath('/common/images/loading_white.png') + + this.lvBlockController = new LVBlockController() + .setViewColor("rgb(245, 209, 22)") + + this.lvFunnyBarController = new LVFunnyBarController() + .setViewColor("rgb(234, 167, 107)") + + this.lvGhostController = new LVGhostController() + .setViewColor("white").setEyesColor("black") + + this.lvBatteryController = new LVBatteryController() + .setViewColor("white").setCellColor("rgb(67, 213, 81)") + + }, + start1() { + this.stopAll() + this.$child('lvCircularCD').startAnim() + this.$child('lvCircularRing').startAnim() + this.$child('lvCircular').startAnim() + this.$child('lvFivePoiStar').startAnim() + }, + start2() { + this.stopAll() + this.$child('lvSmile').startAnim() + this.$child('lvGears').startAnim() + this.$child('lvGearsTwo').startAnim() + this.$child('lvWifi').startAnim() + }, + start3() { + this.stopAll() + this.$child('lvCircularJump').startAnim() + this.$child('lvCircularZoom').startAnim() + this.$child('lvPlayBall').startAnim() + this.$child('lvNews').startAnim() + }, + start4() { + this.stopAll() + this.startLVLineWithText() + this.$child('lvEatBeans').startAnim() + }, + start5() { + this.stopAll() + this.$child('lvChromeLogo').startAnim() + this.$child('lvImg').startAnim() + this.$child('lvBlock').startAnim() + this.$child('lvFunnyBar').startAnim() + }, + start6() { + this.stopAll() + this.$child('lvGhost').startAnim() + this.$child('lvBattery').startAnim() + }, + stopAll() { + this.$child('lvCircularCD').stopAnim() + this.$child('lvCircularRing').stopAnim() + this.$child('lvCircular').stopAnim() + this.$child('lvFivePoiStar').stopAnim() + this.$child('lvSmile').stopAnim() + this.$child('lvGears').stopAnim() + this.$child('lvGearsTwo').stopAnim() + this.$child('lvWifi').stopAnim() + this.$child('lvCircularJump').stopAnim() + this.$child('lvCircularZoom').stopAnim() + this.$child('lvPlayBall').stopAnim() + this.$child('lvNews').stopAnim() + this.stopLVLineWithText() + this.$child('lvEatBeans').stopAnim() + this.$child('lvChromeLogo').stopAnim() + this.$child('lvImg').stopAnim() + this.$child('lvBlock').stopAnim() + this.$child('lvFunnyBar').stopAnim() + this.$child('lvGhost').stopAnim() + this.$child('lvBattery').stopAnim() + }, + startLVLineWithText() { + if (this.animator == null) { + var lVLineWithText = this.$child('lvLineWithText') + var options = { + duration: 5000, + easing: 'linear', + iterations: 1, + begin: 1, + end: 100 + }; + this.animator = Animator.createAnimator(options); + this.animator.onframe = function (value) { + lVLineWithText.setValue(value) + }; + } + this.animator.play(); + }, + stopLVLineWithText() { + if (this.animator != null) { + this.animator.pause() + this.animator = null + } + } +}