Merge pull request #91 in YR/star-web-components from featrue-component-pattern-bottomlogic to master

* commit '3cf8d78d4162fb5fac8433d16d601c61aed509ed':
  TASK: #116148 图形密码自适应、添加底部文字与settings滑动逻辑

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;
-} */
 `

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`
-        <p class="textTop">${this.changeText}</p>
-        <canvas
-          id="canvas"
-          @touchstart=${this.touchStart}
-          @touchmove=${this.touchMove}
-          @touchend=${this.touchEnd}
-        ></canvas>
+        <div id="content">
+          <p class="textTop">${this.changeText}</p>
+          <div id="canvasdown">
+            <canvas
+              id="canvas"
+              @touchstart=${this.touchStart}
+              @touchmove=${this.touchMove}
+              @touchend=${this.touchEnd}
+            ></canvas>
+          </div>
+          <p class="cancel" @touchstart=${this.touchStartCancel}>
+            ${this.cancel}
+          </p>
+        </div>
+      `
+    } else {
+      return html`
+        <div id="content">
+          <p class="textTop">${this.changeText}</p>
+          <div id="canvasdown">
+            <canvas
+              id="canvas"
+              @touchstart=${this.touchStart}
+              @touchmove=${this.touchMove}
+              @touchend=${this.touchEnd}
+            ></canvas>
+          </div>
+          <p class="errorinfo">${this.lessfourinfo}</p>
+        </div>
       `
     }
-    return html`
-      <p class="textTop">${this.changeText}</p>
-      <canvas
-        id="canvas"
-        @touchstart=${this.touchStart}
-        @touchmove=${this.touchMove}
-        @touchend=${this.touchEnd}
-      ></canvas>
-      <p class="cancel" @touchstart=${this.touchStartCancel}>${this.cancel}</p>
-    `
-  }
-  touchStartCancel() {
-    this.dispatchEvent(
-      new CustomEvent('star-pattern-view-cancel', {
-        detail: {
-          value: true,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    )
   }
 
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): 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()
-    }
-  }
 }

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`
-      <div style="height: 100vh; width: 100vw;">
-        <star-pattern-view></star-pattern-view>
+      <div
+        style="height: 100vh; width: 100vw;background-color: rgb(191, 198, 219);"
+      >
+        <star-pattern-view saveMode></star-pattern-view>
       </div>
       <!-- <star-pattern-view topDir="100px"></star-pattern-view> -->
     `