i've trouble to get width/height of a triangle shape in object recording points/coordinates. I use it to output as SVG or for CanvasRenderer2d. I tried it with a drawSVG function and the drawing is OK, it's just the width and height i've error with.
My lightened code is like this(discarding no relevant properties like line weight, colors...):
function Triangle(name, arrayX, arrayY){
return {
name:name,
x:arrayX,
y:arrayY,
width:Math.max(this.x)-Math.min(this.x),
height:Math.max(this.y)-Math.min(this.y),
getWidth:function(){return Math.max(this.x)-Math.min(this.x) },
getHeight:function(){return Math.max(this.x)-Math.min(this.x) }
}
}
let tri=Triangle('tri', [15, 42, 84], [10, 37, 48])
console.log(tri.width)//-- NaN
console.log(tri.getWidth())//-- NaN
/** i've tried using ... this way and having same issue:
width:Math.max(...this.x)-Math.min(...this.x),
height:Math.max(...this.y)-Math.min(...this.y),
getWidth:function(){return Math.max(...this.x)-Math.min(...this.x) },
getHeight:function(){return Math.max(...this.x)-Math.min(...this.x) }
let tri=ShapeTriangle('tri', [15, 42, 84], [10, 37, 48])
console.log(tri.width)//-- NaN
console.log('tri.getWidth => '+tri.getWidth())//-- NaN
*/
/**-----------------------------------------------
* more complete "real" code use extended object (inheritance) like this
* but i don't think it's where is the trouble is
function PolygonShape(arrayX,arrayY){//--Abstract
return {primitive:'PolygonShape',
type:'PolygonShapeAbstract',
name:null,
x:arrayX,y:arrayY,
component:new Map(),
list:[]
//-- others methods such move coordinates and hit tests
}
}
function ShapeTriangle(name, x, y, x1, y1,x2, y2){
let tri=PolygonShape([x,x1,x2],[y,y1,y2])
tri.type='PolygonShapeTriangle'
tri.name=name
tri.width=Math.max(this.x)-Math.min(this.x)
tri.getWidth=function(){return Math.max(this.x)-Math.min(this.x)}
tri.heigth= Math.max(this.y)-Math.min(this.y)
tri.getHeight=function(){return Math.max(this.y)-Math.min(this.y)}
return tri
}*/You have 2 issues with your code.
You are calling this.x which is not defined, try using arrayX and arrayY.
You need to use the spread operator, Math.max and Math.min functions require multiple arguments not a single argument.
Try the following:
function Triangle(name, arrayX, arrayY){
return {
name:name,
x:arrayX,
y:arrayY,
width:Math.max(...arrayX)-Math.min(...arrayX),
height:Math.max(...arrayY)-Math.min(...arrayY),
getWidth:function(){return Math.max(...arrayX)-Math.min(...arrayX) },
getHeight:function(){return Math.max(...arrayX)-Math.min(...arrayX) }
}
}
let tri=Triangle('tri', [15, 42, 84], [10, 37, 48])
console.log(tri.width)