多点触屏，画笔颜色、粗细可选

watchdb · Aug 11, 2015 · a5b29ee · a5b29ee
1 parent 39ae36d
commit a5b29ee
Showing 1 changed file with 56 additions and 3 deletions.
diff --git a/assets/js/nodeppt.js b/assets/js/nodeppt.js
@@ -496,6 +496,42 @@
                 }
                 break;
                 //上一页
+            case 66:
+                //b
+                $drawBoard.context.strokeStyle = 'rgba(0,0,255,0.5)'; //pen_blue
+                break;
+            case 89:
+                //y
+                $drawBoard.context.strokeStyle = 'rgba(255,255,0,0.5)';  //pen_yellow
+                break;
+            case 82:
+                //r
+                $drawBoard.context.strokeStyle = 'rgba(255,0,0,0.5)'; //pen_red
+                break;
+            case 71:
+                //g
+                $drawBoard.context.strokeStyle = 'rgba(0,255,0,0.5)'; //pen_green
+                break;
+            case 77:
+                //m
+                $drawBoard.context.strokeStyle = 'rgba(255,0,255,0.5)'; //pen_magenta
+                break;
+            case 49:
+                //1
+                $drawBoard.context.lineWidth = 3;  //画笔粗细
+                break;
+            case 50:
+                //2
+                $drawBoard.context.lineWidth = 7;  //画笔粗细
+                break;
+            case 51:
+                //3
+                $drawBoard.context.lineWidth = 11;  //画笔粗细
+                break;
+            case 52:
+                //4
+                $drawBoard.context.lineWidth = 15;  //画笔粗细
+                break;
             case 33:
                 // pg up
             case 37:
@@ -651,8 +687,9 @@
         $drawBoard.context = $drawBoard.getContext('2d');
         var context = $drawBoard.context;
         context.lineWidth = 3;
-        context.lineCap = 'round';
-        context.strokeStyle = "red";
+        //context.lineCap = 'round';
+        context.lineJoin = 'round';
+        context.strokeStyle = 'rgba(255,0,0,0.5)'; //"red";
     }
 
     //显示画板
@@ -730,6 +767,12 @@
     };
     var pMouseDown = function (e) {
         $drawBoard.isMouseDown = true;
+        try{   //多点触屏
+            var touch = e.targetTouches[0];
+            e = touch;
+            }
+        catch(err){
+            }
         //        $drawBoard.iLastX = e.clientX - $drawBoard.offsetLeft + ($win.pageXOffset || $doc.body.scrollLeft || $doc.documentElement.scrollLeft);
         //        $drawBoard.iLastY = e.clientY - $drawBoard.offsetTop + ($win.pageYOffset || $doc.body.scrollTop || $doc.documentElement.scrollTop);
         var x = $drawBoard.iLastX = e.layerX || e.offsetX || (e.clientX - $drawBoard.offsetLeft + ($win.pageXOffset || $doc.body.scrollLeft || $doc.documentElement.scrollLeft));
@@ -738,6 +781,7 @@
             x: x,
             y: y
         });
+        return false;  //兼容手机触屏
     };
     var pPoints = [];
     var pMouseUp = function (e) {
@@ -767,6 +811,8 @@
 
         var context = $drawBoard.context;
         context.beginPath();
+        context.strokeStyle = data.pencolor;  //画笔颜色
+        context.lineWidth = data.penlineWidth;  //画笔粗细
         var startX = cOX - (tOX - points[0].x) * iw;
         var startY = cOY - (tOY - points[0].y) * ih;
         // console.log(startX, points[0].x, startY, iw, wh);
@@ -778,6 +824,12 @@
     });
     var pMouseMove = function (e) {
         if ($drawBoard.isMouseDown) {
+            try{   //多点触屏
+                var touch = e.targetTouches[0];
+                e = touch;
+                }
+            catch(err){
+                }
             //            var iX = e.clientX - $drawBoard.offsetLeft + ($win.pageXOffset || $doc.body.scrollLeft || $doc.documentElement.scrollLeft);
             //            var iY = e.clientY - $drawBoard.offsetTop + ($win.pageYOffset || $doc.body.scrollTop || $doc.documentElement.scrollTop);
             var iX = e.layerX || e.offsetX || (e.clientX - $drawBoard.offsetLeft + ($win.pageXOffset || $doc.body.scrollLeft || $doc.documentElement.scrollLeft));
@@ -793,7 +845,8 @@
                 x: iX,
                 y: iY
             });
-            e.preventDefault();
+            //e.preventDefault();
+            return false;  //兼容触屏
         }
     }