From 3cf8d78d4162fb5fac8433d16d601c61aed509ed Mon Sep 17 00:00:00 2001 From: duanzhijiang Date: Fri, 14 Oct 2022 16:08:47 +0800 Subject: [PATCH] =?UTF-8?q?TASK:=20#116148=20=E5=9B=BE=E5=BD=A2=E5=AF=86?= =?UTF-8?q?=E7=A0=81=E8=87=AA=E9=80=82=E5=BA=94=E3=80=81=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=BA=95=E9=83=A8=E6=96=87=E5=AD=97=E4=B8=8Esettings=E6=BB=91?= =?UTF-8?q?=E5=8A=A8=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pattern-view/pattern-view-style.ts | 105 ++---- src/components/pattern-view/pattern-view.ts | 316 +++++++++--------- src/test/panels/pattern-view/pattern-view.ts | 8 +- 3 files changed, 204 insertions(+), 225 deletions(-) diff --git a/src/components/pattern-view/pattern-view-style.ts b/src/components/pattern-view/pattern-view-style.ts index 94fa614..8cd42e4 100644 --- a/src/components/pattern-view/pattern-view-style.ts +++ b/src/components/pattern-view/pattern-view-style.ts @@ -1,78 +1,47 @@ import {css, CSSResult} from 'lit' export const sharedStyles: CSSResult = css` - .bg { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-image: url(../assets/backgroud.png); - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - background-position: top; + :host { + --top-dir: 42.4%; } - - .groundGlass { - display: none; - position: relative; - margin: auto; + canvas { + display: block; + margin: 0 auto; + } + #content { + margin: 0px; + padding: 0px; width: 100%; height: 100%; - line-height: 100%; - color: #fff; - font-size: 30px; + } + p { + position: absolute; + font-family: 'OPPOSans'; + font-style: normal; + font-weight: 400; + color: #292929; + font-family: 'OPPOSans'; + color: #292929; + font-size: 16px; + height: 26.5px; + line-height: 26.5px; + left: 50%; + width: 150px; + transform: translateX(-50%); + margin-top: 0; text-align: center; - overflow: hidden; - z-index: 10; } - - .bg ::before { - content: ''; - position: absolute; - top: -100%; - left: -100%; - right: -100%; - bottom: -100%; - background-image: url(../assets/backgroud.png); - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - background-position: top; - filter: blur(10px); - z-index: -2; + #canvasdown { + position: relative; + top: var(--top-dir); } - - .bg ::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(217, 217, 217, 0.65); - z-index: -1; + .textTop { + top: 31%; + } + .cancel { + bottom: 13.5%; + } + .errorinfo { + top: 66%; + color: #ec4949; } - /* canvas{ - position: absolute; - left: 0; - top: 11%; - right:0; - bottom:0; - margin:auto; -} */ - /* #lockCancel { - position: absolute; - width: 50px; - height: 30px; - left: calc(50% - 50px/2); - top: calc(81.5%); - font-family: 'OPPOSans'; - font-weight: 900; - font-size: 14px; - line-height: 30px; - color: #292929; - cursor: pointer; - user-select: none; -} */ ` diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts index d16c692..b9c1497 100644 --- a/src/components/pattern-view/pattern-view.ts +++ b/src/components/pattern-view/pattern-view.ts @@ -1,46 +1,17 @@ -import {html, LitElement, css, PropertyValueMap} from 'lit' +import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit' import {customElement, property, query} from 'lit/decorators.js' -// import {sharedStyles} from './pattern-view-style' +import {sharedStyles} from './pattern-view-style' @customElement('star-pattern-view') export class StarPatternView extends LitElement { _topDir: string = '' _getRed: boolean = false - static styles = css` - :host { - --top-dir: 217.5px; - } - canvas { - margin-top: var(--top-dir); - } - p { - position: absolute; - font-family: 'OPPOSans'; - font-style: normal; - font-weight: 400; - color: #292929; - font-family: 'OPPOSans'; - color: #292929; - font-size: 20px; - height: 26.5px; - line-height: 26.5px; - left: 50%; - width: 150px; - transform: translateX(-50%); - margin-top: 0; - text-align: center; - } - .textTop { - top: 31%; - } - .cancel { - bottom: 13.5%; - } - ` - // public static override get styles(): CSSResultArray { - // return [sharedStyles] - // } + + public static override get styles(): CSSResultArray { + return [sharedStyles] + } @query('canvas') canvas!: HTMLCanvasElement + @query('.textTop') saveP!: HTMLParagraphElement @property({attribute: false}) cxt!: CanvasRenderingContext2D @property({type: Boolean}) get getRed() { @@ -53,15 +24,16 @@ export class StarPatternView extends LitElement { } } @property({type: Boolean}) saveMode = false + @property({type: Boolean}) lessfour = false @property({type: Boolean}) confirm = false @property({type: Number}) top = 0 - @property({type: Number}) R = 35 + @property({type: Number}) R = (35 / 600) * document.body.offsetWidth @property({type: Number}) X = 0 @property({type: Number}) Y = 0 - @property({type: Number}) canvasWidth = document.body.offsetWidth - @property({type: Number}) canvasHeight = document.body.offsetWidth - @property({type: Number}) OffsetX = document.body.offsetWidth / 3.5 - @property({type: Number}) OffsetY = document.body.offsetWidth / 3.5 + @property({type: Number}) canvasWidth = (document.body.offsetWidth * 5) / 12 + @property({type: Number}) canvasHeight = (document.body.offsetWidth * 5) / 12 + @property({type: Number}) OffsetX = document.body.offsetWidth / 3.33 + @property({type: Number}) OffsetY = document.body.offsetWidth / 3.33 @property({type: Array}) circleArr: {X: number; Y: number}[] = [] @property({type: Array}) passwd: number[] = [] @property({type: Array}) savewd: number[] = [] @@ -69,6 +41,7 @@ export class StarPatternView extends LitElement { @property({type: String}) mode = '' @property({type: String}) changeText = '' @property({type: String}) cancel = '取消' + @property({type: String}) lessfourinfo = '' @property({type: String}) get topDir() { return this._topDir @@ -80,44 +53,49 @@ export class StarPatternView extends LitElement { } render() { - if (this.saveMode) { + if (!this.saveMode) { return html` -

${this.changeText}

- +
+

${this.changeText}

+
+ +
+

+ ${this.cancel} +

+
+ ` + } else { + return html` +
+

${this.changeText}

+
+ +
+

${this.lessfourinfo}

+
` } - return html` -

${this.changeText}

- -

${this.cancel}

- ` - } - touchStartCancel() { - this.dispatchEvent( - new CustomEvent('star-pattern-view-cancel', { - detail: { - value: true, - }, - bubbles: true, - composed: true, - }) - ) } protected firstUpdated( _changedProperties: PropertyValueMap | Map ): void { - this.top = this.top ? this.top : 217.5 + //settings中，图形密码上下的文字以及图形密码的位置都有所变化 + if (this.saveMode) { + this.topDir = '34.7%' + this.saveP.style.setProperty('top', '27.8%') + } //canvas的高度和宽度都是 this.canvas.width = this.canvasWidth this.canvas.height = this.canvasHeight @@ -128,16 +106,6 @@ export class StarPatternView extends LitElement { this.createCirclePoint(this.X, this.Y) this.Draw() this.changeText = this.saveMode ? '请绘制图案' : '绘制图案' - // switch (this.mode) { - // case "create": - // this.changeText = '请绘制图案' - // case "verify": - // this. - // break; - - // default: - // break; - // } this.addEventListener('passcode-create-success', this) this.addEventListener('passcode-verify-success', this) this.addEventListener('passcode-verify-error', this) @@ -153,13 +121,85 @@ export class StarPatternView extends LitElement { break case 'passcode-verify-error': this.getRed = true + this.changeText = '绘制图案错误' break default: break } } + touchStart(e: TouchEvent) { + this.lessfourinfo = '' + this.passwd = [] + this.getRed = false + var touches = e.touches[0] + const {top, left} = this.canvas.getBoundingClientRect() + var X = touches.clientX - left + var Y = touches.clientY - top + this.getSelectPwd(touches, this.passwd) + // 清理初始canvas，不然会有叠加效果 + this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) + this.Draw({X, Y}) + } + touchMove(e: TouchEvent) { + e.preventDefault() + var touches = e.touches[0] + this.getSelectPwd(touches, this.passwd) + // 清除画布,0,0代表从什么位置开始,canvasWidth,canvasHeight代表清除的宽度和高度 + this.cxt = this.canvas.getContext('2d')! + this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) + const {top, left} = this.canvas.getBoundingClientRect() + //X,Y以canvas中左上角为0，0点 + this.Draw({ + X: touches.clientX - left, + Y: touches.clientY - top, + }) + } + touchEnd(_e: TouchEvent) { + console.log('###', this.passwd.length) + if (this.saveMode && this.passwd.length < 4) { + this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) + this.getRed = true + this.lessfourinfo = '至少连接四个点' + } else { + this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) + //进入存储模式 + if (this.saveMode) { + this.getRed = false + if (!this.confirm) { + this.changePasswd() + } else { + this.confirmPasswd() + } + this.passwd = [] + this.Draw() + } else { + this.dispatchEvent( + new CustomEvent('star-pattern-view-passwd', { + detail: { + value: this.passwd, + }, + bubbles: true, + composed: true, + }) + ) + this.passwd = [] + this.Draw() + } + } + } + touchStartCancel() { + this.dispatchEvent( + new CustomEvent('star-pattern-view-cancel', { + detail: { + value: true, + }, + bubbles: true, + composed: true, + }) + ) + } createCirclePoint(diffX: number, diffY: number) { for (var row = 0; row < 3; row++) { for (var col = 0; col < 3; col++) { @@ -168,13 +208,43 @@ export class StarPatternView extends LitElement { X: this.OffsetX + col * diffX + (col * 2 + 1) * this.R, Y: this.OffsetY + row * diffY + (row * 2 + 1) * this.R, } - this.circleArr.push(Point) + this.circleArr.unshift(Point) } } } Draw(touchPoint?: {X: any; Y: any}) { - if (this.passwd.length > 1) { + for (var i = this.circleArr.length - 1; i >= 0; i--) { + var Point = this.circleArr[i] + //大圆 + this.cxt.beginPath() + this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true) + this.cxt.fillStyle = 'rgb(244,244,244,0.2)' + this.cxt.fill() + this.cxt.closePath() + //小圆 + this.cxt.beginPath() + this.cxt.fillStyle = 'rgb(51,51,51,0.2)' + this.cxt.arc(Point.X, Point.Y, (36 / 140) * this.R, 0, Math.PI * 2, true) + this.cxt.fill() + this.cxt.closePath() + //滑动后小圆的颜色 + if (this.passwd.indexOf(i) >= 0) { + this.cxt.fillStyle = this.getRed ? '#FF4040' : '#333333' + this.cxt.beginPath() + this.cxt.arc( + Point.X, + Point.Y, + (36 / 140) * this.R, + 0, + Math.PI * 2, + true + ) + this.cxt.fill() + this.cxt.closePath() + } + } + if (this.passwd.length > 0) { this.cxt.beginPath() for (var i = 0; i < this.passwd.length; i++) { var pointIndex = this.passwd[i] @@ -198,40 +268,21 @@ export class StarPatternView extends LitElement { this.cxt.closePath() } } - for (var i = 0; i < this.circleArr.length; i++) { - var Point = this.circleArr[i] - //大圆 - this.cxt.fillStyle = 'rgb(51,51,51,0.08)' - this.cxt.beginPath() - this.cxt.arc(Point.X, Point.Y, this.R, 0, Math.PI * 2, true) - this.cxt.closePath() - this.cxt.fill() - //小圆 - this.cxt.fillStyle = 'rgb(51,51,51,0.2)' - this.cxt.beginPath() - this.cxt.arc(Point.X, Point.Y, this.R - 26, 0, Math.PI * 2, true) - this.cxt.closePath() - this.cxt.fill() - //滑动后小圆的颜色 - if (this.passwd.indexOf(i) >= 0) { - this.cxt.fillStyle = this.getRed ? '#FF4040' : '#333333' - this.cxt.beginPath() - this.cxt.arc(Point.X, Point.Y, this.R - 26, 0, Math.PI * 2, true) - this.cxt.closePath() - this.cxt.fill() - } - } } + //储存手指经过大圆后的数字 getSelectPwd(touches: any, passwd: number[]) { for (var i = 0; i < this.circleArr.length; i++) { var currentPoint = this.circleArr[i] - var xdiff = Math.abs(currentPoint.X - touches.pageX) - /******** this.top = canvas向下移动的距离 **********/ - var ydiff = Math.abs(currentPoint.Y - touches.pageY + this.top) + const {top, left} = this.canvas.getBoundingClientRect() + var X = touches.clientX - left + var Y = touches.clientY - top + var xdiff = Math.abs(currentPoint.X - X) + var ydiff = Math.abs(currentPoint.Y - Y) var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5) if (dir > this.R || passwd.indexOf(i) >= 0) continue passwd.push(i) + console.log(this.passwd) break } } @@ -240,7 +291,7 @@ export class StarPatternView extends LitElement { console.log('请确认密码', this.savewd.toString()) this.confirm = true this.changeText = '请确认图案' - console.log('1', this.passwd) + console.log('###', this.passwd) this.dispatchEvent( new CustomEvent('star-pattern-view-settings-change', { @@ -254,7 +305,7 @@ export class StarPatternView extends LitElement { } confirmPasswd() { if (this.savewd.toString() == this.passwd.toString()) { - console.log('2', this.passwd) + console.log('###', this.passwd) this.dispatchEvent( new CustomEvent('star-pattern-view-settings-confirm', { detail: { @@ -271,47 +322,4 @@ export class StarPatternView extends LitElement { this.passwd = [] } } - touchStart(_e: TouchEvent) { - this.getRed = false - } - touchMove(e: TouchEvent) { - e.preventDefault() - var touches = e.touches[0] - this.getSelectPwd(touches, this.passwd) - // 清除画布,0,0代表从什么位置开始,canvasWidth,canvasHeight代表清除的宽度和高度 - this.cxt = this.canvas.getContext('2d')! - this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) - /*this.top = 手指拖动时，线条的起始位置。 */ - this.Draw({ - X: touches.pageX, - Y: touches.pageY - this.top, - }) - } - touchEnd(_e: TouchEvent) { - this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight) - //进入存储模式 - if (this.saveMode) { - this.getRed = false - if (!this.confirm) { - this.changePasswd() - } else { - this.confirmPasswd() - } - this.passwd = [] - this.Draw() - } else { - console.log('$$$', this.passwd) - this.dispatchEvent( - new CustomEvent('star-pattern-view-passwd', { - detail: { - value: this.passwd, - }, - bubbles: true, - composed: true, - }) - ) - this.passwd = [] - this.Draw() - } - } } diff --git a/src/test/panels/pattern-view/pattern-view.ts b/src/test/panels/pattern-view/pattern-view.ts index 4314c46..d281027 100644 --- a/src/test/panels/pattern-view/pattern-view.ts +++ b/src/test/panels/pattern-view/pattern-view.ts @@ -9,13 +9,15 @@ export class PanelPatternView extends LitElement { position: absolute; height: 100%; width: 100%; - background-color: rgb(124, 194, 235); + background-color: rgb(191, 198, 219); } ` render() { return html` -
- +
+
`