Flash vs HTML5 graphics stroke drawing differences

Reported by Andras Csizmadia on 2012-06-17
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;

Niel Drummond (niel-cyanescent) wrote :

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

Changed in jeash:
status: New → Incomplete

I've attached an another screenshot.

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..

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  Edit
Everyone can see this information.

Other bug subscribers