dojox.drawing.Drawing - outil personnalisé pour créer un rectangle avec des coins arrondis

Question

Je travaille avec dojox.drawing.Drawing pour créer un outil de création de diagrammes simple. J'ai créé un outil personnalisé pour dessiner un rectangle arrondi en étendant dojox.drawing.tools.Rect comme indiqué ci-dessous -

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

j'ai pu ajouter mon outil à la barre d'outils et l'utiliser pour dessiner un rectagle sur toile. Maintenant, je voudrais personnaliser le rectangle créé par mon outil personnalisé pour avoir des coins arrondis, mais je ne suis pas capable de comprendre comment. J'ai vérifié la source de la classe dojox.drawing.tools.Rect ainsi que sa classe parent dojox.drawing.stencil.Rect et je peux voir le rectangle en cours de création dans dojox.drawing.stencil.Rect comme suit -

_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]); 
} 

Dans dojox.gfx, des coins arrondis peuvent être ajoutés à un rectangle en définissant la propriété r. Dans ce contexte, quelqu'un pourrait-il répondre aux questions suivantes?

1. Quel est le mécanisme dojox.drawing pour personnaliser l'apparence du rectangle pour avoir coins arrondis?
2. Dans l'extrait de code ci-dessus, StencilData est transmis à l'appel createRect. Quel est le mécanisme pour personnaliser ces données? La propriété r d'un rectangle qui régit les coins arrondis peut-elle être définie dans ces données?

Answer 1

L'ajout de rectangles arrondis par programme est facile. Dans les tests, vous trouverez le dossier test_shadows.html qui a une ligne qui ajoute un rectangle à coins arrondis:

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

Vous créez un objet de données avec x, y, largeur, hauteur, et une valeur pour r (sinon, il vaut par défaut 0). Si vous vouliez le faire en étendant rect, la façon la plus simple de le faire serait simplement de définir la valeur dans la fonction constructeur (data.r = 10, par exemple), ou vous pourriez créer une fonction pointsToData pour remplacer la version de Rect. Soit vous avez défini la valeur pour this.data.r, ou la valeur par défaut:

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; 

    }, 

Dans cet exemple, je donne r la valeur 10 comme valeur par défaut, au lieu de 0 comme avant. Cela fonctionne parce que chaque fois que le pochoir va dessiner votre rect, il convertit le canvas x, y points (tous les stencils se souviennent de leurs points) en data (que gfx utilise pour dessiner). En d'autres termes, cette fonction sera toujours appelée avant les rendus rect.