Results 1 to 7 of 7

Thread: Sencha GXT 3.1.0 beta - Text width and height

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2014
    Posts
    7

    Default Sencha GXT 3.1.0 beta - Text width and height

    Hi,
    I am trying to draw a shape (RectangleSprite) and add a text inside it (TextSprite). I don't know this is the right way.. so, please help me out. I am new to GXT. The size of the rectangle should be just little bigger than the text inside. How do I do it? Sample code here ->

    Code:
    DrawComponent component = new DrawComponent();    
    
    TextSprite text = new TextSprite();
    text.setText("Hello, World!");
    text.setX(130);
    text.setY(80);
    text.setFont("Helvetica");
    text.setFontSize(18);
    text.setFill(RGB.BLACK);
    component.addSprite(text);
    
    RectangleSprite rect = new RectangleSprite();
    rect.setX(125);
    rect.setY(75);
    rect.setWidth(200);  //How do I change this dynalically depending on the text length above?
    rect.setHeight(50);   //How do I change this dynalically depending on the text max height above?
    rect.setFill(new Color("#555555"));    
    rect.setFillOpacity(0.4);
    rect.setComponent(component);
    component.addSprite(rect);
    Is this the correct way?? or is there any other "better" way of drawing a shape and adding a text inside? Please let me know.

  2. #2
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    After the TextSprite is rendered, you can ask it for its size via text.getBBox(). You can ask *any* sprite for its bounding box that way, it will give you the x/y coords of the sprite, as well as its width/height. This bounding box will be correctly adjusted for any transformations applies to the sprite, and in the case of text, the current font settings.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2014
    Posts
    7

    Default

    Thanks.. but that does not help, so I did like this ->

    Code:
    DrawComponent component = new DrawComponent();    
    TextSprite text = new TextSprite();
    text.setText("Hello, World!");
    text.setX(130);
    text.setY(80);
    text.setFont("Helvetica");
    text.setFontSize(18);
    text.setFill(RGB.BLACK);
    component.addSprite(text); 
    
    => text.getBBox() returns 0,0,0,0 here.. so, I did..
    
    Element div = DOM.createElement("temp");
    div.getStyle().setProperty("fontName", "Helvetica");
    div.getStyle().setFontStyle(FontStyle.NORMAL);
    div.getStyle().setFontSize(18, Unit.PT);
    div.getStyle().setFontWeight(FontWeight.NORMAL);
    TextMetrics.get().bind(div);
    int width = TextMetrics.get().getWidth(text.getText()); //now this returns the value
    int height = TextMetrics.get().getHeight(text.getText()); //now this returns the value
    		
    
    RectangleSprite rect = new RectangleSprite();
    rect.setX(125);
    rect.setY(75);
    rect.setWidth(width); //set the value here
    rect.setHeight(height);
    rect.setFill(new Color("#555555"));    
    rect.setFillOpacity(0.4);
    rect.setComponent(component);
    component.addSprite(rect);
    Basically, my requirement is to draw a 2D image (square, rectangle, 2d cylinder etc) and display some text inside it (in the middle). How do I do that correctly? If I have multiple lines, the image should adjust the size itself.

  4. #4
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    It didn't work because the drawComponent wasn't attached to the dom, so the text couldnt be rendered. *After* it is rendered, you can ask details about text sizes, etc.

    A 2d cylinder is probably one or two paths, though you could probably do it with two circles and a rectangle, layered apropriately, with the top circle having a different gradient than the 'body' of the cylinder. Once you have this right, consider just using Scaling and Transform settings on each sprite to move them around and give them the right size. Short of getting the full details on colors and lines, I'm not sure I can suggest any more without actually writing your code for you...

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2014
    Posts
    7

    Default

    Thanks... it worked. Could you tell me how to draw a simple line between 2 points?? Is there a document which I can refer?

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2014
    Posts
    7

    Default

    I could able to draw line with this..

    Code:
    PathSprite psOC = new PathSprite();
    psOC.addCommand(new MoveTo(p1.getX(), p1.getY()));
    psOC.addCommand(new LineTo(pOC.getX(), pOC.getY()));		
    psOC.setFill(RGB.BLACK);
    psOC.setStroke(new Color("#000"));
    psOC.setStrokeWidth(2);
    psOC.setFillOpacity(1);
    component.addSprite(psOC);

  7. #7
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    Yes, that is the best tool for the job.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •