【发布时间】：2015-12-16 04:48:21
【问题描述】：
创建标尺小部件最有效的方法是什么：可以向左/向右滚动的带有刻度的矩形区域（带有数字的图形垂直线）？ 我应该使用一些布局并添加带有图标（一个像素宽度的垂直线图像）和数字作为文本标签的原子小部件吗？ 或者也许使用黑色背景和 1 像素宽度的简单小部件？
【问题讨论】：
标签： qooxdoo
【发布时间】：2015-12-16 04:48:21
【问题描述】：
正如 Tobi 所说，为可能数百个图形基元（刻度线、标签等）使用小部件是一种浪费。 SVG 用于以编程方式创建图形。
与尺子最相关的是模式规则：
<pattern id="5pxTickMarks" width="5px" height="100%" x="0" y="0" patternUnits="userSpaceOnUse">
<line stroke="#999" stroke-width="1px" x1="0" y1="0" x2="0" y2="50%"/>
</pattern>
这是一个宽度为 5 像素的水平重复图案，它以柔和的灰色和 50% 的高度绘制一条垂直线（每 5 像素）。这种模式本身并没有实际绘制任何东西：设置它之后，您可以使用它来“绘制”相关区域：
<rect fill="url(#5pxTickMarks)" x="0" y="0" height="100%" width="100%"/>
这会在整个画布上绘制一个矩形，该矩形填充了fill 中引用的图案。重复其他功能...
我刚刚做了一个 SVG 标尺（用于 html），它更完整一些，可以作为一个起点：SVG Ruler
【讨论】：
我会在 svg 中创建标尺标记（如果必须的话，也可以使用画布）。使用放置在 qx 画布上的单个 qx 小部件对我来说似乎是一种相当笨拙的方法。
【讨论】：