第5篇白板之图片旋转标记做成箭头（一）

关键词：找到图片旋转代码, 找红点代码

一、图片旋转标记做成箭头

1.1现在图片旋转标记是“点”，需求是做成箭头，便于识别，现状如下：

1.2 找到图片旋转代码

   在widget.min.js中找到如下：

  1）鼠标抬起时，一次旋转90度。

                          mouseup:function() {

                                   varg = this.global;

                                   "clockwise-rotation"=== g.pointsToMove && this.rotation(90),

                                   "counter-clockwise-rotation"=== g.pointsToMove && this.rotation(-90),

                                   is.isDragLastPath&& (tempContext.clearRect(0, 0, canvas_width, innerHeight),context.clearRect(0, 0, canvas_width, innerHeight), this.end()), g.ismousedown= !1

                          },

2） 旋转角度函数如下：

                          rotation: function(angle){

                               if(points.length){

                                  var p = points[points.length - 1],

                                                     point= p[1];

                                                     point[6]? point[6] = (point[6]+angle)%360 : point[6] = angle;

                                                     if(point[6]%360== 0){

                                                         delete point[6];

                                                     }

                                       drawHelper.redraw(is.isDragLastPath);

                                       this.init();

                               }

                          },

注：旋转的代码如上，经验证是对的，打的标记也能跟踪，如下：

接下来要找那6个红点是在哪里做的。

1.3 找红点代码

1) 红点如下：

注：发现有两套图片旋转代码，不知哪一套作用的，全删除了，也没影响。重启下电脑试试。

每次要重启nodejs或更换房间号，这样，才能生效，经测试，起作用的代码为：widget.min.js

if("image" === p[0]){

                                           var num = 0;

                        if(point[6]&&(point[6]%180 != 0)){

                            num = 6;

                        }

                                           if(dHelper.isPointInPath(x, y,point[1+num]+point[3+num], point[2+num]+point[4+num]/2)){

                                               g.pointsToMove ="clockwise-rotation";

                                           }

                                           if(dHelper.isPointInPath(x, y,point[1+num], point[2+num]+point[4+num]/2)){

                                               g.pointsToMove ="counter-clockwise-rotation";

                                           }

                                           if (dHelper.isPointInPath(x, y,point[1+num], point[2+num])) {

                            g.pointsToMove = 'stretch-first';

                        }

                        if(dHelper.isPointInPath(x, y, point[1+num] + point[3+num], point[2+num])) {

                            g.pointsToMove ='stretch-second';

                        }

                        if(dHelper.isPointInPath(x, y, point[1+num], point[2+num] + point[4+num])) {

                            g.pointsToMove ='stretch-third';

                        }

                        if(dHelper.isPointInPath(x, y, point[1+num] + point[3+num], point[2+num] +point[4+num])) {

                            g.pointsToMove ='stretch-last';

                        }

                                       }

注：每次换个房间号，刷新一下就成。（不用强制刷新ctrl+F5）

2) 红点代码如下：

drawHelper.redraw(is.isDragLastPath),

g.ismousedown && this.dragShape(x,y),

 is.isDragLastPath && this.init()

准确来说，是上面三句中的最后一句，如下：

is.isDragLastPath && this.init()，去掉这一句，图像变为：

注：不再有红点。

2016年11月18日星期五