Merge branch 'master' of github.com:lefex/FE

lwg649 · Aug 9, 2021 · 98172a4 · 98172a4
2 parents 18262e4 + bda0edf
commit 98172a4
Show file tree

Hide file tree

Showing 6 changed files with 510 additions and 63 deletions.
diff --git a/canvas/canvas-to-text/index.html b/canvas/canvas-to-text/index.html
@@ -18,46 +18,15 @@
             background-color: #f5f5f5;
             text-align: center;
         }
-        .render-css-wrap {
-            background-color: #fff;
-            margin: 20px;
-            padding: 20px;
-        }
-        #render-canvas-warp {
-            background-color: #fff;
-        }
-        #muti-text-demo {
+        #text-copy-demo {
             position: relative;
-            width: 400px;
-            margin: 0 auto;
+            margin: 40px auto;
             overflow: hidden;
         }
-
-        .custom-text-enable {
-            font-family: 'a5a5099ebd64783e09122bbb0050001';
-            font-size: 40px;
-        }
-
-        .custom-text-disable {
-            font-family: '08c71f492b160b4e767fcf980010001';
-            font-size: 40px;
-        }
     </style>
 </head>
 <body>
-    <div class="render-css-wrap">
-        <p>CSS渲染 - 均可正常渲染</p>
-        <p class="custom-text-enable">第一集《自然的馈赠》</p>
-        <p class="custom-text-disable">系列晶闸管触发器在可逆直流稳压电源的应用</p>
-    </div>
-    <div id="render-canvas-warp">
-        <p>canvas 渲染</p>
-    </div>
-    <div id="zrender"></div>
-    <div id="muti-text-demo">
-
-    </div>
-    <script src="./index.ts" type="module"></script>
-    <script src="./mutiText.ts" type="module"></script>
+    <div id="text-copy-demo"></div>
+    <script src="./textCopy.ts" type="module"></script>
 </body>
 </html>
diff --git a/canvas/canvas-to-text/index2.html b/canvas/canvas-to-text/index2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="./src/mock/enable.css">
+    <link rel="stylesheet" type="text/css" href="./src/mock/disable.css">
+    <title>canvas render text</title>
+    <style>
+        * {
+            padding: 0;
+            margin: 0;
+        }
+        body {
+            padding: 0;
+            margin: 0;
+            background-color: #f5f5f5;
+            text-align: center;
+        }
+        .render-css-wrap {
+            background-color: #fff;
+            margin: 20px;
+            padding: 20px;
+        }
+        #render-canvas-warp {
+            background-color: #fff;
+        }
+        #muti-text-demo {
+            position: relative;
+            width: 400px;
+            margin: 0 auto;
+            overflow: hidden;
+        }
+
+        .custom-text-enable {
+            font-family: 'a5a5099ebd64783e09122bbb0050001';
+            font-size: 40px;
+        }
+
+        .custom-text-disable {
+            font-family: '08c71f492b160b4e767fcf980010001';
+            font-size: 40px;
+        }
+    </style>
+</head>
+<body>
+    <div class="render-css-wrap">
+        <p>CSS渲染 - 均可正常渲染</p>
+        <p class="custom-text-enable">第一集《自然的馈赠》</p>
+        <p class="custom-text-disable">系列晶闸管触发器在可逆直流稳压电源的应用</p>
+    </div>
+    <div id="render-canvas-warp">
+        <p>canvas 渲染</p>
+    </div>
+    <div id="zrender"></div>
+    <div id="muti-text-demo">
+
+    </div>
+    <script src="./index.ts" type="module"></script>
+    <script src="./mutiText.ts" type="module"></script>
+</body>
+</html>
diff --git a/canvas/canvas-to-text/mutiText.ts b/canvas/canvas-to-text/mutiText.ts
@@ -122,7 +122,7 @@ function throttle(fn, delay){
     return function() {
        if(!valid){
            //休息时间 暂不接客
-           return false 
+           return false
        }
        // 工作时间，执行函数并且在间隔期内把状态位设为无效
         valid = false
@@ -134,34 +134,35 @@ function throttle(fn, delay){
 }
 
 const addEvent = () => {
-    let parent = document.getElementById('muti-text-demo');
+    let parent = document.getElementById('muti-canvas');
     let lastHitNode = null;
     let drawNodes = [];
     let isValid = true;
     const notDrawed = (node) => {
         return drawNodes.every(item => item.lineNum !== node.lineNum);
     }
     const handleMove = (e) => {
-        if (e.target.id !== 'muti-canvas') {
-            // return;
-        }
+        e.stopPropagation();
+        // if (e.target.id !== 'muti-canvas') {
+        //     // return;
+        // }
         if (!isValid) {
             return;
         }
         if (mouseDown) {
             isValid = false;
             setTimeout(() => {
                 isValid = true;
-            }, 200);
-            console.log('e = ', e.target);
+            }, 0);
+            // console.log('e = ', e.target);
             console.log(`offsetX = ${e.offsetX}, offsetY = ${e.offsetY}`);
             // 页面的距离
             // console.log(`pageX = ${e.pageX}, pageY = ${e.pageY}`);
-            console.log(`clientX = ${e.clientX}, clientY = ${e.clientY}`);
+            // console.log(`clientX = ${e.clientX}, clientY = ${e.clientY}`);
          /**
           * 文本框选择思路：
-          * 
-          * 
+          *
+          *
          */
             let hitNode = isInNodeArea(e);
             if (hitNode) {
@@ -175,7 +176,7 @@ const addEvent = () => {
                          let id = 'select-line' + lastHitNode.lineNum;
                          let lastLineDom = document.getElementById(id) as HTMLElement;
                          lastLineDom.style.width = `${lastHitNode.w}px`;
- 
+
                          // 2.开启新的一行
                          let lineDom = document.createElement('div');
                          lineDom.style.position = 'absolute';
@@ -187,11 +188,14 @@ const addEvent = () => {
                          // 需要从头画到鼠标的位置
                          lineDom.style.width = `${e.offsetX}px`;
                          lineDom.id = 'select-line' + hitNode.lineNum;
+                         lineDom.addEventListener('mousemove', e => {
+
+                         });
                          lastHitNode = hitNode;
 
                          let parent = document.getElementById('muti-text-demo');
                          parent.appendChild(lineDom);
- 
+
                     }
                     else {
                          // 这是第一行
@@ -211,7 +215,14 @@ const addEvent = () => {
                     drawNodes.push(hitNode);
                 }
                 else {
-                    let width = e.offsetX;
+                    // 第1行的宽度：鼠标下落的 e.offsetX - startX
+                    // 画一块连续的区域
+                    // 可以向上、还可以向下
+                    // 画到第二行时，宽度就是 e.offsetX
+                    let width = e.offsetX - startX;
+                    if (drawNodes.length > 1) {
+                        width = e.offsetX;
+                    }
                     let id = 'select-line' + hitNode.lineNum;
                     let lineDom = document.getElementById(id) as HTMLElement;
                     if (!lineDom) {
@@ -232,25 +243,35 @@ const addEvent = () => {
         }
      }
     parent.addEventListener('mousedown', (e) => {
-        if (e.target.id !== 'muti-canvas') {
-            return;
-        }
-        mouseDown = true;
+        // if (e.target.id !== 'muti-canvas') {
+        //     return;
+        // }
         console.log('mouse down', e);
         startX = e.offsetX;
         startY = e.offsetY;
         drawNodes = [];
-    });
-    parent.addEventListener('mousemove', handleMove);
+        mouseDown = true;
+    }, true);
+    parent.addEventListener('mousemove', handleMove, true);
     parent.addEventListener('mouseup', (e) => {
-        if (e.target.id !== 'muti-canvas') {
-            return;
-        }
         mouseDown = false;
+        console.log('mouseup', e);
+        // if (e.target.id !== 'muti-canvas') {
+        //     return;
+        // }
+        lastHitNode = null;
+        startX = 0;
+        startY = 0;
+    }, true);
+    document.querySelector('html').addEventListener('mouseup', function (e) {
+        mouseDown = false;
+        console.log('html mouseup', e);
+        // if (e.target.id !== 'muti-canvas') {
+        //     return;
+        // }
         lastHitNode = null;
         startX = 0;
         startY = 0;
-        console.log('mouse move', e);
     });
 }