Bugzilla – Full Text Bug Listing
| Summary: | [Canvas] GC not drawing as in SWT | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | [RT] RAP | Reporter: | Samy Abou-Shama <sa> | ||||||||
| Component: | RWT | Assignee: | Project Inbox <rap-inbox> | ||||||||
| Status: | RESOLVED FIXED | QA Contact: | |||||||||
| Severity: | normal | ||||||||||
| Priority: | P3 | CC: | tbuschto | ||||||||
| Version: | 1.4 | ||||||||||
| Target Milestone: | 1.4 | ||||||||||
| Hardware: | PC | ||||||||||
| OS: | Windows 7 | ||||||||||
| Whiteboard: | |||||||||||
| Attachments: |
|
||||||||||
Created attachment 181961 [details]
Image that shows the difference between RCP and RAP (zoomed)
Created attachment 182367 [details]
screenshot better showcasing the issue
GC gc = e.gc;
gc.setLineWidth(1);
gc.setForeground(new Color(parent.getDisplay(), 255, 0, 0));
gc.drawPoint( 0, 0);
gc.drawLine(5, 5, 5, 15);
gc.setLineWidth(2);
gc.drawLine(5, 15, 5, 30);
gc.setLineWidth(3);
gc.drawLine(5, 30, 5, 45);
gc.setLineWidth(4);
gc.drawLine(5, 45, 5, 60);
So apparently the HTML5 canvas used here, coordinates are relative to the upper-left corner of a pixel (like in SVG), while in GC they address the center of the pixel (like VML), at least when the stroke-width is 1. (The canvas coordinate system is very well explained here: http://diveintohtml5.org/canvas.html#coordinates). However, if the stroke-width is even, GC behaves like it also addresses the pixels corner, causing the stroke to always exactly fill a full number of pixels. (This always assumes that the stroke expands equally in all directions from its point of origin.) Fill-commands are not bothered by this at all, the behave like SVG in Canvas and GC. Af far as i can tell, IE behaves like FF in this case, as we did a good job adapting VML to Canvas-behavior. Okay, i tried fixing the GC.js with this method:
_fixOffset : function( value ) {
var result = value;
if( this._context.lineWidth % 2 !== 0 ) {
result += 0.5
}
return result;
},
But then another problem occurs: Using the (default) lineCap "butt", the stroke does not extend in the direction of the line drawn, causing the line to start/end between pixels again, looking blurry... Not sure there is a way around that, but it looks okay using lineCap "square"...
Using antialiasing in SWT brings the result much closer to the result in RAP (solves the CAP problem), but there a still a number of differences: - The offset problem discussed here - RoundRects have the wrong radius - Rectangles dont respect the line-join attribute in IE. Fix for offset and roundrect issue in in CVS HEAD. The ie-rect-join issue is more difficult to fix. Since the remaining line-cap issue can be considered a minor flaw and no one has complained about it, i'm closing this bug. |
Created attachment 181959 [details] code example Hi there, I have am drawing my own rounded borders for my composites/canvas, using the GC. I developed it in RCP and now that want to use it in RAP it does not draw as expected. Please see the attachments for the snippet used and for screenshots that show the results. Note, that I will help myself for now by using images instaed of drawing the border myself, therefore the bug has not a high prio for me :-) Thank you Samy