Flash vs HTML5 graphics stroke drawing differences

Bug #1014311 reported by Andras Csizmadia
12
This bug affects 2 people
Affects Status Importance Assigned to Milestone
jeash
Incomplete
Undecided
Unassigned

Bug Description

What steps will reproduce the problem?
Try to draw a graphics shape with fill and stroke.

What is the expected output? What do you see instead?
Flash and HTML5 render output should be the same.

Instead I get:
HTML5 hair line stroke does not rendered correctly. Please see attached screenshot.

What version of the product are you using? On what operating system?
NME 3.3.3 and Windows 7

Please provide any additional information below.
# Line style
colorType=GraphicsTextureType.SOLID;
thickness=1;
hinting=true;
scaleMode=LineScaleMode.NONE;
caps=CapsStyle.NONE;
joints=JointStyle.MITER;
miterLimit=3;

Revision history for this message
Andras Csizmadia (andras.csizmadia) wrote :
Revision history for this message
Niel Drummond (niel-drummond) wrote :

the problem does not seem to be the hairline, but the enclosing button.

Changed in jeash:
status: New → Incomplete
Revision history for this message
Andras Csizmadia (andras.csizmadia) wrote :

I've attached an another screenshot.

Revision history for this message
Andras Csizmadia (andras.csizmadia) wrote :

And here is the sample script which i've compiled:

package;

import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;

class GraphicsExample extends Sprite {

    public function new(){
        super();
        flash.Lib.current.addChild(this);

        var size:Int = 30;
        for(i in 1...10){
            var child = doDrawRect(size,0x00FF00,i,0xFF0000);
            child.x=size;
            child.y=i*(size + 20);
        }
    }

    private function doDrawRect(size:Float, bgColor:Int,borderSize:Float,borderColor:Float):Shape {
        var child:Shape=new Shape();
        child.graphics.beginFill(bgColor);
        child.graphics.lineStyle(borderSize, borderColor);
        child.graphics.drawRect(0, 0, size, size);
        child.graphics.endFill();
        addChild(child);
        return child;
    }
}

With the current build i dont see strokes at all with html5, flash is okay..

Revision history for this message
Tom Byrne (09rp9wq1q1h0-nnc-anzd5soo2sh5) wrote :

I believe what is happening here is that the stroke is below the fill.
If you set the stroke thickness to 10, it will appear to be 5px thick (as half of it is underneath the fill).

To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.