工作区备注

工作区注释是一种可以向其输入文本的图形元素。它通常用于记录代码的相关信息，就像使用基于文本的编程语言编写的注释一样。

注意 ：无法将工作区注释添加到flyout中。

启用工作区评论功能

如需在应用中启用工作区注释，您需要为用户提供某种创建工作区评论的方法。一种方式是添加用于创建工作区注释的上下文菜单项。您可以使用以下代码注册默认的上下文菜单项，以创建、删除和复制工作区注释：

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

您也可以创建自己的上下文菜单选项，或添加供用户添加工作区注释的其他方式。如需详细了解上下文菜单选项，请参阅上下文菜单。

直观地自定义注释

您可以通过多种方式自定义工作区评论的外观。这些内容使用的是 CSS，而不是主题背景。您可以控制注释中不同部分的大多数颜色和大小，但无法控制它们的位置。

颜色 CSS 变量

您可以设置 commentFillColour css 变量来更改文本区域的背景颜色。您可以设置 commentBorderColour css 变量来更改评论顶部栏的颜色和评论边框。

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

CSS 类

为评论视图中的不同元素分配了不同的 CSS 类，以便您修改元素的样式。

CSS 类	映像
blocklyComment、blocklyDraggable
blocklySelected、blocklyCommentHighlight
blocklyCollapsed
blocklyCommentTopbar
blocklyFoldoutIcon
blocklyCommentPreview、blocklyText
blocklyDeleteIcon
blocklyText
blocklyResizeHandle

CSS 的基本用法

在大多数情况下，您可以使用适当的 CSS 类来应用自定义属性：

.blocklyCommentTopbarBackground {
  height: 50px;
}

适用于文字的 CSS

不过，对于文本，您需要更具体地替换渲染程序生成的 CSS。

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

所选亮点的 CSS

若要在评论被选中时将其突出显示，系统应根据评论是否收起来对更改应用 CSS 的对象。收起时，将 CSS 应用于 blocklyCommentTopbarBackground，否则将其应用于 blocklyCommentHighlight。

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

图标

blocklyFoldoutIcon、blocklyDeleteIcon 和 blocklyResizeHandle 类均应用于 <image> 元素。这意味着，如果您想更改图标的颜色或形状，则可以在媒体文件夹中添加其他图片。

映像名称	映像
foldout-arrow.svg
删除图标.svg
resize-handle.svg

“删除”图标

默认情况下，“删除”图标处于隐藏状态。如果您想启用它，则需要使用 CSS 使其可见：

.blocklyDeleteIcon {
  display: block;
}