Rectangles are not drawn as expected - codenameone

Question

Recently I was somewhat unsure about the presentation of my app and therefore I created a small tester app to look at this topic more closely.
For that I derived my own component class which did nothing els than draw the outer bounds of itself and was surprised that it wasn't completely shown - neither in the simulator, nor on my iPhone 5S.
Now to my question: Why is it that a component drawn as aGraphics.drawRect(getX() + 2, getY() + 2, 10, 10) shows as eleven pixels wide and high in the simulator and on my iPhone 5S?
Here is some code which can be used to demonstrate this:
public class FormRectangleComponent extends Form {
private class RectangleComponent extends Component {
private int color;
public RectangleComponent(int aColor) {
color = aColor;
}
#Override
public void paint(Graphics aGraphics) {
aGraphics.setColor(color);
aGraphics.drawRect(getX(), getY(), getWidth(), getHeight());
Map<String,Object> map = new LinkedHashMap<String,Object>() {{
put("Display.displayWidth", Display.getInstance().getDisplayWidth());
put("rectangleComponent.x", getX());
put("rectangleComponent.y", getY());
put("rectangleComponent.width", getWidth());
put("rectangleComponent.height", getHeight());
}};
aGraphics.setColor(0xffffff);
aGraphics.drawRect(getX() + 2, getY() + 2, 10, 10);
report(map);
}
#Override
protected Dimension calcPreferredSize() {
int side = Display.getInstance().getDisplayHeight() / 10;
return new Dimension(side, side);
}
}
public FormRectangleComponent() {
Display.getInstance().areMutableImagesFast();
setTitle("FormRectangleComponent");
setScrollable(false);
Container contentPane = getContentPane();
contentPane.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
contentPane.setScrollableY(true);
contentPane.getAllStyles().setBgPainter((Graphics aGraphics, Rectangle aRectangle) -> {
aGraphics.setColor(0x00c0c0);
aGraphics.fillRect(aRectangle.getX(), aRectangle.getY(), aRectangle.getWidth(), aRectangle.getHeight());
});
contentPane.add(new SpanLabel(
"Below should be some frames showing all sides."));
contentPane.add(new RectangleComponent(0xff0000));
contentPane.add(new RectangleComponent(0x0000ff));
contentPane.add(new RectangleComponent(0x00ff00));
}
private void report(Map<String, Object> map) {
int maximumLength = 0;
for (Entry<String, Object> entry: map.entrySet()) {
maximumLength = Math.max(maximumLength, entry.getKey().length());
}
for (Entry<String, Object> entry: map.entrySet()) {
StringBuilder stringBuilder = new StringBuilder();
for (int tally = 0; tally < (maximumLength - entry.getKey().length()); tally ++) {
stringBuilder.append(' ');
}
stringBuilder
.append(entry.getKey())
.append(": ")
.append(entry.getValue());
Log.p(stringBuilder.toString());
}
}
}

Answer 1

It's mentioned here in brief but this behavior is based on the convention within the Java graphics API's documented here.
Graphics is a low level API and we tried to keep it consistent with the way Java works. All our samples rely on the width/height -1 convention so it's documented by example & consistency if by nothing else.
The logic for this is mathematical, you don't draw on pixels but in a virtual co-ordinate space that resides between the pixels which makes more sense as you start to transform graphics operations.