HTML在画布中对图片，图片上另一个图层上的点，根据点绘制的路线进行缩放1

之前已经讲过根据点绘制路线，以及不包括路线的缩放，故不多讲这些。

1 首先是画路线，这个不再说了

2 使用Button进行缩放

由于放大，缩小一样，所以只讲缩小

因为之前绘制了路线，在进行缩放时，需要清除路线，重新绘制

function Small() {           var width1 = $("#ImgMap").width() / 1.2;         var height1 = $("#ImgMap").height() / 1.2;           $("img").attr("width", width1);          $("img").attr("height", height1);           var lstMapPoint = $(".MapPoint");           var i = 1;           var x1, y1, x2, y2;          CleanLine(width1, height1);          for (i = 0; i < lstMapPoint.length; i++) {              x1 = $($(".MapPoint").eq(i)).css("left");              y1 = $($(".MapPoint").eq(i)).css("top");                $(".MapPoint").eq(i).css("left", parseInt(x1) / 1.2);              $(".MapPoint").eq(i).css("top", parseInt(y1) / 1.2);           }          alert(2);            LoadLine();//上一篇已经讲过绘制路线，这里不再贴出来代码了        }   //清除路线         function CleanLine(width, height) {             var canvas = $("#myCanvas");             canvas.attr("width", width);             canvas.attr("height", height);             var canvas = document.getElementById("myCanvas");             var ctx = canvas.getContext('2d');             ctx.clearRect(0, 0, width, height);//主要是这一句         }

2 使用滚轮进行缩放

由于事先方式和第一篇是完全一样的，所以不讲了

3使用下拉框

（1）定义下拉框

    <div class="Toolbar_SearchBox" style="width:250px;margin-right:450px">         <div class="input-group">             <span class="input-group-addon">比例</span>             <select class="form-control " id="Part" name="Part" onchange="Change()">                 <option id="select" selected="selected" value=""></option>                 <option value="1">20%</option>                 <option value="2">50%</option>                 <option value="3">70%</option>                 <option value="4">100%</option>                 <option value="5">150%</option>                 <option value="6">200%</option>                 <option value="7">300%</option>                 <option value="8">400%</option>             </select>         </div>     </div>

（2）缩放

 

//通过下拉菜单调整图片大小         var y = false;         var width = 0;         var height = 0;//必须赋值         var StatusChange = 1;         var Status = 0;         var newv = 1;         function Change() {             var v = $("#Part option:selected").text();             Status = newv;             newv = v.replace(/%/, "");//当前比例             newv = newv / 100;             //alert(Status);             StatusChange = newv / Status;//当前与上一次的比值             if (y == false) {                 width = $("#ImgMap").width();                 height = $("#ImgMap").height();                 y = true;             }             var lstMapPoint = $(".MapPoint");             width1 = width * newv;             height1 = height * newv;             CleanLine(width1, height1);             $("img").attr("width", width1);             $("img").attr("height", height1);             var i;             var x1, x2, y1, y2;             for (i = 0; i < lstMapPoint.length; i++) {                 x1 = lstMapPoint.eq(i).css("left");                 y1 = lstMapPoint.eq(i).css("top");                lstMapPoint.eq(i).css("left", ((parseInt(x1) + 20) * StatusChange - 20) + "px");                 lstMapPoint.eq(i).css("top", ((parseInt(y1) + 20) * StatusChange - 20) + "px");             }            LoadLine();         }