多边形旋转角度 javascript
Rotation of polygon by angle javascript
我想旋转多边形
我有这样的多边形数组
[ [-17.999999999999986, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ]
第一步:我计算质心
function getCentroid(coord) {
var center = coord.reduce(function (x,y) {
return [x[0] + y[0]/coord.length, x[1] + y[1]/coord.length]
}, [0,0])
return center;
}
第二步:旋转:
function rotate(CX, CY, X, Y, angle) {
var rad = angle * (Math.PI / 180.0);
var nx = Math.cos(rad) * (X-CX) - Math.sin(rad) * (Y-CY) + CX;
var ny = Math.sin(rad) * (X-CX) + Math.cos(rad) * (Y-CY) + CY;
return [nx,ny];
}
问题是每次我旋转多边形时它都会变大。
也许我的公式有问题,但是很多程序员都在使用这个公式。
感谢您的回答。
你标记了 svg.js 所以我假设你正在使用它。
所以这就是我的做法。
// assuming that you have a div with the id "canvas" here
var canvas = SVG('canvas')
var angle = 20
// draw polygon
var polygon = canvas.polygon([ [-18, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ])
.fill('none')
.stroke('black')
// we clone it so we have something to compare
var clone = polygon.clone()
// get center of polygon
var box = polygon.bbox()
var {cx, cy} = box
// get the values of the points
var rotatedPoints = polygon.array().valueOf().map((p) => {
// transform every point
var {x, y} = new SVG.Point(p)
.transform(new SVG.Matrix().rotate(angle, cx, cy))
return [x, y]
})
// update polygon with points
polygon.plot(rotatedPoints)
Fiddle: https://jsfiddle.net/Fuzzy/3qzubk5y/1/
当然,您不需要先制作多边形来旋转点。您可以直接使用我们的数组并在其上调用相同的映射函数。但是在这种情况下你需要自己弄清楚cx和cy:
function getCentroid(coord) {
var center = coord.reduce(function (x,y) {
return [x[0] + y[0]/coord.length, x[1] + y[1]/coord.length]
}, [0,0])
return center;
}
var canvas = SVG("canvas")
var points = [ [-18, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ]
var center = getCentroid(points)
var angle = 20
// polygon before rotation
canvas.polygon(points).fill('none').stroke('black')
// get the values of the points
var rotatedPoints = points.map((p) => {
// transform every point
var {x, y} = new SVG.Point(p)
.transform(new SVG.Matrix().rotate(angle, center[0], center[1]))
return [x, y]
})
// polygon after rotation
canvas.polygon(rotatedPoints).fill('none').stroke('black')
Fiddle: https://jsfiddle.net/Fuzzy/g90w10gg/
所以既然你的质心函数似乎工作,你的错误一定是在你的旋转函数的某个地方。但是,我更喜欢在有库的情况下使用库的功能。无需重新发明 weel :)
// 编辑:
我对你的质心函数做了一些改进,这样变量命名就更清楚了:
function getCentroid(coord) {
var length = coord.length
var center = coord.reduce(function (last, current) {
last.x += current[0] / length
last.y += current[1] / length
return last
}, {x: 0, y: 0})
return center;
}
我想旋转多边形 我有这样的多边形数组 [ [-17.999999999999986, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ]
第一步:我计算质心
function getCentroid(coord) {
var center = coord.reduce(function (x,y) {
return [x[0] + y[0]/coord.length, x[1] + y[1]/coord.length]
}, [0,0])
return center;
}
第二步:旋转:
function rotate(CX, CY, X, Y, angle) {
var rad = angle * (Math.PI / 180.0);
var nx = Math.cos(rad) * (X-CX) - Math.sin(rad) * (Y-CY) + CX;
var ny = Math.sin(rad) * (X-CX) + Math.cos(rad) * (Y-CY) + CY;
return [nx,ny];
}
问题是每次我旋转多边形时它都会变大。 也许我的公式有问题,但是很多程序员都在使用这个公式。
感谢您的回答。
你标记了 svg.js 所以我假设你正在使用它。 所以这就是我的做法。
// assuming that you have a div with the id "canvas" here
var canvas = SVG('canvas')
var angle = 20
// draw polygon
var polygon = canvas.polygon([ [-18, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ])
.fill('none')
.stroke('black')
// we clone it so we have something to compare
var clone = polygon.clone()
// get center of polygon
var box = polygon.bbox()
var {cx, cy} = box
// get the values of the points
var rotatedPoints = polygon.array().valueOf().map((p) => {
// transform every point
var {x, y} = new SVG.Point(p)
.transform(new SVG.Matrix().rotate(angle, cx, cy))
return [x, y]
})
// update polygon with points
polygon.plot(rotatedPoints)
Fiddle: https://jsfiddle.net/Fuzzy/3qzubk5y/1/
当然,您不需要先制作多边形来旋转点。您可以直接使用我们的数组并在其上调用相同的映射函数。但是在这种情况下你需要自己弄清楚cx和cy:
function getCentroid(coord) {
var center = coord.reduce(function (x,y) {
return [x[0] + y[0]/coord.length, x[1] + y[1]/coord.length]
}, [0,0])
return center;
}
var canvas = SVG("canvas")
var points = [ [-18, 587.25], [-14, 197.25], [544, 169.25], [554, 551.25] ]
var center = getCentroid(points)
var angle = 20
// polygon before rotation
canvas.polygon(points).fill('none').stroke('black')
// get the values of the points
var rotatedPoints = points.map((p) => {
// transform every point
var {x, y} = new SVG.Point(p)
.transform(new SVG.Matrix().rotate(angle, center[0], center[1]))
return [x, y]
})
// polygon after rotation
canvas.polygon(rotatedPoints).fill('none').stroke('black')
Fiddle: https://jsfiddle.net/Fuzzy/g90w10gg/
所以既然你的质心函数似乎工作,你的错误一定是在你的旋转函数的某个地方。但是,我更喜欢在有库的情况下使用库的功能。无需重新发明 weel :)
// 编辑: 我对你的质心函数做了一些改进,这样变量命名就更清楚了:
function getCentroid(coord) {
var length = coord.length
var center = coord.reduce(function (last, current) {
last.x += current[0] / length
last.y += current[1] / length
return last
}, {x: 0, y: 0})
return center;
}