绘图元素¶
用于自动分级绘图的画布。
请注意，此元素不支持手绘直线/曲线。对于更通用的手动分级工程图，请考虑使用 pl-excalidraw。对于可自动分级的数学曲线草图，请考虑使用 pl-sketch。
pl-drawing 画布可以在两种模式下使用。在仅显示画布（gradable="false"，默认值）中，它呈现问题中创作的绘图对象。在可分级画布 (gradable="true") 中，学生将对象放置在画布上，ZJUI-Learn 根据 pl-drawing-answer 中的对象对它们进行评分； pl-drawing-initial 中的对象会显示但不会评分。
仅显示画布的元素¶
pl-drawing元件¶
pl-drawing 元素显示画布，可用于显示初始绘图对象或期望进行分级的绘图对象。
画布的坐标系位于左上角/左上角，如下图所示。
样品元素¶
<pl-drawing answers-name="fbd"> </pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
gradable |
布尔 | 假 | gradable = true 期望将对象放置在画布中进行分级，而 gradable = false 画布将用于仅显示图形。 |
answers-name |
字符串 | — | 用于存储学生输入数据的变量名称。当 gradable = true 时需要此变量。输入数据将存储在data[“submitted_answers”][answers-name]中。 |
weight |
整数 | 1 | 计算元素的加权平均分数时使用的权重。 |
width |
浮动 | 580 | 580画布的水平宽度（以像素为单位）。 |
height |
浮动 | 320 | 320画布的垂直高度（以像素为单位）。 |
grid-size |
整数 | 20 | 画布背景的方形网格的大小（以像素为单位）。如果是grid-size = 0，则不绘制网格并且画布背景是透明的。 |
snap-to-grid |
布尔 | 假 | 如果为 true，则放置在画布中的对象会捕捉到最近的网格点。否则，它们可以放置在网格之外。 |
tol |
浮动 | 0.5*grid-size |
检查对象位置的容差（以像素为单位）。误差计算为预期位置与提交位置之间的绝对差。 |
angle-tol |
浮动 | 10 | 10检查角度的公差（以度为单位）。误差计算为预期角度与提交角度之间的绝对差。 |
show-tolerance-hint |
布尔 | 真实 | 在画布下显示公差提示。当 gradable = true 时，默认为 true。 |
tolerance-hint |
字符串 | 由 tol 和 angle-tol 计算得出 |
提示解释对对象进行分级时使用的容差。默认情况下，它是根据位置公差 (tol) 和角度公差 (angle-tol) 生成的，例如“位置的预期公差为 1/2 方格，角度的预期公差为 10 度。” |
disregard-extra-elements |
布尔 | 假 | 如果为 true，则当额外的元素与相同的引用对象匹配时，它们将被忽略。否则，多个匹配元素将减少奖励积分。 |
allow-blank |
布尔 | 假 | 是否允许提交没有用户放置的元素。默认情况下，没有用户放置元素的提交将不会被评分（无效提交）。 |
hide-answer-panel |
布尔 | 真实 | 如果为 true，则正确答案不会显示在答案面板中。 |
show-score |
布尔 | 假 | 是否在此元素画布上方的标题中显示分数徽章。默认为 false 以实现向后兼容性。 |
aria-label |
字符串 | — | 描述该图的文本。请参阅辅助功能部分 |
aria-description |
字符串 | — | 详细描述该图的文本。请参阅辅助功能部分 |
示例实现¶
- demo/drawing/centroid: 使用
weight、allow-blank和show-score进行分级绘图
pl-drawing-initial元件¶
pl-drawing-initial 将对将在 pl-drawing 定义的画布中显示的对象进行分组。
例如，pl-drawing-initial 可用于创建作为问题正文的一部分显示的图形：
<pl-drawing grid-size="0">
<pl-drawing-initial>
<!-- create the image here -->
</pl-drawing-initial>
</pl-drawing>
要在可分级画布中使用，请参阅 可分级画布的元素 下的 pl-drawing-initial 部分。
可分级画布的元素¶
可分级画布示例¶
可分级画布需要元素 pl-drawing-answer，但还有其他元素也可能有所帮助。下面的示例说明了可分级画布的典型部分。
样品元素¶
<pl-drawing grid-size="20" gradable="true" answers-name="box" width="320">
<pl-drawing-answer draw-error-box="true">
<pl-vector x1="160" y1="160" angle="-45"></pl-vector>
</pl-drawing-answer>
<pl-drawing-initial>
<pl-coordinates
x1="160"
y1="160"
width="100"
angle="0"
label="A"
offsetx="-20"
></pl-coordinates>
</pl-drawing-initial>
<pl-controls>
<pl-controls-group label="Graded objects:">
<pl-drawing-button type="pl-vector"></pl-drawing-button>
</pl-controls-group>
<pl-controls-group label="Delete button:">
<pl-drawing-button type="delete"></pl-drawing-button>
</pl-controls-group>
</pl-controls>
</pl-drawing>
pl-drawing-answer元件¶
该元素将包含所有将被评分的元素（检查正确性）。
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
draw-error-box |
布尔 | 假 | 当 true 时，放置在 pl-drawing-answer 内的对象将在答案面板中显示其各自的错误边界框。 |
在 pl-drawing-answer 上设置此属性可在答案面板中显示所有评分对象的错误框。 pl-drawing-answer 内支持的对象上的对象级 draw-error-box 设置会覆盖该对象的父设置。
在上面的示例中，pl-vector 是唯一已评分的对象。相应的答案面板给出为：
pl-drawing-initial元件¶
此元素包含应出现在可分级画布中但不应分级的初始对象。 pl-drawing-initial 内的对象未分级，而 pl-drawing-answer 内的对象已分级。当在正确面板中显示正确答案时，pl-drawing-initial 和 pl-drawing-answer 中的对象会合并。
<pl-drawing gradable="true" answers-name="add-objects">
<pl-drawing-initial>
<!-- objects that define the initial state are placed here -->
</pl-drawing-initial>
<pl-drawing-answer>
<!-- objects that define the correct answer are placed here -->
</pl-drawing-answer>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
draw-error-box |
布尔 | 假 | 当 true 时，放置在 pl-drawing-initial 内的对象将在答案面板中显示其各自的错误边界框。 |
问题的最终版本不应具有属性 draw-error-box。但是，此属性在创建问题的过程中可能会有所帮助。作者可以选择启动可分级画布，包括 pl-drawing-initial 中的所有对象
draw-error-box=true，查看分级对象如何放置在画布中，以及默认容差对于特定问题是否合理，或者是否需要调整。问题完成后，可以将预期评分的对象从 pl-drawing-initial 中删除并添加到 pl-drawing-answer 中。作者可以决定当正确答案显示时学生是否应该看到错误框。默认情况下，draw-error-box="false"。
pl-controls元件¶
元素 pl-controls 将添加允许学生在画布中放置对象的按钮。元素 pl-controls-group 可用于对具有相似属性的按钮进行分组，例如分级和非分级对象。
<pl-controls>
<pl-controls-group label="Graded objects:">
<pl-drawing-button type="pl-vector"></pl-drawing-button>
</pl-controls-group>
<pl-controls-group label="Delete button:">
<pl-drawing-button type="delete"></pl-drawing-button>
</pl-controls-group>
</pl-controls>
pl-controls 元素仅需要一个属性 type，它与上面定义的元素名称相对应。当用户单击控制按钮时，将生成具有所有默认值的元素。要覆盖任何默认值，可以在要创建的元素上设置的任何属性（在 type 中指定）都可以作为可选属性添加到 pl-controls 中。 （参见下面的 demoDrawingCustomizedButtons 示例）
示例实现¶
示例 demo/drawing/gradeVector 说明了所有已实施分级例程的 pl-drawing-button。
示例 [演示/绘图/按钮] 说明了所有可以创建可放置对象的 pl-drawing-button。
示例 demo/drawing/customizedButtons 说明了如何通过按钮生成自定义对象。
pl-drawing-buttons元件¶
插入一个点¶
<pl-drawing-button type="pl-point"></pl-drawing-button>
此按钮向画布添加一个点。评分算法将检查提交的分数是否在错误框中。默认情况下，pl-point 的错误框是一个以正确点为中心、边长为 tol = 0.5*grid-size 的正方形。容差 tol 是 pl-drawing 的一个属性，用于确保所有元素使用相同的容差。
插入向量¶
<pl-drawing-button type="pl-vector"></pl-drawing-button>
此按钮将矢量添加到画布。当锚点（矢量尾部）的位置位于误差边界框内并且角度的绝对误差小于 angle-tol 时，矢量被标记为正确。
默认情况下，pl-vector 的错误框是与矢量方向对齐的矩形。矩形的宽度为tol，高度为hb + hf，如下图所示。 hb = offset-backward + tol 和 hf = offset-forward + tol。属性 offset-backward 默认设置为向量的长度。默认情况下，属性 offset-forward 设置为零。公差 tol 和 angle-tol 是 pl-drawing 的属性，用于确保所有元素使用相同的公差。
如果矢量的方向不重要，因此矢量 p 和 -p 都被认为是正确的，则属性 disregard-sense 应设置为 true。
如果期望向量作为正确答案，但作者不想为其分配等级，则可以将属性 optional-grading 设置为 true。在这种情况下，评分算法不会将分数分配给向量，但也不会通过将其视为额外对象来惩罚学生。
插入圆弧向量¶
<pl-drawing-button type="pl-arc-vector-CCW"></pl-drawing-button>
<pl-drawing-button type="pl-arc-vector-CW"></pl-drawing-button>
此按钮将圆弧矢量添加到画布。当锚点的位置（弧向量的中心）位于错误边界框内并且方向正确时，弧向量被标记为正确。
默认情况下，pl-arc-vector 的错误框是一个以锚点为中心、边长为 tol = 0.5*grid-size 的正方形。容差 tol 是 pl-drawing 的一个属性，用于确保所有元素使用相同的容差。
如果圆弧矢量的方向不重要（顺时针和逆时针方向均可接受），则属性 disregard-sense 应设置为 true。
插入分布式负载¶
<pl-drawing-button type="pl-distributed-load" w1="20" anchor-is-tail="true"></pl-drawing-button>
<pl-drawing-button type="pl-distributed-load" w1="20" anchor-is-tail="false"></pl-drawing-button>
<pl-drawing-button type="pl-distributed-load"></pl-drawing-button>
此按钮向画布添加分布式负载。当锚点（基线中心）的位置位于误差边界框内、角度的绝对误差小于 angle-tol、范围 (interval) 的绝对误差小于 tol 且预期分布匹配（如果是均匀分布，则为 w1 = w2，对于三角形载荷，提交的答案中的 w1>w2 或 w2>w1 与正确答案匹配）。
pl-distributed-load 的误差框的定义方式与 pl-vector 相同，但将锚点视为基线的中心。如果分布式负载的方向不重要，则属性 disregard-sense 应设置为 true。
对于许多问题，需要通过设置属性 offset-forward 和 offset-backward 来微调错误边界框。合适的值取决于问题的上下文，例如梁在分布载荷方向上的尺寸。
插入“帮助”行¶
<pl-drawing-button type="help-line"></pl-drawing-button>
此按钮将在画布上添加一条未分级的线，但学生可以使用它来方便放置其他对象。
删除先前放置在画布中的任何对象¶
<pl-drawing-button type="delete"></pl-drawing-button>
此按钮删除先前放置在画布上的对象。
组织和格式元素¶
pl-coordinates元件¶
pl-coordinates 元素添加 2D 坐标系。
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-coordinates x1="60" y1="80" label="0" angle="30"></pl-coordinates>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 坐标系原点相对于画布原点（上/左上角）的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 坐标系原点相对于画布原点（上/左上角）的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 30 | 箭头向量的长度。 |
angle |
浮动 | 0 | 坐标系的角度。顺时针方向时角度为正。 |
label |
字符串 | - | 用于标记坐标系中心的文本 |
offsetx |
浮动 | -16 | -16 label 距坐标系原点的水平距离。 |
offsety |
浮动 | -10 | label 距坐标系原点的垂直距离。 |
label-x |
字符串 | x | 用于标记水平箭头向量的文本 (x-axis) |
offsetx-label-x |
浮动 | 0 | label-x 距水平箭头矢量 (x-axis) 尖端的水平距离。 |
offsety-label-x |
浮动 | 0 | label-x 距水平箭头矢量 (x-axis) 尖端的垂直距离。 |
label-y |
字符串 | y | 用于标记垂直箭头向量的文本 (y-axis) |
offsetx-label-y |
浮动 | -20 | -20 label-y 距垂直箭头矢量 (y-axis) 尖端的水平距离。 |
offsety-label-y |
浮动 | -10 | label-y 距垂直箭头矢量 (y-axis) 尖端的垂直距离。 |
color |
字符串 | 黑色 | 设置坐标系的颜色（PL颜色或HTML颜色） |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
arrow-head-width |
浮动 | 1 | 箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 1 | 箭头长度的比例因子。 |
示例实现¶
pl-text元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="0">
<pl-drawing-initial>
<pl-text x1="20" y1="40" label="Moment of inertia:" latex="false"></pl-text>
<pl-text x1="20" y1="80" label="\\int_A y^2 dA"></pl-text>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
label |
字符串 | “文字” | 要添加的文本。 |
latex |
布尔 | 真实 | 使用乳胶在 label 中添加文本。否则，使用 Times New Romans。 |
font-size |
浮动 | 16 | 16字体大小。 |
x1 |
浮动 | 40 | 40 x 文本左上角的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 文本左上角的位置，即距画布上边框的垂直距离 |
offsetx |
浮动 | 0 | 从 x1 沿 x 方向偏移 |
offsety |
浮动 | 0 | y1 |
示例实现¶
pl-dimensions元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-rod x1="60" y1="100" x2="120" y2="40" height="60"></pl-rod>
<pl-dimensions x1="60" y1="100" x2="120" y2="40"></pl-dimensions>
<pl-dimensions
x1="60"
y1="100"
x2="120"
y2="40"
dim-offset="-40"
stroke-color="brown"
start-support-line="true"
end-support-line="true"
></pl-dimensions>
<pl-dimensions
x1="60"
y1="100"
x2="120"
y2="40"
dim-offset="60"
dim-offset-angle="0"
stroke-color="blue3"
start-support-line="true"
end-support-line="true"
></pl-dimensions>
<pl-dimensions
x1="60"
y1="100"
x2="120"
y2="40"
dim-offset="100"
dim-offset-angle="-90"
stroke-color="green3"
></pl-dimensions>
<pl-dimensions x1="60" y1="100" width="60" stroke-color="pink3" label="a"></pl-dimensions>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 线条起点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 线条起点的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 30 | 线的宽度。 |
angle |
浮动 | 0 | 绕线起点旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
x2 |
浮动 | - | x 线条终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 线条终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
dim-offset |
浮动 | 0 | 默认情况下，尺寸放置在点 (x1,y1) 和 (x2,y2) 之间。当 dim-offset 不为零时，尺寸将平行于 (x1,y1) 和 (x2,y2) 定义的方向平移，偏移距离为 dim-offset。 |
dim-offset-angle |
浮动 | - | 定义 dim-offset-angle 时，尺寸具有由 dim-offset-angle 围绕点 (x1,y1) 定义的方向，而 dim-offset 是距 (x1,y1) 的距离。 |
start-support-line |
布尔 | 假 | 当 true 时，它绘制一条连接参考点 (x1,y1) 和尺寸线起点的虚线（当 dim-offset 不为零时，这是不同的）。 |
end-support-line |
布尔 | 假 | 当 true 时，它绘制一条连接参考点 (x2,y2) 和尺寸线终点的虚线（当 dim-offset 不为零时，这是不同的）。 |
label |
字符串 | - | 用于标记尺寸的文本。 |
offsetx |
浮动 | 0 | label 距默认标签位置的水平距离，垂直于尺寸线中心 10 像素。 |
offsety |
浮动 | 0 | label 距默认标签位置的垂直距离，即垂直于尺寸线中心的 10 像素。 |
stroke-color |
字符串 | 黑色 | 设置线条的颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 1 | 设置描边的宽度。 |
draw-start-arrow |
布尔 | 真实 | 在线的起点处画一个箭头。 |
draw-end-arrow |
布尔 | 真实 | 在线的终点处画一个箭头。 |
arrow-head-width |
浮动 | 1.5 | 1.5箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 1.5 | 1.5箭头长度的比例因子。 |
示例实现¶
pl-arc-dimensions元件¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-fixed-pin x1="80" y1="100" angle="50" color="turquoise1"></pl-fixed-pin>
<pl-coordinates x1="80" y1="100" width="80"></pl-coordinates>
<pl-arc-dimensions
x1="80"
y1="100"
end-angle="50"
label="\\theta"
offsetx="5"
offsety="-5"
end-support-line="true"
></pl-arc-dimensions>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 圆弧中心的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 圆弧中心的位置，即距画布上边框的垂直距离。 |
radius |
浮动 | 20 | 圆弧半径。 |
start-angle |
浮动 | 0 | 圆弧的起始角度。角度是从水平轴开始测量的，顺时针方向为正。 |
end-angle |
浮动 | 60 | 圆弧的结束角。角度是从水平轴开始测量的，顺时针方向为正。从 start-angle 到 end-angle 形成顺时针方向的圆弧。 |
start-support-line |
布尔 | 假 | 当 true 时，它从参考点 (x1,y1) 绘制一条虚线，宽度为 1.5*radius，方向由 start-angle 给出， |
end-support-line |
布尔 | 假 | 当 true 时，它从参考点 (x2,y2) 绘制一条虚线，宽度为 1.5*radius，方向由 end-angle 给出， |
draw-center |
布尔 | 假 | 画出圆弧的中心。 |
draw-start-arrow |
布尔 | 假 | 在 start-angle 处绘制箭头。 |
draw-end-arrow |
布尔 | 真实 | 在 end-angle 处绘制箭头。 |
label |
字符串 | - | 用于标记弧角的文本。 |
offsetx |
浮动 | 0 | label 距圆弧中点的水平距离。 |
offsety |
浮动 | 0 | label 距圆弧中点的垂直距离。 |
stroke-color |
字符串 | 黑色 | 设置圆弧的描边颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 1 | 设置描边的宽度。 |
arrow-head-width |
浮动 | 1 | 箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 1 | 箭头长度的比例因子。 |
示例实现¶
pl-drawing-group元件¶
元素 pl-drawing-group 将多个元素组合为一个组，以允许元素组变得可见或不可见。
<pl-drawing>
<pl-drawing-initial>
<pl-drawing-group visible="true">
<!-- objects here will be displayed -->
</pl-drawing-group>
<pl-drawing-group visible="false">
<!-- objects here will not be displayed -->
</pl-drawing-group>
</pl-drawing>
示例实现¶
- demo/drawing/simpleTutorial: 在 server.py 中设置属性
visible的示例
几何形状¶
pl-line元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-line x1="60" y1="80" x2="140" y2="120"></pl-line>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 线条起点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 线条起点的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 60 | 线的宽度。 |
angle |
浮动 | 0 | 绕线起点旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
x2 |
浮动 | - | x 线条终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 线条终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
opacity |
浮动 | 1 | 设置线条的不透明度 |
stroke-color |
字符串 | 黑色 | 设置线条的颜色（PL颜色或HTML颜色） |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
dashed-size |
浮动 | _ | 创建具有等间距 dashed-sizepx 填充的虚线。 |
示例实现¶
pl-controlled-line元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-controlled-line
x1="40"
y1="40"
x2="120"
y2="80"
draw-error-box="true"
offset-tol-x="20"
></pl-controlled-line>
<pl-controlled-line
x1="60"
y1="140"
x2="160"
y2="140"
color="blue"
stroke-width="6"
handle-radius="8"
></pl-controlled-line>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 端点之一相对于画布原点（上/左上角）的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 端点之一相对于画布原点（上/左上角）的位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 40 | 40 x 端点之一相对于画布原点（上/左上角）的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 40 | 40 y 端点之一相对于画布原点（上/左上角）的位置，即距画布上边框的垂直距离。 |
color |
字符串 | 红色 | 设置坐标系的颜色（PL颜色或HTML颜色） |
stroke-width |
浮动 | 4 | 设置描边的宽度。 |
handle-radius |
浮动 | 6 | 设置定义终点和控制点的圆形控柄的半径。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中端点和控制点的位置被认为是正确的。 |
offset-tol-x |
浮动 | 0 | 水平方向的公差偏移。误差边界框的水平尺寸等于 2*(tol + offset-tol-x)，其中 tol 被定义为 pl-drawing 的属性（或默认为 1/2 网格）。终点位于边界框的中心。 |
offset-tol-y |
浮动 | 0 | 垂直方向的公差偏移。错误边界框的垂直尺寸等于 2*(tol + offset-tol-y)，其中 tol 被定义为 pl-drawing 的属性（或默认为 1/2 网格）。终点位于边界框的中心。 |
示例实现¶
pl-arc元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-line x1="0" y1="80" x2="60" y2="80" stroke-color="red"></pl-line>
<pl-arc
x1="60"
y1="120"
radius="40"
start-angle="270"
end-angle="0"
stroke-color="green"
></pl-arc>
<pl-line x1="100" y1="120" x2="100" y2="200" stroke-color="blue"></pl-line>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 圆弧中心位置，即距圆弧左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 圆心的位置，即距画布上边框的垂直距离。 |
radius |
浮动 | 20 | 圆的半径。 |
start-angle |
浮动 | 0 | 圆弧的起始角度。角度是从水平轴开始测量的，顺时针方向为正。 |
end-angle |
浮动 | 60 | 圆弧的结束角。角度是从水平轴开始测量的，顺时针方向为正。从 start-angle 到 end-angle 形成顺时针方向的圆弧。 |
opacity |
浮动 | 1 | 设置圆弧的不透明度。 |
stroke-color |
字符串 | 黑色 | 设置线条的描边颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
dashed-size |
浮动 | _ | 创建一条具有等间距 dashed-sizepx 填充的虚线。 |
示例实现¶
pl-controlled-curved-line元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-controlled-curved-line
x1="20"
y1="20"
x2="160"
y2="20"
x3="40"
y3="140"
draw-error-box="true"
offset-control-tol-x="20"
offset-control-tol-y="30"
></pl-controlled-curved-line>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 端点之一相对于画布原点（上/左上角）的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | y 端点之一相对于画布原点（上/左上角）的位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 60 | x 端点之一相对于画布原点（上/左上角）的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 40 | y 端点之一相对于画布原点（上/左上角）的位置，即距画布上边框的垂直距离。 |
x3 |
浮动 | 40 | 40 x 二次曲线控制点（中点）相对于画布原点（上/左上角）的位置，即距画布左边框的水平距离。 |
y3 |
浮动 | 60 | y 二次曲线控制点（中点）相对于画布原点（上/左上角）的位置，即距画布上边框的垂直距离。 |
color |
字符串 | 红色 | 设置坐标系的颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 4 | 设置描边的宽度。 |
handle-radius |
浮动 | 6 | 设置定义终点和控制点的圆形控柄的半径。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中端点和控制点的位置被认为是正确的。 |
offset-tol-x |
浮动 | 0 | 端点水平方向的公差偏移。误差边界框的水平尺寸等于 2*(tol + offset-tol-x)，其中 tol 被定义为 pl-drawing 的属性（或默认为 1/2 网格）。终点位于边界框的中心。 |
offset-tol-y |
浮动 | 0 | 端点垂直方向的公差偏移。错误边界框的垂直尺寸等于 2*(tol + offset-tol-y)，其中 tol 被定义为 pl-drawing 的属性（或默认为 1/2 网格）。终点位于边界框的中心。 |
offset-control-tol-x |
浮动 | 0 | 控制点水平方向的公差偏移。误差边界框的水平尺寸等于 2*(tol + offset-tol-x)，其中 tol 被定义为 pl-drawing 的属性（或默认为 1/2 网格）。控制点位于边界框的中心。 |
offset-control-tol-y |
浮动 | 0 | 控制点垂直方向的公差偏移。错误边界框的垂直尺寸等于 2*(tol + offset-tol-y)，其中 tol 被定义为 pl-drawing 的属性（或默认为 1/2 网格）。控制点位于边界框的中心。 |
示例实现¶
pl-point元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-point x1="60" y1="120" label="A"></pl-point>
<pl-point x1="160" y1="60" label="B"></pl-point>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 20 | y 点的位置，即距画布上边框的垂直距离。 |
radius |
浮动 | 4 | 定义点的圆的半径。 |
label |
字符串 | - | 用于标记点的文本。 |
offsetx |
浮动 | 5 | label 距该点的水平距离。 |
offsety |
浮动 | 5 | label 距该点的垂直距离。 |
opacity |
浮动 | 1 | 设置点的不透明度。 |
color |
字符串 | 黑色 | 设置点的填充颜色（ PL 颜色 或 HTML 颜色 ）。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中点的位置被认为是正确的。 |
示例实现¶
pl-triangle元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-triangle x1="40" y1="180" x2="160" y2="180" x3="160" y3="40"></pl-triangle>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 顶点 1 的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 顶点 1 的位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 60 | x 顶点 2 的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 40 | 40 y 顶点 2 的位置，即距画布上边框的垂直距离。 |
x3 |
浮动 | 40 | 40 x 顶点 3 的位置，即距画布左边框的水平距离。 |
y3 |
浮动 | 20 | y 顶点 3 的位置，即距画布上边框的垂直距离。 |
opacity |
浮动 | 1 | 设置整个元素（线条和填充）的不透明度。 |
color |
字符串 | 红色1 | 设置三角形的填充颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-color |
字符串 | 黑色 | 设置三角形的描边颜色。 |
stroke-width |
浮动 | 1 | 设置描边的宽度。 |
示例实现¶
pl-rectangle元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-rectangle x1="80" y1="50" width="100" height="40"></pl-rectangle>
<pl-rectangle x1="120" y1="140" width="120" height="20" angle="30" color="pink1"></pl-rectangle>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 矩形中心的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 矩形中心的位置，即距画布上边框的垂直距离。 |
height |
浮动 | 40 | 40矩形的高度。 |
width |
浮动 | 30 | 矩形的宽度。 |
angle |
浮动 | 0 | 绕矩形中心旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
opacity |
浮动 | 1 | 设置整个元素（线条和填充）的不透明度。 |
color |
字符串 | 绿色1 | 设置矩形的填充颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-color |
字符串 | 黑色 | 设置矩形的描边颜色。 |
stroke-width |
浮动 | 1 | 设置描边的宽度。 |
示例实现¶
pl-circle元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-circle x1="40" y1="100" radius="30" color="#95A5A6" stroke-width="3"></pl-circle>
<pl-circle x1="120" y1="100" radius="50" color="#D0D3D4"></pl-circle>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 圆心的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 圆心的位置，即距画布上边框的垂直距离。 |
radius |
浮动 | 20 | 圆的半径。 |
opacity |
浮动 | 1 | 设置整个元素（线条和填充）的不透明度。 |
color |
字符串 | 灰色 | 设置圆的填充颜色（PL颜色或HTML颜色）。 |
stroke-color |
字符串 | 黑色 | 设置圆的描边颜色。 |
stroke-width |
浮动 | 1 | 设置描边的宽度。 |
label |
字符串 | - | 用于标记圆心的文本。 |
offsetx |
浮动 | 5 | label 距圆心的水平距离。 |
offsety |
浮动 | 5 | label 距圆心的垂直距离。 |
示例实现¶
pl-polygon元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-polygon plist='[{"x": 40, "y": 40}, {"x": 140,"y": 80}, {"x": 60,"y": 180}]'></pl-polygon>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
plist |
字符串 | 默认的 5 顶点五边形 | 形成多边形的顶点列表。 |
opacity |
浮动 | 1 | 设置整个元素（线条和填充）的不透明度。 |
color |
字符串 | 白色 | 设置圆的填充颜色（PL颜色或HTML颜色）。 |
stroke-color |
字符串 | 黑色 | 设置圆的描边颜色。 |
stroke-width |
浮动 | 1 | 设置描边的宽度。 |
要绘制具有 n 顶点的多边形，每个顶点的坐标为 (xi,yi)，字符串 plist 以字典形式给出，格式如下：
plist = '[{"x": x1, "y": y1}, {"x": x2,"y": x2}, ... , {"x": xn,"y": yn}]'
有关使用 server.py 生成 plist 的示例，请参阅 QID：Example-pl-drawing-beam-cross-section
示例实现¶
向量和载荷¶
pl-vector元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-point x1="100" y1="100"></pl-point>
<pl-line x1="20" y1="20" angle="45" width="240" dashed-size="4" stroke-width="1"></pl-line>
<pl-vector x1="100" y1="100" width="80" angle="45" label="F"></pl-vector>
<pl-vector
x1="100"
y1="100"
width="80"
angle="45"
color="green3"
anchor-is-tail="false"
></pl-vector>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 30 | x 矢量锚点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 10 | 10 y 向量锚点的位置，即距画布上边框的垂直距离。 |
anchor-is-tail |
布尔 | 真实 | 锚点 (x1,y1) 是向量的尾部。 |
width |
浮动 | 60 | 向量的长度。 |
angle |
浮动 | 0 | 绕矢量起点旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
label |
字符串 | - | 用于标记向量的文本。 |
offsetx |
浮动 | 2 | label 距向量头部的水平距离。 |
offsety |
浮动 | 2 | label 距矢量头部的垂直距离。 |
color |
字符串 | 红3 | 设置矢量的颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 3 | 设置描边的宽度。 |
arrow-head-width |
浮动 | 1 | 箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 1 | 箭头长度的比例因子。 |
disregard-sense |
布尔 | 假 | 当 disregard-sense=false 时，锚固件的位置和角度应在公差范围内匹配。当disregard-sense=true时，矢量的正确性只考虑锚点的位置和方向（即相反方向的矢量也被认为是正确的）。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中锚点的位置被认为是正确的。 |
offset-forward |
浮动 | 0 | 从向量相同方向的锚点测量的边界框长度。当 disregard-sense=true 时，默认为 width。 |
offset-backward |
浮动 | 宽度 | 从向量相反方向的锚点测量的边界框长度。 |
optional-grading |
布尔 | 假 | 当true时，评分算法不会为对象分配分值，但也不会进行惩罚。 |
有关评分属性的更多信息，请参阅下面的评分部分。
示例实现¶
pl-double-headed-vector元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-double-headed-vector
x1="40"
y1="120"
width="120"
color="blue"
angle="-30"
></pl-double-headed-vector>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 30 | x 矢量锚点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 10 | 10 y 向量锚点的位置，即距画布上边框的垂直距离。 |
anchor-is-tail |
布尔 | 真实 | 锚点 (x1,y1) 是向量的尾部。 |
width |
浮动 | 60 | 向量的长度。 |
angle |
浮动 | 0 | 绕矢量起点旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
label |
字符串 | - | 用于标记向量的文本。 |
offsetx |
浮动 | 2 | label 距向量头部的水平距离。 |
offsety |
浮动 | 2 | label 距矢量头部的垂直距离。 |
color |
字符串 | 红3 | 设置矢量的颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 3 | 设置描边的宽度。 |
arrow-head-width |
浮动 | 1 | 箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 1 | 箭头长度的比例因子。 |
disregard-sense |
布尔 | 假 | 当 disregard-sense=false 时，锚固件的位置和角度应在公差范围内匹配。当disregard-sense=true时，矢量的正确性只考虑锚点的位置和方向（即相反方向的矢量也被认为是正确的）。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中锚点的位置被认为是正确的。 |
offset-forward |
浮动 | 0 | 从向量相同方向的锚点测量的边界框长度。当 disregard-sense=true 时，默认为 width。 |
offset-backward |
浮动 | 宽度 | 从向量相反方向的锚点测量的边界框长度。 |
optional-grading |
布尔 | 假 | 当true时，评分算法不会为对象分配分值，但也不会进行惩罚。 |
示例实现¶
pl-paired-vector元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-point x1="40" y1="40"></pl-point>
<pl-point x1="140" y1="140"></pl-point>
<pl-line x1="20" y1="20" angle="45" width="240" dashed-size="4" stroke-width="1"></pl-line>
<pl-paired-vector
x1="40"
y1="40"
x2="140"
y2="140"
width="60"
angle1="45"
angle2="225"
></pl-paired-vector>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 2 * 网格大小 | x 第一个向量的锚点位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 1 * 网格大小 | y 第一个向量的锚点位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 3 * 网格大小 | x 第二个向量的锚点位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 2 * 网格大小 | y 第二个向量的锚点位置，即距画布上边框的垂直距离。 |
anchor-is-tail |
布尔 | 真实 | 锚点 (x1,y1) 和 (x2,y2) 是向量的尾部。 |
width |
浮动 | 60 | 向量的长度。 |
angle1 |
浮动 | 0 | 围绕第一个矢量起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
angle2 |
浮动 | 0 | 围绕第二个向量起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
label |
字符串 | - | 用于标记向量的文本。 |
offsetx |
浮动 | 2 | label 距向量头部的水平距离。 |
offsety |
浮动 | 2 | label 距向量头部的垂直距离。 |
color |
字符串 | 红3 | 设置矢量的颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 3 | 设置描边的宽度。 |
arrow-head-width |
浮动 | 1 | 箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 1 | 箭头长度的比例因子。 |
disregard-sense |
布尔 | 真实 | 当disregard-sense=true时，矢量的正确性只考虑锚点的位置和方向（即相反方向的矢量也被认为是正确的）。当 disregard-sense=false 时，锚固件的位置和角度应在公差范围内匹配。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中锚点的位置被认为是正确的。 |
offset-forward |
浮动 | 宽度 | 从向量相同方向的锚点测量的边界框长度。当disregard-sense=true时默认为width（pl-paired-vector时默认为0），当disregard-sense=false时默认为0。 |
offset-backward |
浮动 | 宽度 | 从向量相反方向的锚点测量的边界框长度。 |
optional-grading |
布尔 | 假 | 当true时，评分算法不会为对象分配分值，但也不会进行惩罚。 |
weight |
整数 | 1 | 计算元素的加权平均分数时使用的权重。 |
示例实现¶
- demo/drawing/frame-exploded: 结构的整个 FBD 和组件的单个 FBD 的示例
pl-arc-vector元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-arc-vector x1="80" y1="80" label="M" radius="60" stroke-width="2"></pl-arc-vector>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 圆弧向量中心的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 圆弧向量中心的位置，即距画布上边框的垂直距离。 |
radius |
浮动 | 30 | 圆弧矢量的半径。 |
start-angle |
浮动 | 0 | 圆弧的起始角度。角度是从水平轴开始测量的，顺时针方向为正。 |
end-angle |
浮动 | 210 | 210圆弧矢量的结束角。角度是从水平轴开始测量的，顺时针方向为正。从 start-angle 到 end-angle 形成顺时针方向的圆弧。 |
draw-center |
布尔 | 真实 | 绘制圆弧矢量的中心。 |
clockwise-direction |
布尔 | 真实 | 定义圆弧矢量的方向。默认按顺时针方向绘制圆弧矢量。 |
label |
字符串 | - | 用于标记圆弧矢量角度的文本。 |
offsetx |
浮动 | 0 | label 距圆弧矢量中点的水平距离。 |
offsety |
浮动 | 0 | label 距圆弧矢量中点的垂直距离。 |
color |
字符串 | 紫色 | 设置圆弧的描边颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 3 | 设置描边的宽度。 |
arrow-head-width |
浮动 | 1 | 箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 1 | 箭头长度的比例因子。 |
disregard-sense |
布尔 | 假 | 当disregard-sense=true时，弧向量的正确性仅考虑锚点的位置。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中锚点的位置被认为是正确的。 |
optional-grading |
布尔 | 假 | 当true时，评分算法不会为对象分配分值，但也不会进行惩罚。 |
示例实现¶
pl-distributed-load元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-distributed-load x1="50" y1="40" width="60"></pl-distributed-load>
<pl-distributed-load
x1="100"
y1="160"
width="80"
w1="0"
w2="40"
color="green3"
anchor-is-tail="false"
stroke-width="2"
></pl-distributed-load>
<pl-distributed-load
x1="160"
y1="60"
width="80"
w1="30"
w2="60"
angle="90"
color="brown"
></pl-distributed-load>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 30 | x 基线中心的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 10 | 10 y 基线中心的位置，即距画布上边框的垂直距离。 |
anchor-is-tail |
布尔 | 真实 | 锚点 (x1,y1) 是向量的尾部。 |
width |
浮动 | 60 | 分布载荷的范围。 |
spacing |
浮动 | 20 | 向量之间的间距。 |
w1 |
浮动 | 60 | 范围开始处分布载荷的高度。 |
w2 |
浮动 | 60 | 范围末端分布载荷的高度。 |
angle |
浮动 | 0 | 绕基线中心（即点 (x1,y1)）旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
label1 |
字符串 | - | 用于标记范围起始处向量高度的文本。 |
offsetx1 |
浮动 | 2 | label1 距范围起始处向量的水平距离。 |
offsety1 |
浮动 | 2 | label1 距范围起点处向量的垂直距离。 |
label2 |
字符串 | - | 用于标记范围末尾向量高度的文本。 |
offsetx2 |
浮动 | 2 | label2 距范围末尾向量的水平距离。 |
offsety2 |
浮动 | 2 | label2 距范围末尾向量的垂直距离。 |
color |
字符串 | 红3 | 设置分布式负载的描边颜色（PL颜色或HTML颜色）。 |
stroke-width |
浮动 | 3 | 设置描边的宽度。 |
arrow-head-width |
浮动 | 2 | 箭头宽度的比例因子。 |
arrow-head-length |
浮动 | 3 | 箭头长度的比例因子。 |
disregard-sense |
布尔 | 假 | 当 disregard-sense=false 时，锚固件的位置和角度应在公差范围内匹配。当disregard-sense=true时，矢量的正确性只考虑锚点的位置和方向（即相反方向的矢量也被认为是正确的）。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中锚点的位置被认为是正确的。 |
offset-forward |
浮动 | 0 | 从与分布载荷相同方向的锚点开始测量的边界框长度。当 disregard-sense=true 时，默认为 max(w1, w2) * 1.1。 |
offset-backward |
浮动 | max(w1, w2) * 1.1 |
从分布载荷相反方向的锚点测量的边界框长度。 |
optional-grading |
布尔 | 假 | 当true时，评分算法不会为对象分配分值，但也不会进行惩罚。 |
示例实现¶
力学和结构¶
pl-rod元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-rod x1="60" y1="80" x2="120" y2="100"></pl-rod>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 杆第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 杆第一端的位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 80 | x 杆第二端的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 20 | y 杆第二端的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 20 | 杆的厚度。 |
draw-pin |
布尔 | 真实 | 在杆的两端画出销钉的位置。 |
label1 |
字符串 | - | 用于标记杆第一端的文本。 |
offsetx1 |
浮动 | 2 | label1 距杆第一端的水平距离。 |
offsety1 |
浮动 | 2 | label1 距杆第一端的垂直距离。 |
label2 |
字符串 | - | 用于标记杆第二端的文本。 |
offsetx2 |
浮动 | 2 | label2距杆第二端的水平距离。 |
offsety2 |
浮动 | 2 | label2 距杆第二端的垂直距离。 |
color |
字符串 | 白色 | 设置杆的填充颜色（PL颜色或HTML颜色）。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-3pointrod元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-3pointrod x1="40" y1="100" x2="100" y2="100" x3="100" y3="180"></pl-3pointrod>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 杆第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 100 | 100 y 杆第一端的位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 100 | 100 x 杆中心点的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 100 | 100 y 杆中心点的位置，即距画布上边框的垂直距离。 |
x3 |
浮动 | 100 | 100 x 杆第二端的位置，即距画布左边框的水平距离。 |
y3 |
浮动 | 140 | 140 y 杆第二端的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 20 | 杆的厚度。 |
draw-pin |
布尔 | 真实 | 在杆的所有三个点处绘制销钉位置。 |
label1 |
字符串 | - | 用于标记杆第一端的文本。 |
offsetx1 |
浮动 | 0 | label1 距杆第一端的水平距离。 |
offsety1 |
浮动 | -20 | -20 label1 距杆第一端的垂直距离。 |
label2 |
字符串 | - | 用于标记杆中点的文本。 |
offsetx2 |
浮动 | 0 | label2距杆中点的水平距离。 |
offsety2 |
浮动 | -20 | -20 label2距杆中点的垂直距离。 |
label3 |
字符串 | - | 用于标记杆第二端的文本。 |
offsetx3 |
浮动 | 0 | label3距杆第二端的水平距离。 |
offsety3 |
浮动 | -20 | -20 label3 距杆第二端的垂直距离。 |
color |
字符串 | 白色 | 设置杆的填充颜色（PL颜色或HTML颜色）。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
- demo/drawing/inclinedPlane: 包含 3 点杆的示例
pl-4pointrod元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-4pointrod></pl-4pointrod>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 杆第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 100 | 100 y 杆第一端的位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 100 | 100 x 杆中心点的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 100 | 100 y 杆中心点的位置，即距画布上边框的垂直距离。 |
x3 |
浮动 | 100 | 100 x 杆第二端的位置，即距画布左边框的水平距离。 |
y3 |
浮动 | 160 | 160 y 杆第二端的位置，即距画布上边框的垂直距离。 |
x4 |
浮动 | 140 | 140 x 杆第三端的位置，即距画布左边框的水平距离。 |
y4 |
浮动 | 60 | y 杆第三端的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 20 | 杆的厚度。 |
draw-pin |
布尔 | 真实 | 在杆的所有四个点处绘制销钉位置。 |
label1 |
字符串 | - | 用于标记杆第一端的文本。 |
offsetx1 |
浮动 | 0 | label1 距杆第一端的水平距离。 |
offsety1 |
浮动 | -20 | -20 label1 距杆第一端的垂直距离。 |
label2 |
字符串 | - | 用于标记杆中点的文本。 |
offsetx2 |
浮动 | 0 | label2距杆中点的水平距离。 |
offsety2 |
浮动 | -20 | -20 label2距杆中点的垂直距离。 |
label3 |
字符串 | - | 用于标记杆第二端的文本。 |
offsetx3 |
浮动 | 0 | label3距杆第二端的水平距离。 |
offsety3 |
浮动 | -20 | -20 label3 距杆第二端的垂直距离。 |
label4 |
字符串 | - | 用于标记杆第三端的文本。 |
offsetx4 |
浮动 | 0 | label4距杆第三端的水平距离。 |
offsety4 |
浮动 | -20 | -20 label4 距杆第三端的垂直距离。 |
color |
字符串 | 白色 | 设置杆的填充颜色（PL颜色或HTML颜色）。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
- demo/drawing/liftingMechanism: 使用 4 点杆的示例
pl-collar-rod元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-collar-rod x1="60" y1="100" x2="160" y2="100"></pl-collar-rod>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 杆第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 杆第一端的位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 100 | 100 x 杆第二端的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 40 | 40 y 杆第二端的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 20 | 杆的厚度。 |
draw-pin |
布尔 | 真实 | 在杆的两端画出销钉的位置。 |
label1 |
字符串 | - | 用于标记杆第一端的文本。 |
offsetx1 |
浮动 | 2 | label1 距杆第一端的水平距离。 |
offsety1 |
浮动 | 2 | label1 距杆第一端的垂直距离。 |
label2 |
字符串 | - | 用于标记杆第二端的文本。 |
offsetx2 |
浮动 | 2 | label2距杆第二端的水平距离。 |
offsety2 |
浮动 | 2 | label2 距杆第二端的垂直距离。 |
draw-collar-end1 |
布尔 | 真实 | 在 (x1,y1) 处画出衣领末端。 |
w1 |
浮动 | 1.5*宽度 | 末端衣领的宽度 1。 |
h1 |
浮动 | 2*宽度 | 末端 1 处衣领的高度。 |
draw-collar-end2 |
布尔 | 假 | 在 (x2,y2) 处画出衣领末端。 |
w2 |
浮动 | 1.5*宽度 | 末端衣领的宽度 2。 |
h2 |
浮动 | 2*宽度 | 末端 2 处衣领的高度。 |
color |
字符串 | 白色 | 设置杆的填充颜色（PL颜色或HTML颜色）。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-fixed-pin元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-fixed-pin x1="100" y1="100"></pl-fixed-pin>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 引脚中心位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 20 | y 杆第一端的位置，即距画布上边框的垂直距离。 |
height |
浮动 | 40 | 40引脚支撑的高度，从底座 (ground) 顶部到引脚中心测量。 |
width |
浮动 | 30 | 销支撑的宽度。 |
angle |
浮动 | 0 | 绕销中心旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
draw-pin |
布尔 | 真实 | 画出引脚的位置。 |
draw-ground |
布尔 | 真实 | 画出矩形底座/地面。 |
label |
字符串 | - | 用于标记引脚支撑的文本。 |
offsetx |
浮动 | 2 | label 距引脚中心的水平距离。 |
offsety |
浮动 | 2 | label 距引脚中心的垂直距离。 |
color |
字符串 | 棕色1 | 设置引脚支撑的填充颜色（PL颜色或HTML颜色）。 |
stroke-color |
字符串 | 黑色 | 设置引脚支撑的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-roller元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-roller x1="60" y1="100"></pl-roller>
<pl-fixed-pin x1="140" y1="100" color="green1"></pl-fixed-pin>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 引脚中心位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 20 | y 引脚第一端的位置，即距画布上边框的垂直距离。 |
height |
浮动 | 40 | 40滚轮支撑高度，从底座 (ground) 顶部到销中心测量。 |
width |
浮动 | 30 | 滚轮支撑的宽度。 |
angle |
浮动 | 0 | 绕销中心旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
draw-pin |
布尔 | 真实 | 画出引脚的位置。 |
draw-ground |
布尔 | 真实 | 画出矩形底座/地面。 |
label |
字符串 | - | 用于标记滚轮支撑的文本。 |
offsetx |
浮动 | 2 | label 距引脚中心的水平距离。 |
offsety |
浮动 | 2 | label 距引脚中心的垂直距离。 |
color |
字符串 | 棕色1 | 设置滚轮支撑的填充颜色（PL 颜色 或 HTML 颜色）。 |
stroke-color |
字符串 | 黑色 | 设置滚轮的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-clamped元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-roller x1="140" y1="100" width="40" color="gray1"></pl-roller>
<pl-rod x1="40" y1="100" x2="140" y2="100" draw-pin="false"></pl-rod>
<pl-clamped x1="40" y1="100" height="60" width="20"></pl-clamped>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 夹紧点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 20 | y 夹紧点的位置，即距画布上边框的垂直距离。 |
height |
浮动 | 40 | 40夹紧支架的高度 (rectangle)。 |
width |
浮动 | 20 | 夹紧支架的宽度 (rectangle)。 |
angle |
浮动 | 0 | 围绕夹紧点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
label |
字符串 | - | 用于标记夹紧支撑的文本。 |
offsetx |
浮动 | 2 | label距夹紧点的水平距离。 |
offsety |
浮动 | 2 | label 距夹紧点的垂直距离。 |
color |
字符串 | 黑色 | 使用从白色到 color 的渐变填充夹紧支撑的颜色（PL 颜色 或 HTML 颜色）。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-spring元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="20">
<pl-drawing-initial>
<pl-spring x1="50" y1="40" width="140" draw-pin="true"></pl-spring>
<pl-spring x1="20" y1="80" angle="20" width="120" height="20" interval="5"></pl-spring>
<pl-spring x1="20" y1="160" width="30" height="20" stroke-color="purple3"></pl-spring>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 弹簧起点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 20 | y 弹簧起点的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 60 | 弹簧的长度。 |
angle |
浮动 | 0 | 围绕弹簧起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
height |
浮动 | 40 | 40弹簧的高度。 |
interval |
浮动 | 10 | 10每条斜线之间的间隔。如果弹簧宽度太短，则重新计算此间隔。 |
x2 |
浮动 | - | x 弹簧终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 弹簧终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
stroke-color |
字符串 | 黑色 | 设置弹簧的颜色（PL 颜色 或 HTML 颜色）。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
draw-pin |
布尔 | 假 | 在弹簧末端画点。 |
示例实现¶
pl-coil元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="20">
<pl-drawing-initial>
<pl-coil x1="50" y1="40" draw-pin="true"></pl-coil>
<pl-coil x1="20" y1="100" angle="20" width="120" height="80"></pl-coil>
<pl-coil x1="20" y1="180" width="40" height="20" stroke-color="purple3"></pl-coil>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 20 | x 线圈起点的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 20 | y 线圈起点的位置，即距画布上边框的垂直距离。 |
width |
浮动 | 80 | 线圈的长度。 |
angle |
浮动 | 0 | 绕线圈起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
height |
浮动 | 30 | 线圈的高度。 |
x2 |
浮动 | - | x 线圈终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 线圈终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
stroke-color |
字符串 | 黑色 | 设置线圈的颜色（PL 颜色 或 HTML 颜色）。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
draw-pin |
布尔 | 假 | 在线圈末端画点。 |
示例实现¶
pl-pulley元件¶
样品元素¶
<pl-drawing width="200" height="200">
<pl-drawing-initial>
<pl-pulley x1="100" y1="150" x2="20" y2="120" x3="140" y3="60" radius="40"></pl-pulley>
<pl-pulley x1="50" y1="40" x2="50" y2="100" x3="160" y3="40" color="blue1"></pl-pulley>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 滑轮中心位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 滑轮中心位置，即距画布上边框的垂直距离。 |
x2 |
浮动 | 10 | 10 x 定义滑轮线末端的第一个点的位置，即距画布左边框的水平距离。 |
y2 |
浮动 | 10 | 10 y 定义滑轮线末端的第一个点的位置，即距画布顶部边框的垂直距离。 |
x3 |
浮动 | 120 | 120 x 定义滑轮线末端的第二个点的位置，即距画布左边框的水平距离。 |
y3 |
浮动 | 60 | y 定义滑轮线末端的第二个点的位置，即距画布顶部边框的垂直距离。 |
alternative-path |
布尔 | 假 | 选择滑轮处连接到点 (x2,y2) 和 (x3,y3) 的其他切点。默认情况下，它绘制最短路径。 |
radius |
浮动 | 20 | 滑轮的半径。 |
label |
字符串 | - | 用于标记滑轮的文本。 |
offsetx |
浮动 | 2 | label距滑轮中心的水平距离。 |
offsety |
浮动 | 2 | label距滑轮中心的垂直距离。 |
color |
字符串 | 灰色 | 设置滑轮的填充颜色（PL 颜色 或 HTML 颜色）。 |
stroke-color |
字符串 | 黑色 | 设置滑轮的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
电路元件¶
pl-capacitor元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="20">
<pl-drawing-initial>
<pl-capacitor x1="20" y1="40" x2="140" y2="40" label="20\\mu C"></pl-capacitor>
<pl-capacitor
x1="40"
y1="180"
x2="180"
y2="100"
stroke-color="blue"
label="4\\mu C"
></pl-capacitor>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 电容器第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 电容器第一端的位置，即距画布上边框的垂直距离。 |
angle |
浮动 | 0 | 绕电容器起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
width |
浮动 | 60 | 电容器的长度 |
x2 |
浮动 | - | x 电容器终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 电容器终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
height |
浮动 | 15 | 15电容器极板的长度。 |
interval |
浮动 | 10 | 10电容器板之间的距离。 |
polarized |
布尔 | 假 | 通过添加“+”符号来设置电容器是否有极性。 |
label |
字符串 | - | 用于标记电容器的文本。 |
font-size |
浮动 | 16 | 16标签字体大小。 |
offsetx |
浮动 | 2 | label 的水平偏移。 |
offsety |
浮动 | 2 | label 的垂直偏移。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-resistor元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="20">
<pl-drawing-initial>
<pl-resistor x1="20" y1="40" x2="140" y2="40" label="2\\Omega"></pl-resistor>
<pl-resistor
x1="40"
y1="80"
x2="180"
y2="120"
stroke-color="red"
label="14\\Omega"
></pl-resistor>
<pl-resistor
x1="80"
y1="160"
height="30"
stroke-color="purple"
label="30\\Omega"
offsety="25"
></pl-resistor>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 电阻第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 电阻器第一端的位置，即距画布上边框的垂直距离。 |
angle |
浮动 | 0 | 绕电阻器起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
width |
浮动 | 60 | 电阻器的长度 |
x2 |
浮动 | - | x 电阻终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 电阻终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
height |
浮动 | 10 | 10电阻器的弹簧区域的高度。 |
interval |
浮动 | 30 | 电阻器的弹簧区域的长度。 |
label |
字符串 | - | 用于标记电阻器的文本。 |
font-size |
浮动 | 16 | 16标签字体大小。 |
offsetx |
浮动 | 2 | label 的水平偏移。 |
offsety |
浮动 | 2 | label 的垂直偏移。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-battery元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="20">
<pl-drawing-initial>
<pl-battery x1="20" y1="40" x2="140" y2="40" label="10 V"></pl-battery>
<pl-battery x1="40" y1="120" angle="30" width="80" stroke-color="red" label="20 V"></pl-battery>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 电池第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 电池第一端的位置，即距画布上边框的垂直距离。 |
angle |
浮动 | 0 | 绕电池起始点旋转的角度。角度是从水平轴开始测量的，顺时针方向为正。 |
width |
浮动 | 60 | 电池长度 |
x2 |
浮动 | - | x 电池终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 电池终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
height |
浮动 | 20 | 最长电池板长度的一半。 |
interval |
浮动 | 5 | 电池板之间的距离。 |
label |
字符串 | - | 用于标记电池的文本。 |
font-size |
浮动 | 16 | 16标签字体大小。 |
offsetx |
浮动 | 2 | label 的水平偏移。 |
offsety |
浮动 | 2 | label 的垂直偏移。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-switch元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="20">
<pl-drawing-initial>
<pl-switch x1="20" y1="20" x2="140" y2="20" label="A"></pl-switch>
<pl-switch x1="180" y1="60" angle="90" width="120" label="B" stroke-color="blue"></pl-switch>
<pl-switch
x1="20"
y1="120"
angle="20"
width="120"
switch-angle="45"
label="S_1"
draw-pin="false"
></pl-switch>
<pl-switch x1="20" y1="100" angle="0" width="120" switch-angle="0"></pl-switch>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 开关第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 开关第一端的位置，即距画布上边框的垂直距离。 |
angle |
浮动 | 0 | 围绕开关起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
width |
浮动 | 60 | 开关长度 |
x2 |
浮动 | - | x 开关终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 开关终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
switch-angle |
浮动 | 30 | 开关打开的角度。 |
interval |
浮动 | 40 | 40开关打开的距离。 |
draw-pin |
布尔 | 真实 | 画出开关两端的引脚位置。 |
label |
字符串 | - | 用于标记开关的文本。 |
font-size |
浮动 | 16 | 16标签字体大小。 |
offsetx |
浮动 | 2 | label 的水平偏移。 |
offsety |
浮动 | 2 | label 的垂直偏移。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
pl-inductor元件¶
样品元素¶
<pl-drawing width="200" height="200" grid-size="20">
<pl-drawing-initial>
<pl-inductor></pl-inductor>
<pl-inductor x1="40" y1="80" x2="180" y2="120" stroke-color="red" label="4 H"></pl-inductor>
<pl-inductor
x1="30"
y1="160"
width="140"
interval="60"
height="30"
stroke-color="purple"
label="2 H"
></pl-inductor>
</pl-drawing-initial>
</pl-drawing>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
x1 |
浮动 | 40 | 40 x 电感器第一端的位置，即距画布左边框的水平距离。 |
y1 |
浮动 | 40 | 40 y 电感器第一端的位置，即距画布上边框的垂直距离。 |
angle |
浮动 | 0 | 绕电感器起点的旋转角度。角度是从水平轴开始测量的，顺时针方向为正。 |
width |
浮动 | 60 | 电感器长度 |
x2 |
浮动 | - | x 电感终点的位置，即距画布左边框的水平距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
y2 |
浮动 | - | y 电感器终点的位置，即距画布上边框的垂直距离。默认情况下，(x2,y2) 由 angle 和 width 确定。如果提供了 x2 和 y2，则替换 angle 和 width。 |
height |
浮动 | 20 | 电感器的弹簧状区域的高度。 |
interval |
浮动 | 40 | 40电感器的弹簧状区域的长度。 |
label |
字符串 | - | 用于标记电感器的文本。 |
font-size |
浮动 | 16 | 16标签字体大小。 |
offsetx |
浮动 | 2 | label 的水平偏移。 |
offsety |
浮动 | 2 | label 的垂直偏移。 |
stroke-color |
字符串 | 黑色 | 设置杆的描边颜色。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
示例实现¶
绘制绘图的元素¶
<pl-drawing-initial>
<pl-axes
origin='{"x": 80, "y": 200}'
supporting-lines='[{"x":80},{"x":160},{"x":320}]'
grid-label='[ {"axis": "x", "pos": 80, "lab": "4" },
{"axis": "x", "pos": 160, "lab": "8" },
{"axis": "x", "pos": 320, "lab": "16" },
{"axis": "y", "pos": 40, "lab": "2" },
{"axis": "y", "pos": -40, "lab": "-2" },
{"axis": "y", "pos": 80, "lab": "4" },
{"axis": "y", "pos": -80, "lab": "-4" },
{"axis": "y", "pos": 120,"lab": "6" },
{"axis": "y", "pos": -120,"lab": "-6" }]'
>
</pl-axes>
<pl-graph-line
origin='{"x": 80, "y": 200}'
end-points='[{"x": 0, "y": 0}, {"x": 80, "y": 80}, {"x": 40, "y": 80}]'
offset-control-tol-x="20"
>
</pl-graph-line>
<pl-graph-line
origin='{"x": 80, "y": 200}'
end-points='[{"x": 80, "y": -80}, {"x": 160, "y": -80}]'
offset-control-tol-y="30"
end-gradients="[-2,2]"
>
</pl-graph-line>
<pl-graph-line
origin='{"x": 80, "y": 200}'
end-points='[{"x": 160, "y": -80}, {"x": 320, "y": 0}]'
>
</pl-graph-line>
</pl-drawing-initial>
示例实现¶
pl-axes元件¶
pl-axes 元素添加两个轴来定义绘制绘图的坐标平面。
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
origin |
字符串 | '{“x”：0，“y”：0}' | 坐标系原点相对于画布原点的位置（顶/左上角）。 “x”是距画布左边框的水平距离。 “y”是距画布上边框的垂直距离。 |
xneg |
浮动 | 20 | x 轴负值部分的长度。 |
yneg |
浮动 | 160 | 160 y 轴负值部分的长度。 |
xpos |
浮动 | 400 | x 轴正值部分的长度。 |
ypos |
浮动 | 160 | 160 y 轴正值部分的长度。 |
label-x |
字符串 | 'x' | 用于标记 x 轴的文本。 |
offsetx-label-x |
浮动 | 0 | label-x 的水平偏移距离。 |
offsety-label-x |
浮动 | 0 | label-x 的垂直偏移距离。 |
label-y |
字符串 | 'y' | 用于标记 y 轴的文本。 |
offsetx-label-y |
浮动 | -30 | label-y 的水平偏移距离。 |
offsety-label-y |
浮动 | -10 | label-y 的垂直偏移距离。 |
supporting-lines |
字符串 | 添加额外的网格线以帮助绘制草图。例如，“[{“x”：80}，{“y”：40}]”添加一条相对于 origin 穿过位置 x=80 的垂直线，即由绘图轴定义的坐标系的原点。它还相对于 origin 添加了一条穿过 y=40 的水平线。 |
|
grid-label |
字符串 | 将标签添加到指定的网格点。例如，'[ {"axis": "x", "pos": 80, "lab": "4" } ]' 相对于 origin 在位置 x=80 处添加标签 4。如果需要额外调整标签的位置，该属性可以有两个额外的可选键：offsetx 和 offsety，即 '[ {"axis": "x", "pos": 80, "lab": "4", "offsetx": 10, "offsety":20 } ]' |
|
color |
字符串 | 黑色 | 设置坐标系的颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 2 | 设置描边的宽度。 |
pl-graph-line元件¶
pl-graph-line 元素向绘图添加直线或二次线。它包装了元素 pl-controlled-line 和 pl-controlled-curved-line，以便可以根据绘图的原点（而不是画布的原点）定义结束点和控制点。当仅给出两个点时，它会绘制直线。如果给出三个点，则会绘制一条二次曲线。它还提供了使用端点的梯度信息创建二次曲线的选项，而不是给出控制点的位置。
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
origin |
字符串 | '{“x”：0，“y”：0}' | 坐标系原点相对于画布原点的位置（顶/左上角）。 “x”是距画布左边框的水平距离。 “y”是距画布上边框的垂直距离。 |
end-points |
字符串 | 提供关于 origin 的直线端点的坐标，即由绘图轴定义的坐标系的原点。例如，直线由两个端点定义，由 end-points='[{"x": 80, "y": -80}, {"x": 160, "y": -80}]' 给出。要绘制二次曲线，可以提供控制点坐标作为列表的第三个元素，即 end-points='[{"x": 0, "y": 0}, {"x": 80, "y": 80}, {"x": 40, "y": 80}]'。 |
|
end-gradients |
字符串 | 提供直线在端点处的导数。此信息用于在绘制二次曲线时确定控制点的位置。请注意，只能使用其中一个选项来绘制二次曲线：提供 end-gradients 或列表中的第三个点 end-points。 |
|
color |
字符串 | 红色 | 设置坐标系的颜色（ PL 颜色 或 HTML 颜色 ）。 |
stroke-width |
浮动 | 4 | 设置描边的宽度。 |
draw-error-box |
布尔 | - | 绘制错误边界框，其中端点和控制点的位置被认为是正确的。 |
offset-tol-x |
浮动 | 0 | x 方向上边界框长度的一半。终点位于边界框的中心。 |
offset-tol-y |
浮动 | 0 | y 方向边界框长度的一半。终点位于边界框的中心。 |
offset-control-tol-x |
浮动 | 0 | x 方向上边界框长度的一半。控制点位于边界框的中心。 |
offset-control-tol-y |
浮动 | 0 | y 方向边界框长度的一半。控制点位于边界框的中心。 |
无障碍¶
目前无法访问交互式 pl-drawing 元素。对于交互式图表，没有可行的键盘控制或合理的屏幕阅读器交互。但是，您可以使用 aria-label 属性提供静态图的简短描述（即短标题），并使用 aria-description 属性提供更长、更详细的描述。当 gradable 为 false 时，屏幕阅读器将读取该内容。
扩展API¶
可以使用元素扩展 添加 pl-drawing 的自定义元素。元素在两个位置定义：在服务器端 Python 中处理 HTML 属性的生成和读取，在客户端 JavaScript 中实现用户交互并序列化回服务器。因此，您的扩展应至少包含一个 Python 文件和一个 JavaScript 文件。
Python¶
每个元素都定义为一个Python类，并继承自BaseElement。您可以使用以下命令导入所有相关的元素函数和类：
elements = pl.load_host_script("elements.py")
这将加载 BaseElement 类，其中包含以下方法定义：
class BaseElement:
def generate(element)
def is_gradable()
def grade(ref, student, tol, angtol)
def grading_name(element)
def validate_attributes()
def get_attributes()
任何元素都可以自由定义上述任何方法，每个方法的描述如下：
generate(element, data)生成发送到客户端 JavaScript 的元素的表示形式。此函数应使用prairielearn.get_x_attrib(el)解析元素属性并返回描述该元素的字典。该字典的确切格式并不重要，因为稍后只有元素的 JavaScript 实现才会使用它。data是当前包含clientFilesUrl的字典，clientFilesUrl是可以从中加载所有客户端文件的基本 URL。is_gradable()如果当前元素可评分，则返回True，否则，如果元素不可评分并且应在评分阶段跳过，则返回False。grade(ref, student, tol, angtol)此元素的评分方法根据给定参考 (ref) 检查student提交。如果元素放置正确，则应返回True，否则返回False。tol指定以像素为单位的空间容差，而angtol指定以度为单位的旋转容差。ref和student提交内容将与generate()中给出的格式匹配。grading_name(element)以字符串形式返回此元素的分级名称。通常您不需要定义它，除非您知道自己在做什么。validate_attributes()如果应验证该元素的属性，则返回True，否则返回False。建议您将其保留为默认值True，除非您有明确的理由。get_attributes()返回表示该元素可能已在question.html中定义的可能属性的字符串列表。
以下是 pl-point 元素的示例定义：
class Point(BaseElement):
def generate(el, data):
color = pl.get_color_attrib(el, "color", "black")
return {
"left": pl.get_float_attrib(el, "x1", 20),
"top": pl.get_float_attrib(el, "y1", 20),
"radius": pl.get_float_attrib(el, "radius", drawing_defaults["point-size"]),
"originX": "center",
"originY": "center",
"fill": color,
"selectable": drawing_defaults["selectable"],
"evented": drawing_defaults["selectable"]
}
def is_gradable():
return True
def grade(ref, st, tol, angtol):
epos = np.array([st["left"], st["top"]]).astype(np.float64)
rpos = np.array([ref["left"], ref["top"]])
relx, rely = epos - rpos
if not (-tol <= relx <= tol) or not (-tol <= rely <= tol):
return False
return True
def get_attributes():
return ["x1", "y1", "radius", "label", "offsetx", "offsety", "color"]
然后，每个类都应放入全局 elements 字典中，将元素的名称映射到其类。当扩展加载时，elements 字典将被 pl-drawing 自动获取：
elements = {}
elements["pl-point"] = Point
JavaScript¶
pl-drawing 的客户端 JavaScript 部分构建在 Fabric.js 上，因此任何元素都应构建在 Fabric 的形状以及包含的 mechanicsObjects.js 文件中定义的形状之上。
与 Python 代码类似，每个元素都继承自 JavaScript 基类：
class PLDrawingBaseElement {
static generate(canvas, options, submittedAnswer);
static button_press(canvas, options, submittedAnswer);
static get_button_icon(options);
static get_button_tooltip(options);
}
任何元素都可以自由定义上述任何方法，每个方法的描述如下：
generate(canvas, options, submittedAnswer)创建元素的 Fabric.js 表示并将其放置到画布上。传入的选项字典 与 Pythongenerate()函数中生成的相同。该函数还应该将元素注册为 答案状态（参见下面的示例以及答案状态类的定义）。button_press(canvas, options, submittedAnswer)每当按下该元素的侧边栏控制按钮时就会运行该函数。默认情况下，这将调用generate()， 所以在大多数情况下你不需要实现这个。get_button_icon(options)以字符串形式返回此按钮图标相对于clientFilesElement（或clientFilesExtension）的路径。默认情况下，这将解析为与元素名称相同的文件名，因此如果您的图像具有相同的名称，则无需实现此操作。get_button_tooltip(options)返回当鼠标悬停在此元素的按钮上时显示的工具提示。
以下是 pl-point 元素的示例定义：
class Point extends PLDrawingBaseElement {
static generate(canvas, options, submittedAnswer) {
let obj = new fabric.Circle(options);
// Disable all of the fabric resizing and rotating buttons for this element
obj.setControlVisible('bl', false);
obj.setControlVisible('tl', false);
obj.setControlVisible('br', false);
obj.setControlVisible('tr', false);
obj.setControlVisible('mt', false);
obj.setControlVisible('mb', false);
obj.setControlVisible('ml', false);
obj.setControlVisible('mr', false);
obj.setControlVisible('mtr', false);
// Generate a numeric ID for this element if it does not have one yet.
// Each element is identified by a unique ID, this is important for answer
// submissions.
if (!('id' in obj)) {
obj.id = window.PLDrawingApi.generateID();
}
canvas.add(obj);
// Selectable is automatically set to true if it is spawned with a button.
// If the object is not selectable (i.e. it is static and part of the background),
// then we do not need to register it with the submitted answer.
if (options.selectable) {
// Register the object with the submitted answer state
submittedAnswer.registerAnswerObject(options, obj);
}
return obj;
}
static get_button_tooltip() {
return 'Add point';
}
}
此后，所有元素都必须显式注册到 pl-drawing 元素才能使用。这可以通过以下代码片段来实现：
// This should exactly match the folder in `elementExtensions/`
const my_extension_name = 'extension';
const my_extensions = {
'pl-point': Point,
};
PLDrawingApi.registerElements(my_extension_name, my_extension);
JavaScript API¶
pl-drawing 元素具有一些预定义的辅助函数，可以通过 PLDrawingApi 进行访问。这里给出了其中的列表：
window.PLDrawingApi = {
/**
* Generates a new numeric ID for a submission object.
* Each submitted object is uniquely identified by its ID.
*/
generateID: function();
/**
* Register a dictionary of elements. These should map element names
* to a static class corresponding to the element itself.
* @param extensionName Name of the extension/group of elements.
* @param dictionary Dictionary of elements to register.
*/
registerElements: function(extensionName, dictionary);
/**
* Generate an element from an options dictionary.
* @param canvas Canvas to create the element on.
* @param options Element options. Must contain a 'type' key.
* @param submittedAnswer Answer state object.
*/
createElement: function(canvas, options, submittedAnswer);
/**
* Get an element definition by its name.
* @param name Name of the element to look up.
* @returns The element, if found. Silently fails with the base element otherwise.
*/
getElement: function(name);
/**
* Restore the drawing canvas state from a submitted answer.
* @param canvas Canvas to restore state onto.
* @param submittedAnswer Answer state to restore from.
*/
restoreAnswer: function(canvas, submittedAnswer);
/**
* Main entrypoint for the drawing element.
* Creates canvas at a given root element.
* @param root_elem DIV that holds the canvas.
* @param elem_options Any options to give to the element
* @param existing_answer_submission Existing submission to place on the canvas.
*/
setupCanvas: function(root_elem, elem_options, existing_answer_submission);
}
此处给出了答案绘图状态 (submittedAnswer) 的定义。在大多数情况下，仅需要 registerAnswerObject()，但如果您的对象足够复杂，则可以使用 updateObject()。 （有关示例，请参阅 mechanicsObjects.js 中的 pl-controlled-line。）
class PLDrawingAnswerState {
/**
* Update an object in the submitted answer state.
* @param object Object to update.
*/
updateObject(object);
/**
* Find an object by its ID.
* @param id Numeric id to search by.
* @returns The object, if found. Null otherwise.
*/
getObject(id);
/**
* Remove an object from the submitted answer.
* @param object The object to delete, or its ID.
*/
deleteObject(object);
/**
* Registers an object to save to the answer when modified.
* This maintains a "submission" object that is separate from the canvas object.
* By default, all properties from the canvas object are copied to the submission object.
*
* @options options Options that were passed to the 'generate()' function.
* @options object Canvas object that was created and should be saved.
* @modifyHandler {optional} Function that is run whenever the canvas object is modified.
* This has the signature of (submitted_object, canvas_object).
* Any properties that should be saved should be copied from canvas_object into
* submitted_object. If this is omitted, all properties from the canvas object
* are copied as-is.
* @removeHandler {optional} Function that is run whenever the canvas object is deleted.
*/
registerAnswerObject(options, object, modifyHandler, removeHandler);
}
按钮图标¶
按钮图标应为 38px×38px .svg 文件，并放置在扩展程序的 clientFilesExtension 目录中。如果您没有安装 SVG 编辑器，Inkscape 可以产生合理的结果。
然后，可以通过在元素的 JavaScript 类中设置 get_button_icon() 函数将这些按钮图标附加到您的元素。该函数返回一个字符串，其中包含按钮图标的文件名_相对于clientFilesElement_。