Examples of org.sgx.yuigwt.yui.graphic.Shape

org.sgx.yuigwt.yui.graphic.Shape

brary.com/yui/docs/api/classes/Drawing.html), Drawing methods goes here too.

Shape is an abstract class and is not meant to be used directly. The following classes extend Shape.

Circle
Ellipse
Rect
Path

Shape can also be extended to create custom shape classes.

Path documentation:

The Path class creates a shape through the use of drawing methods. The Path class has the following drawing methods available: clear, curveTo, drawRect¸ drawRoundRect, end, lineTo, moveTo, quadraticCurveTo

Like other shapes, Path elements are created using the addShape method of the Graphic class. The method's cfg argument contains a type attribute. Assigning "path" or Y.Path to this attribute will create a Path instance. After instantiation, a series of drawing operations must be performed in order to render a shape. The below code instantiates a path element by defining the type attribute as "path":

 var myPath = myGraphic.addShape({ type: "path", fill: { color: "#9aa" }, stroke: { weight: 1, color: "#000" } });

Below a Path element with the same properties is instantiated by defining the type attribute with a class reference:

 var myPath = myGraphic.addShape({ type: Y.Path, fill: { color: "#9aa" }, stroke: { weight: 1, color: "#000" } });

After instantiation, a shape or segment needs to be drawn for an element to render. After all draw operations are performed, the end method will render the shape. The code below will draw a triangle:

 myPath.moveTo(35, 5); myPath.lineTo(65, 65); myPath.lineTo(5, 65); myPath.lineTo(35, 5); myPath.end();

@author sg

    Graphic g1 = Y.newGraphic(GraphicConfig.create().render(parent)); 
    
    //move the graphic to parent's position
    g1.x(parent.getX()).y(parent.getY());
    
    Shape rect1 = g1.addShape(ShapeConfig.createRect().
      width(200).height(120).x(100).y(50).
      fill(Fill.create().color("red").opacity(0.7))
    );
    
    Shape circle1 = g1.addShape(ShapeConfig.createCircle().
      x(100).y(50).radius(70).
      fill(Fill.create().color("blue").opacity(0.5))
    );
    
    Shape ellipse1 = g1.addShape(ShapeConfig.createEllipse().
      x(0).y(0).height(70).width(220).    
      fill(Fill.create().
        type(Fill.TYPE_LINEAR).
        rotation(271).stops(new FillStop[]{
          FillStop.create("#ff6666").opacity(0.8).offset(0),
          FillStop.create("#00ffff").opacity(0.8).offset(0.5),
          FillStop.create("#000000").opacity(0.6).offset(1)
        })
      )
    );
    
    //make the ellipse draggable
    Drag mydrag = Y.newDDDrag(DragConfig.create().node(ellipse1)); 
    
    //draw a path
    Shape diamond1 = g1.addShape(ShapeConfig.createPath().
      fill(Fill.create().color("blue").opacity(0.5))
    );
    diamond1.moveTo(60, 60);
    diamond1.lineTo(80, 40);
    diamond1.lineTo(100, 60);
    diamond1.lineTo(80, 80);
    diamond1.lineTo(60, 60);
    diamond1.end();
    
    //register a clicl listener
    Y.one(diamond1.node()).on("click", new EventCallback() {      
      @Override
      public void call(EventFacade e) {
        Window.alert("clicked"); 
      }
    });

Examples of org.sgx.yuigwt.yui.graphic.Shape

Path documentation:

Related Classes of org.sgx.yuigwt.yui.graphic.Shape