Looking at this specific array structure:
T1 = [
{
tipo:"m",
pos: [
[0,0]
]
},{
tipo:"b",
pos: [
[0,0.223,0.1,0.5,0.11,0.5]
]
},
{
tipo:"m",
pos: [
[0,0]
]
}
]
My goal is to differentiate types and draw accordingly.
function caminho(c, a) {
c.beginPath();
a.forEach(function(value, i) {
if (value.tipo === "m") {
c.moveTo(value.pos[i][0], value.pos[i][1]);
console.log(value.pos);
} else if (value.tipo === "l") {
value.pos.forEach(function(pos, j) {
c.lineTo(pos[0], pos[1]);
});
}
else if(value.tipo === "q") {
value.pos.forEach(function(pos,j) {
c.quadraticCurveTo(pos[0], pos[1], pos[2], pos[3]);
});
}
else if(value.tipo === "a") {
value.pos.forEach(function(pos,j) {
c.arc(pos[0],pos[1],pos[2],pos[3],pos[4]);
});
}
else if(value.tipo === "b") {
value.pos.forEach(function(pos,j) {
c.bezierCurveTo(pos[0],pos[1],pos[2],pos[3],pos[4],pos[5]);
})
}
});
c.closePath();
}
I've encountered an issue where removing the last "m" type from T1 resolves the problem; however, I would like to achieve the following result with the T1 structure using arrays:
c2d.beginPath();
c2d.moveTo(0, 0);
c2d.bezierCurveTo(0,0.223,0.1,0.5,0.11,0.5);
c2d.moveTo(0, 0);
c2d.closePath();