'最新代码提交'

.eslintrc

@@ -60,6 +60,7 @@
     "no-underscore-dangle": 0,
     "react/no-did-mount-set-state": 0,
     "react/no-did-update-set-state": 0,
-    "prefer-rest-params": 0
+    "prefer-rest-params": 0,
+    "jsx-a11y/mouse-events-have-key-events": 0
   }
 }
\ No newline at end of file

src/common/api.js

@@ -4,10 +4,10 @@ const basepath = `${location.protocol}//${pathify(window.location.host)}/`;
 let api = '';
 let dakaapi = '';
 if (ENVIRONMENT == 'pro') {
-  // api = 'https://test.wp53.cn/v2/api/';
-  // dakaapi = 'https:clock.wp53.cn/v3/';
-  api = 'https://wx.m.shangjiadao.cn/v2/api/';
-  dakaapi = 'https://qxapi.qingxiao.online/daka/v3/';
+  api = 'https://test.wp53.cn/v2/api/';
+  dakaapi = 'https:clock.wp53.cn/v3/';
+  // api = 'https://wx.m.shangjiadao.cn/v2/api/';
+  // dakaapi = 'https://qxapi.qingxiao.online/daka/v3/';
 } else if (ENVIRONMENT == 'dev') {
   // api = 'https://wx.m.shangjiadao.cn/v2/api/';
   // dakaapi = 'https://qxapi.qingxiao.online/daka/v3/';

src/pages/clockmgt/drawimg.js

@@ -27,12 +27,17 @@ class DrawImg extends React.Component {
     };
   }
   componentDidMount() { // 挂载
+    const that = this;
     const { batchCommentImgObj } = this.props;
     const currentDrawImage = (batchCommentImgObj[0] && batchCommentImgObj[0].src) || '';
     this.setState({
       currentDrawImage,
       batchCommentImgObj,
     });
+    setTimeout(() => {
+      that.drawcanvas = document.getElementById('drawimgcanvas');
+      that.drawcontext = that.drawcanvas.getContext('2d');
+    });
     this.caculateImgWidth(currentDrawImage);
   }
   caculateImgWidth = (img) => {
@@ -159,6 +164,80 @@ class DrawImg extends React.Component {
         break;
     }
   }
+  windowToCanvas = (x, y) => {
+    const bbox = this.drawcanvas.getBoundingClientRect();
+    console.log(bbox, 'bbox');
+    console.log(x, 'x');
+    console.log(y, 'y');
+    return {
+      x: Math.round(x - bbox.left),
+      y: Math.round(y - bbox.top),
+    };
+  }
+  drawbeginStroke = (point) => {
+    this.isMouseDown = true;
+    this.drawlastLoc = this.windowToCanvas(point.x, point.y);
+  }
+  moveStroke = (point) => {
+    const curLoc = this.windowToCanvas(point.x, point.y);
+    const lineWidth = 2;
+    this.drawcontext.beginPath();
+    this.drawcontext.moveTo(this.lastLoc.x, this.lastLoc.y);
+    this.drawcontext.lineTo(curLoc.x, curLoc.y);
+    this.drawcontext.strokeStyle = this.state.drawColor;
+    this.drawcontext.lineWidth = lineWidth;
+    this.drawcontext.lineCap = 'round';
+    this.drawcontext.lineJoin = 'round';
+    this.drawcontext.stroke();
+    this.lastLoc = curLoc;
+  }
+  onMouseDown = (e) => {
+    const { action } = this.state;
+    e.preventDefault();
+    switch (action) {
+      case 1:
+        break;
+      case 2:
+        break;
+      case 3:
+        break;
+      case 4:
+        this.drawbeginStroke({ x: e.clientX, y: e.clientY });
+        break;
+      case 5:
+        break;
+      default:
+        break;
+    }
+  }
+  onMouseUp = (e) => {
+    this.isMouseDown = false;
+  }
+  onMouseOut = (e) => {
+    this.isMouseDown = false;
+    // console.log(e);
+  }
+  onMouseMove = (e) => {
+    const { action } = this.state;
+    e.preventDefault();
+    if (this.isMouseDown) {
+      switch (action) {
+        case 1:
+          break;
+        case 2:
+          break;
+        case 3:
+          break;
+        case 4:
+          this.moveStroke({ x: e.clientX, y: e.clientY });
+          break;
+        case 5:
+          break;
+        default:
+          break;
+      }
+    }
+  }
   render() {
     const {
       currentDrawImage,
@@ -213,7 +292,15 @@ class DrawImg extends React.Component {
       >
         <div className={pageStyle.drawModalContent} style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }}>
           <img alt="标记" src={imagify(currentDrawImage)} style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }} className={pageStyle.drawimg} />
-          <canvas className={pageStyle.drawimgcanvas} id="drawimgcanvas" style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }} />
+          <canvas
+            className={pageStyle.drawimgcanvas}
+            id="drawimgcanvas"
+            style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }}
+            onMouseDown={this.onMouseDown}
+            onMouseUp={this.onMouseUp}
+            onMouseOut={this.onMouseOut}
+            onMouseMove={this.onMouseMove}
+          />
           {imageLoading &&
             <div style={{ width: `${canvasSizeObj.width}px`, height: `${canvasSizeObj.height}px` }} className={pageStyle.imageLoading}><Spin size="large" /></div>
           }