how to change svg polygon size by update it's points in js
how to change svg polygon size by update it's points in js
matrixTransform
https://stackoverflow.com/questions/40493506/get-updated-polygon-points-after-transformations-svg
function screenPolygon(myPoly){
var sCTM = myPoly.getCTM()
var svgRoot = myPoly.ownerSVGElement
var pointsList = myPoly.points;
var n = pointsList.numberOfItems;
for(var m=0;m<n;m++)
{
var mySVGPoint = svgRoot.createSVGPoint();
mySVGPoint.x = pointsList.getItem(m).x
mySVGPoint.y = pointsList.getItem(m).y
mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
pointsList.getItem(m).x=mySVGPointTrans.x
pointsList.getItem(m).y=mySVGPointTrans.y
}
//---force removal of transform--
myPoly.setAttribute("transform","")
myPoly.removeAttribute("transform")
}
var sCTM = this.poly.getCTM();
// SVGMatrix
var svgRoot = this.poly.ownerSVGElement;
// svg
var mySVGPoint = svgRoot.createSVGPoint();
// SVGPoint {x: 0, y: 0}
log(`sCTM`, sCTM);
log(`svgRoot`, svgRoot);
log(`mySVGPoint`, mySVGPoint);
matrix transforms
https://stackoverflow.com/questions/38525536/svg-polygon-scale-and-set-points-accordingly
Convert SVG polygon points to path
https://stackoverflow.com/questions/16245712/convert-svg-polygon-points-to-path
var points="270,328 270,376 342,376 342,368 358,368 358,320 314,320 298,336 278,336"
var p = points.split(/\s+/);
var path = "";
for( var i = 0, len = p.length; i < len; i++ ){
path += (i && "L" || "M") + p[i]
}
console.log( path )
=> M270,328L270,376L342,376L342,368L358,368L358,320L314,320L298,336L278,336
C#
https://stackoverflow.com/questions/11263936/changing-a-polygons-points
demo
getMinPoint() {
const {
x,
y,
} = this.getBoxSize();
return {
x,
y,
};
}
getMaxPoint() {
const {
x,
y,
width,
height,
} = this.getBoxSize();
return {
x: x + width,
y: y + height,
};
}
getSize() {
const {
width,
height,
} = this.getBoxSize();
return {
width,
height,
};
}
zoomWidth(w) {
// 除最小点, 其他点 x 增大
var sCTM = this.poly.getCTM();
// SVGMatrix
var svgRoot = this.poly.ownerSVGElement;
// svg
var mySVGPoint = svgRoot.createSVGPoint();
// SVGPoint {x: 0, y: 0}
log(`sCTM`, sCTM);
log(`svgRoot`, svgRoot);
log(`mySVGPoint`, mySVGPoint);
const box = this.getBoxSize();
const min = this.getMinPoint();
const max = this.getMaxPoint();
log(`box size`, box, min, max);
log(`poly points`, this.poly.points);
// log(`poly points`, this.poly.getAttribute(`points`));
// 放大 width
const points = [];
[...this.poly.points].forEach(point => {
const {
x,
y,
} = point;
const px = (x === min.x) ? x : x + w;
if(x === min.x) {
log(`min point x`, point)
}
const py = y;
points.push(px, py);
});
this.poly.setAttribute(`points`, points.join(` `));
}
d3
https://stackoverflow.com/questions/49261369/update-polygon-when-points-change-in-d3
zrender
mapbox
canvas
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/12318489.html
未经授权禁止转载,违者必究!