0

我正在使用 dojox.drawing.Drawing 创建一个简单的图表工具。我创建了一个自定义工具，通过扩展 dojox.drawing.tools.Rect 来绘制圆角矩形，如下所示 -

dojo.provide("dojox.drawing.tools.custom.RoundedRect");
dojo.require("dojox.drawing.tools.Rect");

dojox.drawing.tools.custom.RoundedRect = dojox.drawing.util.oo.declare(

        dojox.drawing.tools.Rect,
        function(options){
        },
        {
          customType:"roundedrect"
        }    
);

dojox.drawing.tools.custom.RoundedRect.setup = {
    name:"dojox.drawing.tools.custom.RoundedRect",
    tooltip:"Rounded Rect",
    iconClass:"iconRounded"
};
dojox.drawing.register(dojox.drawing.tools.custom.RoundedRect.setup, "tool");

我能够将我的工具添加到工具栏并使用它在画布上绘制矩形。现在，我想自定义我的自定义工具创建的矩形，使其具有圆角，但我无法弄清楚如何。我检查了 dojox.drawing.tools.Rect 类的来源以及它的父 dojox.drawing.stencil.Rect 类，我可以看到在 dojox.drawing.stencil.Rect 中创建的实际矩形如下 -

_create: function(/*String*/shp, /*StencilData*/d, /*Object*/sty){
        // summary:
        //              Creates a dojox.gfx.shape based on passed arguments.
        //              Can be called many times by implementation to create
        //              multiple shapes in one stencil.
        //
        //console.log("render rect", d)
        //console.log("rect sty:", sty)
        this.remove(this[shp]);
        this[shp] = this.container.createRect(d)
                .setStroke(sty)
                .setFill(sty.fill);

        this._setNodeAtts(this[shp]);
}

在 dojox.gfx 中，可以通过设置 r 属性将圆角添加到矩形。在这种情况下，有人可以回答我的以下问题吗？

  1. dojox.drawing 中自定义矩形外观为圆角的机制是什么？
  2. 在上面的代码片段中，StencilData 被传递给 createRect 调用。自定义此数据的机制是什么？可以在此数据中设置控制圆角的矩形的 r 属性吗？
4

1 回答 1

0

以编程方式添加圆角矩形很容易。在测试文件夹中，您会找到 test_shadows.html，其中有一行添加了一个圆角矩形：

myDrawing.addStencil("rect", {data:{x:50, y:175, width:100, height:50, r:10}});

您创建一个数据对象，其中包含 x、y、宽度、高度和 r 的值（否则默认为 0）。

如果你想通过扩展 rect 来做到这一点，最简单的方法就是在构造函数中设置值（例如 data.r=10），或者你可以创建一个 pointsToData 函数来覆盖 Rect 的版本。您可以设置 this.data.r 的值，或者设置默认值：

pointsToData: function(/*Array*/p){
        // summary:
        //      Converts points to data
        p = p || this.points;
        var s = p[0];
        var e = p[2];
        this.data = {
            x: s.x,
            y: s.y,
            width: e.x-s.x,
            height: e.y-s.y,
            r:this.data.r || 10
        };
        return this.data;

    },

在该示例中，我将 r 的默认值设为 10，而不是之前的 0。这是因为每次 stencil 绘制矩形时，它都会将画布 x,y 点（所有模板都记住它们的点）转换为数据（gfx 用来绘制）。换句话说，这个函数总是在 rect 渲染之前被调用。

于 2011-01-31T21:42:45.530 回答