PrairieDraw¶

Warning

本页介绍旧的 PrairieDraw 库。该库将无限期支持，但强烈建议所有新问题都使用 pl-drawing 元素。

PrairieDraw 库 (PrairieDraw.js) 是一个图形绘制库，允许通过 pl-prairiedraw-figure 元素渲染动态图形。

从 pl-prairiedraw-figure 元素中的 params-names 选项传递到脚本的任何参数都可以使用 this.params.get([parameter]) 进行访问

`Sylvester.js` 库和所选方法¶

PrairieDraw 使用 Sylvester.Vector 类来指定绘图的位置和方向；下面列出的任何向量类型参数都属于这种类型。

以下是 Vector 上有用操作的不完整选择；完整的文档可以在 Sylvester 库的文档中找到。

Sylvester.Vector.create(elements) 从数组 elements 创建并返回一个新 Vector。在脚本中将此命令别名为 var $V = Sylvester.Vector.create 通常很有用，因此您可以稍后编写 $V([x,y])。

add(vector) 返回一个新的 Vector，它是接收者和参数的总和。

subtract(vector) 返回一个新的 Vector，它是接收者和参数之间的差异；即，a.subtract(b) 返回向量差 a-b。

multiply(scalar) 或 x(scalar) 返回一个新的 Vector，它是按参数缩放的接收器。 a.multiply(k) 和 a.x(k) 等效。

dot(vector) 返回接收者和参数的标量积。

cross(vector) 返回一个新的 Vector，它是按从左到右顺序的叉积；即，A.cross(B) 返回 A x B。

modulus() 返回向量的 (2) 范数。

toUnitVector() 返回一个新的 Vector，它是缩放为模数为 1 的接收器。

rotate(angle, axis) 返回一个新的向量，该向量是通过使用向量 axis 作为中心点逆时针旋转接收器 angle（以弧度为单位）而形成的。例如。，

a = $V([10, 5]);
b = $V([5, 5]);
c = a.rotate(Math.PI / 2, b); // c = [5, 10]

`PrairieDraw.js` 库¶

script_name提供的脚本可以通过this.pd访问PrairieDraw图形。下面的操作允许更改图形的方向或缩放比例，以及向其中添加绘图元素。

一般来说，绘图对象是不透明的，因此添加项目的顺序会影响图形的最终外观。

以下是 PrairieDraw 可用操作的不完整列表；库源代码可以在ZJUI-Learn存储库中找到。

PrairieDraw提供的常量¶

goldenRatio 返回黄金比例；对于在 setUnits 的参数中创建比例合适的图形很有用。

milesPerKilometer 返回转换系数 0.621371

设置和更改坐标系¶

setUnits(xSize, ySize [, canvasWidth, preserveCanvasSize]) 以绘图单位设置画布的大小，原点位于绘图的中心。可选的 canvasWidth 参数指定（以像素为单位）图形的宽度，而 preserveCanvasSize 则防止重塑画布以匹配坐标比。

scale(factor) 按给定因子（即坐标和像素之间的关系）缩放绘图坐标。

translate(offset) 通过向量 offset 平移坐标系原点。

rotate(angle) 将坐标系逆时针旋转 angle 弧度。

transformByPoints(old1, old2, new1, new2) 执行 scale、translate 和 rotate 的组合，使矢量点 old1 和 old2 映射到 new1 和 new2。

绘图对象选项¶

下面的一些绘图对象具有可选的 type 参数来指定线条/箭头的物理含义。指定后，将根据 TAM 2XX 风格指南为对象选择相应的颜色。

类型	颜色
`grid`	`rgb(200,200,200)`
`position`	`rgb(0,0,255)`
`angle`	`rgb(0,100,180)`
`velocity`	`rgb(0,200,0)`
`angVel`	`rgb(100,180,0)`
`acceleration`	`rgb(255,0,255)`
`rotation`	`rgb(150,0,150)`
`angAcc`	`rgb(100,0,180)`
`angMom`	`rgb(255,0,0)`
`force`	`rgb(210,105,30)`
`moment`	`rbg(255,102,80)`

可选的 filled 参数（默认为 false）是一个布尔值，用于指定形状是否应着色。

绘制点和线¶

point(vector) 在 vector 给出的坐标处绘制一个点。

line(start, end [, type]) 从矢量位置 start 到 stop 绘制一条线段。

polyline(points [, closed, filled]) 绘制一系列连接 points 阵列的线段。可选参数（默认为 false）确定是否应通过连接 points 的第一个和最后一个元素的线来闭合折线。

arc(center, radius, startAngle, endAngle [, filled, aspect]) 绘制以 center 为中心、半径为 radius、从角度 startAngle 到 endAngle（以弧度表示）的圆弧。当提供 aspect 时，将绘制具有长轴 radius 和短轴 radius / aspect 的椭圆的圆弧（即，aspect 是长轴/短轴）。

circle(center, radius [, filled]) 绘制一个以 center 为中心、半径为 radius 的圆。

rectangle(width, height [, center, angle, filled]) 绘制给定宽度和高度的矩形（与轴对齐）。如果未指定，则假定 center 为原点。还可以给出用于旋转的 angle。

rectangleGeneric(bottomLeft, bottomRight, height) 绘制一个矩形，其一侧连接给定 height 的 bottomLeft 和 bottomRight。该矩形垂直于该线延伸 (counterclockwise)。

绘制矢量箭头¶

arrow(start, end [, type]) 绘制从 start 到 stop 的箭头（箭头位于 stop）。

arrowFrom(start, offset [, type]) 绘制从 start 到 start.add(offset) 的箭头。

arrowTo(end, offset [, type]) 绘制从 end.subtract(offset) 到 end 的箭头。

arrowOutOfPage(vector [, type]) 在 vector 处画出屏幕外的箭头（带中心点的圆圈）。

arrowIntoPage(vector [, type]) 在 vector 处向屏幕中绘制一个箭头（以 x 为中心的圆圈）。

circleArrow(center, radius, startAngle, endAngle [, type, fixedRad, idealSegmentSize]) 绘制一条以 center 为中心、半径为 radius、从 startAngle 到 endAngle（以弧度表示）的箭头圆弧。 fixedRad 选项（默认 false）指定是否应使用恒定半径（与开始/结束时的卷曲相反）。

circleArrowCentered(center, radius, centerAngle, extentAngle [, type, fixedRad]) 绘制一条以 center 为中心、半径为 radius、以 centerAngle 为中心、跨越 extentAngle（以弧度表示）的箭头圆弧。

triangularDistributedLoad(start, end, startSize, endSize, startLabel, endLabel, arrowToLine, arrowDown) 这将创建作用在 start 和 end 之间的线上的 (trapezoidal) 分布式负载，一侧高度为 startSize，另一侧高度为 endSize，并具有相应的标签 startLabel 和 endLabel。如果箭头指向 start 和 end 之间的线，则 arrowToLine 为 true，否则为 false。如果箭头向下（y 负方向），则 arrowDown 为 true，否则为 false。最后两个选项确定箭头是出现在线条上方还是下方。

此函数假设从 start 到 end 的线是水平的，如果不是水平的，则会出现意外行为。

绘制机械形状¶

rod(start, end, width) 绘制一根端点销位于 start 和 end 的杆。杆的圆形端部将稍微延伸超出这些点。

LshapeRod(start, middle, end, width) 绘制一个 L 形杆，其端点为 start 和 end，角点为 middle。

TshapeRod(start, center, end, centerEnd, width) 绘制一个 T 形杆，在列出的四个点处带有铰链。要绘制具有三个臂的形状良好的杆，令 center 为臂的交点，顺序 start、end、centerEnd 表示三个端点的顺时针顺序。

pivot(baseCenter, center, width) 创建一个铰接点位于 center 且另一端位于 baseCenter 的枢轴底座。当与下面的ground结合时，baseCenter通常是接地元件的中点。

ground(baseCenter, normal, width) 绘制以 baseCenter 为中心、宽度为 width 的 (shaded) 接地单元。 normal的方向垂直且远离地面。

arcGround(center, radius, startAngle, endAngle, outside) 使用与上面的 arc 命令类似的参数绘制弯曲的地面元素。如果阴影位于曲线外侧，则 outside 为 true，否则为 false。

绘制文本和/或 LaTex 标签¶

有关格式化这些命令中的 text 参数的说明，请参阅下文。

text(position, anchor, text [, boxed, angle]) 在给定的 position 处绘制文本。 anchor 是一个向量，其组件来自 (-1,0,1) 指定对齐方式；即，$V([-1,-1]) 对应于文本的“左”和“下”对齐； $V([1,1])对应于“右”和“上”。可选的 boxed 对文本进行框架，angle 将其旋转到位。

labelLine(start, end, pos, text [, anchor]) 沿 start 和 end 之间的线放置文本。 pos 从 (-1,1) 获取局部坐标值，指定沿线以及线上方/下方的位置。可选的 anchor 使用与上述相同的图案。

labelCircleLine(center, radius, startAngle, endAngle, pos, text) 沿 center、radius、startAngle 和 endAngle 指定的圆弧放置文本。 pos 从 (-1,1) 沿曲线、上方/下方获取局部坐标值。

在图形上生成 LaTeX 标签¶

当使用 PrairieDraw.js 绘制问题中的图形时，可以使用纯文本（如 pd.text(..., "label")）或 LaTeX（如 pd.text(..., "TEX:$x$")）包含图形标签。如果您使用 LaTeX 标签，则必须先将它们渲染为图像文件，然后才能显示。这是通过运行以下命令来完成的：

docker run -it --rm -v PATH_TO_MY_COURSE:/course prairielearn/prairielearn /PrairieLearn/contrib/generate_text.py

将上面的 PATH_TO_MY_COURSE 替换为您的本地课程路径目录，例如 /Users/mwest/git/pl-tam212 或 C:/GitHub/pl-tam212。

通过查找 "TEX:..." 或 'TEX:...' 形式的字符串来搜索 LaTeX 标签（注意不同的引用类型）。如果您希望字符串本身包含 ' 字符，请使用 "" 形式，反之亦然。

在问题中添加或更改任何 LaTeX 标签后，需要重复上述命令。

LaTeX 标签图像的文件名如下所示：

pl-tam212/questions/QID/text/186b41e2a92b8b22694dda1305699937df032555.png
pl-tam212/questions/QID/text/186b41e2a92b8b22694dda1305699937df032555_hi.png
pl-tam212/questions/QID/text/d68de4af4e4de5858554f8a90c5a519d9d435589.png
pl-tam212/questions/QID/text/d68de4af4e4de5858554f8a90c5a519d9d435589_hi.png

这些文件应提交到 git 存储库并推送到实时服务器，以便它们与问题一起可用。

高级：不使用 Docker 运行¶

如果您想在不使用 Docker 的情况下生成 LaTeX 标签图像，则需要安装 Python、ImageMagick 和 LaTeX，然后在 ZJUI-Learn 存储库的根目录中运行以下命令：

python contrib/generate_text.py --subdir /path/to/course