Question

我试图绘制一个圆角矩形的路径，其中边是可选的但有一些困难。我发现并显示了类似的问题，但这些功能要求现有的路径数据。我从零开始。

该功能如下所示：

function drawRoundRect(width, height, sides, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius) {
    pathData = "";
    return pathData;
}

如果我知道怎么做，我就不会在这里问。

用户可以说：

var myPath = drawRoundRect(100,100,"top left right", 10, 10, 10, 10);

它将创建一个三边形的矩形，其中未绘制矩形的底线。

或者对于一个完整的矩形，他们会写这个：

var myPath = drawRoundRect(100,100,"top left right bottom", 10, 10, 10, 10);

// top and bottom no rounded corners
var myPath = drawRoundRect(100,100,"top bottom", 0, 0, 0, 0);

Answer 1

您需要在函数的参数列表中添加x和y参数，以便知道矩形的位置。

您需要在绘制角落时进行设计选择。当至少有一个相邻边被绘制时是否是角？或者仅在绘制两个相邻边时绘制角点？

您需要将路径分为八个部分：四条线（每条线一条）和四条弧线（每个角落一条）。这将要求您计算每边两个点（即每个尺寸的线的终点）。然后绕过矩形，将每个部分添加或跳过到路径数据。使用线命令（L | l | H | h | V | v）添加线段。使用圆弧命令（A | a）添加圆弧截面。使用移动命令（M | m）跳过部分。

编写一个函数来绘制带有可选边的圆角矩形（与CSS相同）？

1 个答案: