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

来源：互联网发布：mysql精确两位小数编辑：程序博客网时间：2024/05/21 21:33

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

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）定义下拉框

（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();
}

0 0