react_hsbc_teller 1.7.8 → 1.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/video/video.jsx

@@ -48,6 +48,7 @@ let beautyDiv = {};
 let isBackgroundBlur = true
 let isSuccuseHs = false
 let isGraffiti = false
+let strokeColor = '#333'
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props=>props.zIndexNum};
@@ -2335,15 +2336,7 @@ class Video extends Component {
         }
       } 
       if(sid == document.getElementById('publish_video1').name) {
-        var box=document.getElementById("whiteboardDIV");
-       if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
-        this.setState({
-          whiteboardTop: box.getBoundingClientRect().top * 1.08 - 40,
-          whiteboardLeft: box.getBoundingClientRect().left,
-          leftVideo: (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
-        })
-           console.log('whiteboardDIV',this.state.whiteboardTop,this.state.whiteboardLeft)
-       }
+        
         this.setState({
 
           loading: false,
@@ -2381,6 +2374,18 @@ class Video extends Component {
           },
           1000
         );
+      } else {
+        var box=document.getElementById("whiteboardDIV");
+        var box1 = document.getElementById("operate")
+        var height = box1 ? box1.offsetHeight : 40
+       if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
+        this.setState({
+          whiteboardTop: box.getBoundingClientRect().top - height,
+          whiteboardLeft: box.getBoundingClientRect().left,
+          leftVideo: (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
+        })
+           console.log('whiteboardDIV',this.state.whiteboardTop,this.state.whiteboardLeft)
+       }
       }
     };
     // 发布媒体流失败
@@ -4721,7 +4726,7 @@ userType:'1'
   openCanvas(drawCanvas) {
     if (!this.boardOperate) {
       this.boardOperate = new BoardOperate(drawCanvas, {
-        drawColor: "#000000",
+        drawColor: strokeColor,
         drawType: "pen",
         lineWidth: 5,
         fillStyle: '', // 初始背景色，若为空则透明背景 
@@ -4741,8 +4746,23 @@ userType:'1'
     });
 
     this.setState({ drawConfig,selectSpan: type });
+    this.boardOperate.drawColor = '#333'
   }
+  setStrokeColor() {
+    console.log(this.boardOperate)
+    const { drawConfig } = this.state;
+    const type = 'pen'
+    drawConfig.curryControl = type;
+    this.boardOperate.changeWay({
+      type
+    });
 
+    this.setState({ drawConfig,selectSpan: type });
+    this.boardOperate.drawColor = '#ff4d4f'
+    this.setState({
+      selectSpan: 'redPen'
+    })
+  }
   setOpreate(type) {
     this.boardOperate[type]();
   }
@@ -4811,6 +4831,9 @@ userType:'1'
         this.openCanvas(canvas)
       }, 0);
       this.graffitiClick()
+      this.setState({
+        selectSpan: 'pen'
+      })
     } else {
       // this.downCanvas()
       this.closeCanvas();
@@ -4887,11 +4910,13 @@ userType:'1'
   }
   componentDidMount() {
     var box=document.getElementById("whiteboardDIV");
+    var box1 = document.getElementById("operate")
+    var height = box1 ? box1.offsetHeight : 40
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
             this.state.whiteboardWidth = box.offsetWidth,
             this.state.whiteboardHeight = box.offsetHeight  * 0.92,
             this.state.widthVideo = this.state.whiteboardHeight * 1280 / 720
-            this.state.whiteboardTop = box.getBoundingClientRect().top * 1.08 - 40
+            this.state.whiteboardTop = box.getBoundingClientRect().top - height
             this.state.whiteboardLeft = box.getBoundingClientRect().left
             this.state.leftVideo = (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
            console.log('whiteboardDIV', this.state.whiteboardHeight,this.state.whiteboardWidth,this.state.whiteboardTop,this.state.whiteboardLeft)
@@ -5201,6 +5226,7 @@ userType:'1'
           {this.state.operateShow &&
             <OpreateDiv id="operate">
               <span style={{color: this.state.selectSpan == 'pen' ?  '#1890ff' : '#333'}} onClick={() => this.setTool('pen')}>铅笔</span>
+              <span style={{color: this.state.selectSpan == 'redPen' ?  '#1890ff' : '#333'}} onClick={() => this.setStrokeColor()}>红笔</span>
               <span style={{color: this.state.selectSpan == 'eraser' ?  '#1890ff' : '#333'}} onClick={() =>  this.setTool('eraser')}>橡皮</span>
               <span onClick={() => this.setOpreate('undo')}>撤销</span>
               <span onClick={() => this.setOpreate('redo')}>恢复</span>