Merge pull request #80 from darkdarkdragon/border_radius

Border radius

h2d/TileGroup.hx

@@ -158,6 +158,145 @@ private class TileLayerContent extends h3d.prim.Primitive {
 		if( y > yMax ) yMax = y;
 	}
 
+	public inline function fillArc( x : Float, y : Float, ray : Float, c : Int, start: Float, end: Float) {
+		if (end <= start) return;
+		var arcLength = end - start;
+		var nsegments = Math.ceil(ray * 3.14 * 2 / 4);
+		if ( nsegments < 4 ) nsegments = 4;
+		var angle = arcLength / nsegments;
+		var prevX = Math.NEGATIVE_INFINITY;
+		var prevY = Math.NEGATIVE_INFINITY;
+		var _x = 0.;
+		var _y = 0.;
+		var i = 0;
+		while ( i < nsegments ) {
+			var a = start + i * angle;
+			_x = x + Math.cos(a) * ray;
+			_y = y + Math.sin(a) * ray;
+			if (prevX != Math.NEGATIVE_INFINITY) {
+				addPoint(x, y, c);
+				addPoint(_x, _y, c);
+				addPoint(prevX, prevY, c);
+				addPoint(prevX, prevY, c);
+			}
+			prevX = _x;
+			prevY = _y;
+			i += 1;
+		}
+		var a = end;
+		_x = x + Math.cos(a) * ray;
+		_y = y + Math.sin(a) * ray;
+		addPoint(x, y, c);
+		addPoint(_x, _y, c);
+		addPoint(prevX, prevY, c);
+		addPoint(prevX, prevY, c);
+	}
+
+	public inline function fillCircle( x : Float, y : Float, radius : Float, c : Int) {
+		var nsegments = Math.ceil(radius * 3.14 * 2 / 2);
+		if( nsegments < 3 ) nsegments = 3;
+		var angle = Math.PI * 2 / nsegments;
+		var prevX = Math.NEGATIVE_INFINITY;
+		var prevY = Math.NEGATIVE_INFINITY;
+		var firstX = Math.NEGATIVE_INFINITY;
+		var firstY = Math.NEGATIVE_INFINITY;
+		var curX = 0., curY = 0.;
+		for( i in 0...nsegments) {
+			var a = i * angle;
+			curX = x + Math.cos(a) * radius;
+			curY = y + Math.sin(a) * radius;
+			if (prevX != Math.NEGATIVE_INFINITY) {
+				addPoint(x, y, c);
+				addPoint(curX, curY, c);
+				addPoint(prevX, prevY, c);
+				addPoint(x, y, c);
+			}
+			if (firstX == Math.NEGATIVE_INFINITY) {
+			firstX = curX;
+				firstY = curY;
+			}
+			prevX = curX;
+			prevY = curY;
+		}
+		addPoint(x, y, c);
+		addPoint(curX, curY, c);
+		addPoint(firstX, firstY, c);
+		addPoint(x, y, c);
+	}
+
+	public inline function circle( x : Float, y : Float, ray : Float, size: Float, c : Int) {
+		if (size > ray) return;
+		var nsegments = Math.ceil(ray * 3.14 * 2 / 2);
+		if ( nsegments < 3 ) nsegments = 3;
+		var ray1 = ray - size;
+		var angle = Math.PI * 2 / nsegments;
+		var prevX = Math.NEGATIVE_INFINITY;
+		var prevY = Math.NEGATIVE_INFINITY;
+		var prevX1 = Math.NEGATIVE_INFINITY;
+		var prevY1 = Math.NEGATIVE_INFINITY;
+		for( i in 0...nsegments ) {
+			var a = i * angle;
+			var _x = x + Math.cos(a) * ray;
+			var _y = y + Math.sin(a) * ray;
+			var _x1 = x + Math.cos(a) * ray1;
+			var _y1 = y + Math.sin(a) * ray1;
+			if (prevX != Math.NEGATIVE_INFINITY) {
+				addPoint(_x, _y, c);
+				addPoint(prevX, prevY, c);
+				addPoint(_x1, _y1, c);
+				addPoint(prevX1, prevY1, c);
+			}
+			prevX = _x;
+			prevY = _y;
+			prevX1 = _x1;
+			prevY1 = _y1;
+		}
+	}
+
+	public inline function arc( x : Float, y : Float, ray : Float, size: Float, start: Float, end: Float, c : Int) {
+		if (size > ray) return;
+		if (end <= start) return;
+		var arcLength = end - start;
+		var nsegments = Math.ceil(ray * 3.14 * 2 / 4);
+		if ( nsegments < 3 ) nsegments = 3;
+		var ray1 = ray - size;
+		var angle = arcLength / nsegments;
+		var prevX = Math.NEGATIVE_INFINITY;
+		var prevY = Math.NEGATIVE_INFINITY;
+		var prevX1 = Math.NEGATIVE_INFINITY;
+		var prevY1 = Math.NEGATIVE_INFINITY;
+		var _x = 0.;
+		var _y = 0.;
+		var _x1 = 0.;
+		var _y1 = 0.;
+		for( i in 0...nsegments ) {
+			var a = start + i * angle;
+			_x = x + Math.cos(a) * ray;
+			_y = y + Math.sin(a) * ray;
+			_x1 = x + Math.cos(a) * ray1;
+			_y1 = y + Math.sin(a) * ray1;
+			if (prevX != Math.NEGATIVE_INFINITY) {
+				addPoint(_x, _y, c);
+				addPoint(prevX, prevY, c);
+				addPoint(_x1, _y1, c);
+				addPoint(prevX1, prevY1, c);
+			}
+			prevX = _x;
+			prevY = _y;
+			prevX1 = _x1;
+			prevY1 = _y1;
+		}
+		var a = end;
+		_x = x + Math.cos(a) * ray;
+		_y = y + Math.sin(a) * ray;
+		_x1 = x + Math.cos(a) * ray1;
+		_y1 = y + Math.sin(a) * ray1;
+		addPoint(_x, _y, c);
+		addPoint(prevX, prevY, c);
+		addPoint(_x1, _y1, c);
+		addPoint(prevX1, prevY1, c);
+	}
+
 	override public function alloc(engine:h3d.Engine) {
 		if( tmp == null ) reset();
 		buffer = h3d.Buffer.ofFloats(tmp, 8, [Quads, RawFormat]);

h2d/comp/Component.hx

@@ -238,8 +238,30 @@ class Component extends Sprite {
 			bg.reset();
 			bg.x = style.marginLeft - extLeft();
 			bg.y = style.marginTop - extTop();
-			bg.lineRect(style.borderColor, 0, 0, width - (style.marginLeft + style.marginRight), height - (style.marginTop + style.marginBottom), style.borderSize);
-			bg.fillRect(style.backgroundColor, style.borderSize, style.borderSize, contentWidth + style.paddingLeft + style.paddingRight, contentHeight + style.paddingTop + style.paddingBottom);
+
+			if (style.borderRadius != null && style.borderRadius > 0) {
+				var radius = style.borderRadius;
+				var _w = contentWidth + style.paddingLeft + style.paddingRight;
+				var _h = contentHeight + style.paddingTop + style.paddingBottom;
+
+				bg.lineRoundRect(style.borderColor, 0, 0, width - (style.marginLeft + style.marginRight), height - (style.marginTop + style.marginBottom), style.borderSize, radius);
+				bg.arc(style.borderColor, style.borderSize + radius, style.borderSize + radius, style.borderSize + radius, style.borderSize, Math.PI, Math.PI + Math.PI / 2 );
+				bg.arc(style.borderColor, style.borderSize - radius + _w, style.borderSize + radius, style.borderSize + radius, style.borderSize, Math.PI + Math.PI / 2, Math.PI * 2 );
+				bg.arc(style.borderColor, style.borderSize - radius + _w, style.borderSize - radius + _h, style.borderSize + radius, style.borderSize, 0, Math.PI / 2 );
+				bg.arc(style.borderColor, style.borderSize + radius, style.borderSize - radius + _h, style.borderSize + radius, style.borderSize, Math.PI / 2, Math.PI );
+
+				bg.fillCircle(style.backgroundColor, style.borderSize + radius, style.borderSize + radius, radius);
+				bg.fillCircle(style.backgroundColor, style.borderSize - radius + _w, style.borderSize + radius, radius);
+				bg.fillCircle(style.backgroundColor, style.borderSize - radius + _w, style.borderSize - radius + _h, radius);
+				bg.fillCircle(style.backgroundColor, style.borderSize + radius, style.borderSize - radius + _h, radius);
+
+				bg.fillRect(style.backgroundColor, style.borderSize + radius, style.borderSize, _w - radius * 2, _h);
+				bg.fillRect(style.backgroundColor, style.borderSize, style.borderSize + radius, _w, _h - radius * 2);
+			} else {
+				bg.lineRect(style.borderColor, 0, 0, width - (style.marginLeft + style.marginRight), height - (style.marginTop + style.marginBottom), style.borderSize);
+				bg.fillRect(style.backgroundColor, style.borderSize, style.borderSize, contentWidth + style.paddingLeft + style.paddingRight, contentHeight + style.paddingTop + style.paddingBottom);
+			}
+
 			if( style.icon != null ) {
 				if( iconBmp == null )
 					iconBmp = new h2d.Bitmap(null);
@@ -328,4 +350,4 @@ class Component extends Sprite {
 		super.sync(ctx);
 	}
 
-}
+}

h2d/css/Fill.hx

@@ -19,6 +19,15 @@ class Fill extends h2d.TileGroup {
 		content.addPoint(x, y, color);
 	}
 
+	public inline function fillCircle( fill:FillStyle, x : Float, y : Float, radius : Float) {
+		switch( fill ) {
+		case Transparent:
+		case Color(c):
+		content.fillCircle(x, y, radius, c);
+		case Gradient(a,b,c,d):
+		}
+	}
+
 	public function fillRect(fill:FillStyle,x,y,w,h) {
 		switch( fill ) {
 		case Transparent:
@@ -37,6 +46,38 @@ class Fill extends h2d.TileGroup {
 		return (a << 24) | (r << 16) | (g << 8) | b;
 	}
 
+	public inline function circle( fill:FillStyle, x : Float, y : Float, ray : Float, size: Float) {
+		switch( fill ) {
+		case Transparent:
+		case Color(c):
+			content.circle(x, y, ray, size, c);
+		case Gradient(a,b,c,d):
+		}
+	}
+
+	public inline function arc( fill:FillStyle, x : Float, y : Float, ray : Float, size: Float, start: Float, end: Float) {
+		switch( fill ) {
+		case Transparent:
+		case Color(c):
+			content.arc(x, y, ray, size, start, end, c);
+		case Gradient(a,b,c,d):
+		}
+	}
+
+	public function lineRoundRect(fill:FillStyle, x:Float, y:Float, w:Float, h:Float, size:Float, ellipse:Float) {
+		if( size <= 0 ) return;
+		switch( fill ) {
+		case Transparent:
+		case Color(c):
+			fillRectColor(x + ellipse, y, w - ellipse * 2, size, c);
+			fillRectColor(x + ellipse, y + h - size, w - ellipse * 2, size, c);
+			fillRectColor(x,y+size + ellipse,size,h-size*2 - ellipse * 2,c);
+			fillRectColor(x + w - size, y + size + ellipse, size, h - size * 2 - ellipse * 2, c);
+
+		case Gradient(a,b,c,d):
+		}
+	}
+
 	public function lineRect(fill:FillStyle, x:Float, y:Float, w:Float, h:Float, size:Float) {
 		if( size <= 0 ) return;
 		switch( fill ) {

h2d/css/Parser.hx

@@ -167,6 +167,12 @@ class Parser {
 				s.color = c;
 				return true;
 			}
+		case "border-radius":
+			var i = getVal(v);
+			if( i != null ) {
+				s.borderRadius = i;
+				return true;
+			}
 		case "border":
 			if( applyComposite(["border-width", "border-style", "border-color"], v, s) )
 				return true;

h2d/css/Style.hx

@@ -7,6 +7,7 @@ class Style {
 	public var fontSize : Null<Float>;
 	public var color : Null<Int>;
 	public var backgroundColor : Null<FillStyle>;
+	public var borderRadius : Null<Float>;
 	public var borderSize : Null<Float>;
 	public var borderColor : Null<FillStyle>;
 	public var paddingTop : Null<Float>;
@@ -50,6 +51,7 @@ class Style {
 		if( s.fontSize != null ) fontSize = s.fontSize;
 		if( s.color != null ) color = s.color;
 		if( s.backgroundColor != null ) backgroundColor = s.backgroundColor;
+		if( s.borderRadius != null ) borderRadius = s.borderRadius;
 		if( s.borderSize != null ) borderSize = s.borderSize;
 		if( s.borderColor != null ) borderColor = s.borderColor;
 		if( s.paddingLeft != null ) paddingLeft = s.paddingLeft;
@@ -119,4 +121,4 @@ class Style {
 		return "{" + fields.join(", ") + "}";
 	}
 
-}
+}

samples/comps/components.html

@@ -34,6 +34,15 @@
 		.showBorders label, .showBorders box.dock {
 			border : 1px solid #0FF;
 		}
+		.rounded1 {
+			border-radius: 10px;
+			border-width: 4px;
+			border-color: #7a7a78;
+			background-color: rgba(224, 220, 123, 0.9);
+			width: 200px;
+			height: 100px;
+			offset: 400 570;
+		}
 		
 	</style>
 	<div class="panel window">
@@ -85,4 +94,5 @@
 		</div>
 	</div>
 	<button value="Standalone" x="700" y="570"/>
+	<div class="rounded1"  ></div>
 </body>

samples/comps/comps.hxml

@@ -3,6 +3,7 @@
 -lib heaps
 -lib hscript
 -dce full
+-D resourcesPath=../res
 --next
 -lib heaps
 -lib hscript
@@ -11,3 +12,4 @@
 -swf-header 1024:768:60
 -main Comps
 -dce full
+-D resourcesPath=../res

samples/comps/comps.hxproj

@@ -19,7 +19,7 @@
   </classpaths>
   <!-- Build options -->
   <build>
-    <option directives="" />
+    <option directives="resourcesPath=&quot;../res&quot;" />
     <option flashStrict="False" />
     <option noInlineOnDebug="False" />
     <option mainClass="Comps" />