Home Explore Help
Register Sign In
caner
/
blog
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

增加颜色画笔
Signed-off-by: Caner <5658514@qq.com>

Caner 3 years ago
parent
a10d6a07bb
commit
c208bec8a9
15 changed files with 36 additions and 21 deletions
Unified View Show Diff Stats
  1. 1 0
      README.md
  2. 2 1
      index.html
  3. BIN
      public/favicon.ico
  4. BIN
      public/pen/0.cur
  5. BIN
      public/pen/1.cur
  6. BIN
      public/pen/2.cur
  7. BIN
      public/pen/3.cur
  8. BIN
      public/pen/4.cur
  9. BIN
      public/pen/5.cur
  10. BIN
      public/pen/6.cur
  11. BIN
      public/pen/7.cur
  12. BIN
      public/pen/8.cur
  13. 17 4
      src/pages/views/index/index.vue
  14. 14 14
      src/utils/Painter.js
  15. 2 2
      src/utils/Recorder.js

+ 1 - 0
README.md
View File 

@@ -9,4 +9,5 @@
 
 4. '/fly' 二维动态导向
 
 4. '/fly' 二维动态导向
 
 5. '/move' 移动组件
 
 5. '/move' 移动组件
 
 6. '/news' 实时新闻
 
 6. '/news' 实时新闻
 
+7. '/plantool' 平面图缩放
 
 ```
 
 ```

+ 2 - 1
index.html
View File 

@@ -2,8 +2,9 @@
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
+    <link rel="icon" href="/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>好玩的</title>
 
+    <title>Interesting</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

BIN
public/favicon.ico
View File


BIN
public/pen/0.cur
View File


BIN
public/pen/1.cur
View File


BIN
public/pen/2.cur
View File


BIN
public/pen/3.cur
View File


BIN
public/pen/4.cur
View File


BIN
public/pen/5.cur
View File


BIN
public/pen/6.cur
View File


BIN
public/pen/7.cur
View File


BIN
public/pen/8.cur
View File


+ 17 - 4
src/pages/views/index/index.vue
View File 

@@ -22,7 +22,10 @@
 
       </span>
 
       </span>
 
     </div>
 
     </div>
 
     <div id="cursors" />
 
     <div id="cursors" />
 
-    <canvas id="canvas" />
 
+    <canvas
 
+      id="canvas"
 
+      :style="resetStyle"
 
+    />
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 <script lang="ts" setup>
 
 <script lang="ts" setup>
 
@@ -40,7 +43,7 @@ const status = ref('🟡')
 
 const colors = [ '⚫️', '🔵', '🟢', '🟣', '🔴', '🟤', '🟠', '🟡', '⚪️' ]
 
 const colors = [ '⚫️', '🔵', '🟢', '🟣', '🔴', '🟤', '🟠', '🟡', '⚪️' ]
 
 let canvas: HTMLCanvasElement | null = null
 
 let canvas: HTMLCanvasElement | null = null
 
 let context: CanvasRenderingContext2D | null = null
 
 let context: CanvasRenderingContext2D | null = null
 
-
 
+const resetStyle = ref('')
 
 // canvas fn
 
 // canvas fn
 
 const onPointerMove = (event: PointerEvent) => {
 
 const onPointerMove = (event: PointerEvent) => {
 
   if (event.isPrimary) {
 
   if (event.isPrimary) {
 
@@ -74,6 +77,7 @@ const onPointerUp = (event: PointerEvent) => {
 
 
 
 const restColor = (i: number) => {
 
 const restColor = (i: number) => {
 
   recorder.color(i)
 
   recorder.color(i)
 
+  resetStyle.value = `cursor: url(/pen/${i}.cur) 0 17, crosshair;`
 
 }
 
 }
 
 
 
 // socket init
 
 // socket init
 
@@ -85,7 +89,7 @@ socket.on('connect', () => {
 
   status.value = colors[2]
 
   status.value = colors[2]
 
 })
 
 })
 
 
 
-socket.on('msg', (data:any) => {
 
+socket.on('msg', (data: any) => {
 
   const dataview = new DataView(data)
 
   const dataview = new DataView(data)
 
   const id = dataview.getUint8(0)
 
   const id = dataview.getUint8(0)
 
   if (painters[id] === undefined) {
 
   if (painters[id] === undefined) {
 
@@ -138,7 +142,7 @@ onUnmounted(() => {
 
 
 
   #canvas {
 
   #canvas {
 
     display: block;
 
     display: block;
 
-    cursor: crosshair;
 
+    cursor: url('/pen/0.cur') 0 17, crosshair;
 
     touch-action: none;
 
     touch-action: none;
 
   }
 
   }
 
 
 
@@ -167,6 +171,15 @@ onUnmounted(() => {
 
     border-radius: 25px;
 
     border-radius: 25px;
 
     user-select: none;
 
     user-select: none;
 
     pointer-events: auto;
 
     pointer-events: auto;
 
+    &:last-child{
 
+      margin-left: 5px;
 
+    }
 
+    &>span {
 
+      span {
 
+        margin: 0 3px;
 
+        cursor: grabbing;
 
+      }
 
+    }
 
   }
 
   }
 
 
 
 }
 
 }

+ 14 - 14
src/utils/Painter.js
View File 

@@ -1,9 +1,9 @@
 
 
 
 function Painter(context, dom) {
 
 function Painter(context, dom) {
 
 
 
-  let dpr = window.devicePixelRatio;
 
+  const dpr = window.devicePixelRatio;
 
 
 
-  let c = document.createElement('canvas');
 
+  const c = document.createElement('canvas');
 
   c.width = 16 * dpr;
 
   c.width = 16 * dpr;
 
   c.height = 16 * dpr;
 
   c.height = 16 * dpr;
 
   c.style.position = 'absolute';
 
   c.style.position = 'absolute';
 
@@ -12,7 +12,7 @@ function Painter(context, dom) {
 
   c.style.pointerEvents = 'none';
 
   c.style.pointerEvents = 'none';
 
   c.style.display = 'none';
 
   c.style.display = 'none';
 
 
 
-  let ctx = c.getContext("2d");
 
+  const ctx = c.getContext("2d");
 
   ctx.lineWidth = 0.5;
 
   ctx.lineWidth = 0.5;
 
   ctx.beginPath();
 
   ctx.beginPath();
 
   ctx.arc(8 * dpr, 8 * dpr, 7, 0, Math.PI * 2);
 
   ctx.arc(8 * dpr, 8 * dpr, 7, 0, Math.PI * 2);
 
@@ -32,9 +32,9 @@ function Painter(context, dom) {
 
       return;
 
       return;
 
     }
 
     }
 
 
 
-    let dx = x2 - x1;
 
-    let dy = y2 - y1;
 
-    let d = Math.sqrt(dx * dx + dy * dy) * 0.015;
 
+    const dx = x2 - x1;
 
+    const dy = y2 - y1;
 
+    const d = Math.sqrt(dx * dx + dy * dy) * 0.015;
 
 
 
     if (ccolor !== null) {
 
     if (ccolor !== null) {
 
 
 
@@ -44,28 +44,28 @@ function Painter(context, dom) {
 
 
 
       switch (ccolor) {
 
       switch (ccolor) {
 
         case 0:
 
         case 0:
 
-          context.strokeStyle = 'rgba(0, 0, 0, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(0, 0, 0, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 1:
 
         case 1:
 
-          context.strokeStyle = 'rgba(0, 0, 238, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(0, 0, 238, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 2:
 
         case 2:
 
-          context.strokeStyle = 'rgba(0, 208, 0, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(0, 208, 0, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 3:
 
         case 3:
 
-          context.strokeStyle = 'rgba(238, 0, 238, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(238, 0, 238, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 4:
 
         case 4:
 
-          context.strokeStyle = 'rgba(238, 0, 0, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(238, 0, 0, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 5:
 
         case 5:
 
-          context.strokeStyle = 'rgba(119, 60, 0, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(119, 60, 0, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 6:
 
         case 6:
 
-          context.strokeStyle = 'rgba(238, 119, 0, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(238, 119, 0, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 7:
 
         case 7:
 
-          context.strokeStyle = 'rgba(238, 208, 0, ' + (0.7 - d) + ')';
 
+          context.strokeStyle = 'rgba(238, 208, 0, ' + (0.9 - d) + ')';
 
           break;
 
           break;
 
         case 8:
 
         case 8:
 
           context.strokeStyle = 'rgba(238, 238, 238, ' + (1 - d) + ')';
 
           context.strokeStyle = 'rgba(238, 238, 238, ' + (1 - d) + ')';

+ 2 - 2
src/utils/Recorder.js
View File 

@@ -76,8 +76,8 @@ function Recorder(context, ws) {
 
 
 
       client.move(x, y);
 
       client.move(x, y);
 
 
 
-      let dx = x - cx;
 
-      let dy = y - cy;
 
+      const dx = x - cx;
 
+      const dy = y - cy;
 
 
 
       let command;
 
       let command;