控制多边形在canvas大小范围内移动 10C

限制矩形在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;
}
}
不能有效控制,求各位大神指出我该如何修改,在线等,急,谢谢

3个回答

最大值是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;
}

jslang
天际的海浪 你应该是多边形的每个点都要按比例调整,不能只取最大最小的4个点
大约 2 年之前 回复
qq_37583141
南烟i var M = {"type":"line","x1":xmin,"y1":ymin,"x2":xmax,"y2":ymax}; layer.p1 = M;这里我把多边形变成了矩形,是不对的,望大神指点
大约 2 年之前 回复
jslang
天际的海浪 最大值是x2和y2啊
大约 2 年之前 回复
qq_37583141
南烟i 虽然没什么帮助,不过还是得谢谢你
大约 2 年之前 回复
 先计算出 x,y的最大最小值,
当x最小值<0,则把所有点的x坐标都加上 0-x最小值。
当x最大值>画布宽度,则把所有点的x坐标都减去 x最大值-画布宽度。
y坐标同上

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐