javascript - 关于html5 Canvas 图

Question

如果我不确定是否要从服务器接收矩形、菱形、圆形、梯形或多边形坐标，那么我应该选择哪个图形在 Angular 框架中的 Canvas 上绘制对象？

Answer 1

您可以执行以下操作以避免任何混淆。

• 每个图表都有一组特定的坐标。就像矩形有 4 个，正方形有 4 个，圆形有无限个点(有一个圆心和一个用于绘制的半径)。
• 因此，您可以在 JavaScript 中检查您正在获取哪个图表的坐标，并相应地从服务器响应中获取坐标。
• 或者您可以在服务器响应中添加一个图表类型附加属性，并在 JavaScript 中对其进行过滤。
• 您可以轻松地从服务器发送图表类型，并且可以使用

switch statements or If conditions to check the diagram type and fetch the results from server response accordingly, if you receive response in json then it will be like.

if(response.data.diagram_type === "square"){
   // now you will know what attributes you need for this shape
   // assuming that you have sent coordinates in an array from server and each array has (x, y) so create objects {} not arrays [].
   var coordinate_0 = {};
   var coordinate_1 = {};
   var coordinate_2 = {};
   var coordinate_3 = {};
   coordinate_0 = data.response.coordinates[0];
   coordinate_1 = data.response.coordinates[1];
   coordinate_2 = data.response.coordinates[2];
   coordinate_3 = data.response.coordinates[3];
}else if (response.data.diagram_type === "circle"){
   var coordinate_center = {};
   coordinate_center = data.response.circle_center;
   var radius= data.response.circle_radius;
   // create your shape accordingly.
}
// similarly for other diagram.

// hope it helps.