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}
+
+
+
${this.changeText}
+
+
+
+
${this.lessfourinfo}
+
${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`
-