dojox.drawing.Drawing - пользовательский инструмент для создания прямоугольника с закругленными углами - PullRequest
Новая
       28

dojox.drawing.Drawing - пользовательский инструмент для создания прямоугольника с закругленными углами

0 голосов
/ 24 августа 2010

Я работаю с dojox.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 прямоугольника, который управляет закругленными углами?

1 Ответ

0 голосов
/ 01 февраля 2011

Программировать закругленные прямоугольники просто.В папке tests вы найдете test_shadows.html, в котором есть строка, в которую добавляется прямоугольник с закругленными углами: 

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

Вы создаете объект данных с x, y, width, height и значением дляr (в противном случае значение по умолчанию равно 0).

Если вы хотите сделать это путем расширения прямоугольника, самый простой способ сделать это - просто установить значение в функции конструктора (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 использует для рисования).Другими словами, эта функция всегда будет вызываться перед рендерингом прямоугольника.

...