dojox.drawing.Drawing - 用圆角创建矩形的自定义工具

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

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");

我能到我的工具添加到工具栏，并用它在画布上绘制一个rectagle。现在，我想自定义由我的自定义工具创建的矩形以具有圆角，但我无法弄清楚如何。我检查了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属性将圆角添加到矩形中。在这种背景下，有谁能为我的下列问题提供答案吗？

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

来源

2010-08-24 Omkar

以编程方式添加圆角矩形很简单。在测试文件夹，你会发现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，因为它以前。这是有效的，因为每次模板绘制您的矩形时，它会将画布x，y点（所有模具记住它们的点）转换为数据（gfx用于绘制）。换句话说，这个函数将在rect渲染前被调用。

来源

2011-01-31 21:42:45 ace

dojox.drawing.Drawing - 用圆角创建矩形的自定义工具

回答

相关问题