限制矩形在canvas大小范围内移动的function的如下:
DrawingManager.prototype.limitOut = function (layer) {
console.log(layer);
if (layer.y < 1) {
layer.y = 1;
}
if (layer.x < 1) {
layer.x = 1;
}
if (layer.x + layer.width > layer.canvas.width + 1) {
layer.x = layer.canvas.width - layer.width - 1;
console.log("layer.canvas.width =" + layer.canvas.width,"layer.width = " + layer.width,"layer.x =" + layer.x);
}
if (layer.y + layer.height > layer.canvas.height + 1) {
layer.y = layer.canvas.height - layer.height - 1;
console.log("layer.canvas.height =" + layer.canvas.height,"layer.height = " + layer.height," layer.y = " + layer.y);
}
}
模仿矩形的写法,我写的如下:
DrawingManager.prototype.limit_Poly = function (layer){
//var Map = JSON.stringify(layer.p1);
console.log(layer);
var map = layer.p1;
console.log(map);
var xmax = -Infinity;
var ymax = -Infinity;
var xmin = Infinity;
var ymin = Infinity;
for (var n in map) {
if (n.charAt(0)=="x") {
xmax = Math.max(map[n],xmax);
xmin = Math.min(map[n],xmin);
}
if (n.charAt(0)=="y") {
ymax = Math.max(map[n],ymax);
ymin = Math.min(map[n],ymin);
}
}
console.log("xmax = "+ xmax +", ymax = "+ ymax +", xmin = "+ xmin +", ymin = "+ ymin);
var M = {"type":"line","x1":xmin,"y1":ymin,"x2":xmax,"y2":ymax};
layer.p1 = M;
console.log(layer.p1);
if (layer.p1.y1 < 1) {
layer.p1.y1 = 1;
}
if (layer.p1.x1 < 1){
layer.p1.x1 = 1;
}
if (layer.p1.x1 > layer.canvas.width){
layer.p1.x1 = layer.canvas.width - 1;
}
if (layer.p1.y1 > layer.canvas.height){
layer.p1.y1 = layer.canvas.height -1;
}
}
不能有效控制,求各位大神指出我该如何修改,在线等,急,谢谢
最大值是x3和y2啊
if (layer.p1.x2 > layer.canvas.width){
layer.p1.x2 = layer.canvas.width - 1;
}
if (layer.p1.y2 > layer.canvas.height){
layer.p1.y2 = layer.canvas.height -1;
}
推荐插件https://blog.csdn.net/qianqianyixiao1/article/details/80902726
先计算出 x,y的最大最小值,
当x最小值<0,则把所有点的x坐标都加上 0-x最小值。
当x最大值>画布宽度,则把所有点的x坐标都减去 x最大值-画布宽度。
y坐标同上