javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Border/background render fixes

Browse Source
This commit is contained in:
vakrilov
2015-07-06 13:19:00 +03:00
parent 2b292eec7c
commit 62553d9d24
8 changed files with 157 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/tests/pages/background-test.ts
View File

@ -1,5 +1,3 @@
import observable = require("data/observable");
import pages = require("ui/page");
import view = require("ui/core/view"); import view = require("ui/core/view");
export function applyTap(args) { export function applyTap(args) {
var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element"); var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");

40
apps/tests/pages/background-test.xml
View File

@ -1,28 +1,34 @@
<Page loaded="pageLoaded"> <Page loaded="pageLoaded">
<GridLayout rows="auto,*"> <GridLayout rows="auto,*">
<WrapLayout> <WrapLayout>
<!-- Background and Border -->
<Button width="50" height="50" text="r" tap="resetTap"/> <Button width="50" height="50" text="r" tap="resetTap"/>
<Button width="50" height="50" text="1" tap="applyTap" tag="background-color: green;"/> <Button width="50" height="50" text="1" tap="applyTap" tag="margin: 20; background-color: lightgreen;"/>
<Button width="50" height="50" text="2" tap="applyTap" tag="background-color: green; border-color: red; border-radius: 20; border-width: 4;"/> <Button width="50" height="50" text="2.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 20; border-width: 40;"/>
<Button width="50" height="50" text="2.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 40;"/>
<Button width="50" height="50" text="3" tap="applyTap" tag="background-image: url('~/pages/test2.png');"/> <Button width="50" height="50" text="2.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 20;"/>
<Button width="50" height="50" text="4" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-y;"/>
<Button width="50" height="50" text="5" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-x;"/>
<!-- Repeat -->
<Button width="50" height="50" text="3.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png');"/>
<Button width="50" height="50" text="3.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-y;"/>
<Button width="50" height="50" text="3.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x;"/>
<Button width="50" height="50" text="6" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat;"/> <!-- Position -->
<Button width="50" height="50" text="7" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left top;"/> <Button width="50" height="50" text="4.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat;"/>
<Button width="50" height="50" text="8" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center;"/> <Button width="50" height="50" text="4.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left top;"/>
<Button width="50" height="50" text="9" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: right bottom;"/> <Button width="50" height="50" text="4.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
<Button width="50" height="50" text="10" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/> <Button width="50" height="50" text="4.4" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: right bottom;"/>
<Button width="50" height="50" text="4.5" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
<Button width="50" height="50" text="11" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100;"/> <!-- Size -->
<Button width="50" height="50" text="12" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/> <Button width="50" height="50" text="5.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100;"/>
<Button width="50" height="50" text="13" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/> <Button width="50" height="50" text="5.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
<Button width="50" height="50" text="14" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/> <Button width="50" height="50" text="5.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
<Button width="50" height="50" text="15" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100; background-color: green;"/> <Button width="50" height="50" text="5.4" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
<Button width="50" height="50" text="5.5" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100; background-color: lightgreen;"/>
<Button width="50" height="50" text="16" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-color: green; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: red;"/> <!-- All -->
<Button width="50" height="50" text="6" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-color: lightgreen; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: lightpink;"/>
</WrapLayout> </WrapLayout>
<GridLayout id="test-element" row="1"> <GridLayout id="test-element" row="1">

32
apps/tests/ui/style/style-properties-tests.ts
View File

@ -39,8 +39,32 @@ export function test_setting_backgroundColor_property_from_CSS_is_applied_to_Sty
test_property_from_CSS_is_applied_to_style("backgroundColor", "background-color", new color.Color("#FF0000"), "#FF0000"); test_property_from_CSS_is_applied_to_style("backgroundColor", "background-color", new color.Color("#FF0000"), "#FF0000");
} }
export function test_setting_fontSize_property_from_CSS_is_applied_to_Style() { export function test_setting_backgroundRepeat_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontSize", "font-size", 32); test_property_from_CSS_is_applied_to_style("backgroundRepeat", "background-repeat", "repeat-x");
}
export function test_setting_backgroundSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundSize", "background-size", "10% 20%");
}
export function test_setting_backgroundPosition_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundPosition", "background-position", "left center");
}
export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundImage", "background-image", "url('~/pages/test2.png')");
}
export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5);
}
export function test_setting_borderColor_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new color.Color("#FF0000"), "#FF0000");
}
export function test_setting_borderRadius_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20);
} }
export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() { export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() {
@ -81,6 +105,10 @@ export function test_setting_opacity_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("opacity", "opacity", 0.5); test_property_from_CSS_is_applied_to_style("opacity", "opacity", 0.5);
} }
export function test_setting_fontSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontSize", "font-size", 32);
}
export function test_setting_fontFamily_property_from_CSS_is_applied_to_Style() { export function test_setting_fontFamily_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontFamily", "font-family", "Helvetica"); test_property_from_CSS_is_applied_to_style("fontFamily", "font-family", "Helvetica");
} }

121
ui/styling/background.android.ts
View File

@ -7,48 +7,44 @@ require("utils/module-merge").merge(common, exports);
// We are using "ad" here to avoid namespace collision with the global android object // We are using "ad" here to avoid namespace collision with the global android object
export module ad { export module ad {
export class BorderGradientDrawable extends android.graphics.drawable.GradientDrawable implements dts.ad.BorderGradientDrawable { export class BorderDrawable extends android.graphics.drawable.ColorDrawable implements dts.ad.BorderDrawable {
private _density = utils.layout.getDisplayDensity(); private _density = utils.layout.getDisplayDensity();
private _borderWidth: number;
private _cornerRadius: number;
private _borderColor: number;
constructor() { constructor() {
super(); super();
return global.__native(this); return global.__native(this);
} }
private _borderWidth: number;
get borderWidth(): number { get borderWidth(): number {
return this._borderWidth; return this._borderWidth;
} }
set borderWidth(value: number) { set borderWidth(value: number) {
if (this._borderWidth !== value) { if (this._borderWidth !== value) {
this._borderWidth = value; this._borderWidth = value;
this.invalidateSelf();
this.setStroke(this._borderWidth * this._density, this._borderColor);
} }
} }
private _cornerRadius: number;
get cornerRadius(): number { get cornerRadius(): number {
return this._cornerRadius; return this._cornerRadius;
} }
set cornerRadius(value: number) { set cornerRadius(value: number) {
if (this._cornerRadius !== value) { if (this._cornerRadius !== value) {
this._cornerRadius = value; this._cornerRadius = value;
this.invalidateSelf();
this.setCornerRadius(this._cornerRadius * this._density);
} }
} }
private _borderColor: number;
get borderColor(): number { get borderColor(): number {
return this._borderColor; return this._borderColor;
} }
set borderColor(value: number) { set borderColor(value: number) {
if (this._borderColor !== value) { if (this._borderColor !== value) {
this._borderColor = value; this._borderColor = value;
this.invalidateSelf();
this.setStroke(this._borderWidth * this._density, this._borderColor);
} }
} }
@ -65,60 +61,73 @@ export module ad {
} }
public draw(canvas: android.graphics.Canvas): void { public draw(canvas: android.graphics.Canvas): void {
super.draw(canvas); //super.draw(canvas);
console.log("BorderGradientDrawable.draw()"); console.log("BorderDrawable.draw()");
var bounds = this.getBounds(); var bounds = this.getBounds();
var boundsF = new android.graphics.RectF(bounds);
var boundsWidth = bounds.width(); var boundsWidth = bounds.width();
var boundsHeight = bounds.height(); var boundsHeight = bounds.height();
if (this.background && !this.background.isEmpty() && boundsWidth > 0 && boundsHeight > 0) { var radius = this._cornerRadius * this._density;
var radius = this._cornerRadius * this._density; var stroke = this._borderWidth * this._density;
var stroke = this._borderWidth * this._density;
// set clip first
// TODO: check this path if (radius > 0) {
var path = new android.graphics.Path(); var path = new android.graphics.Path();
path.addRoundRect(new android.graphics.RectF(stroke, stroke, bounds.right - stroke, bounds.bottom - stroke), radius, radius, android.graphics.Path.Direction.CW); path.addRoundRect(boundsF, radius, radius, android.graphics.Path.Direction.CW);
canvas.clipPath(path); canvas.clipPath(path);
}
if (this.background.color && this.background.color.android) { // draw background
var c = this.background.color; if (this.background.color && this.background.color.android) {
canvas.drawARGB(c.a, c.r, c.g, c.b); let c = this.background.color;
canvas.drawARGB(c.a, c.r, c.g, c.b);
}
// draw image
if (this.background.image) {
let bitmap = this.background.image.android;
let params = this.background.getDrawParams(boundsWidth, boundsHeight);
var matrix = new android.graphics.Matrix();
if (params.sizeX > 0 && params.sizeY > 0) {
var scaleX = params.sizeX / bitmap.getWidth();
var scaleY = params.sizeY / bitmap.getHeight();
matrix.setScale(scaleX, scaleY, 0, 0);
} }
else {
if (this.background.image) { params.sizeX = bitmap.getWidth();
let bitmap = this.background.image.android; params.sizeY = bitmap.getHeight();
let params = this.background.getDrawParams(boundsWidth, boundsHeight);
var matrix = new android.graphics.Matrix();
if (params.sizeX > 0 && params.sizeY > 0) {
var scaleX = params.sizeX / bitmap.getWidth();
var scaleY = params.sizeY / bitmap.getHeight();
matrix.setScale(scaleX, scaleY, 0, 0);
}
else {
params.sizeX = bitmap.getWidth();
params.sizeY = bitmap.getHeight();
}
matrix.postTranslate(params.posX, params.posY);
if (!params.repeatX && !params.repeatY) {
canvas.drawBitmap(bitmap, matrix, undefined);
}
else {
var shader = new android.graphics.BitmapShader(bitmap, android.graphics.Shader.TileMode.REPEAT, android.graphics.Shader.TileMode.REPEAT);
shader.setLocalMatrix(matrix);
var paint = new android.graphics.Paint();
paint.setShader(shader);
var w = params.repeatX ? bounds.width() : params.sizeX;
var h = params.repeatY ? bounds.height() : params.sizeY;
params.posX = params.repeatX ? 0 : params.posX;
params.posY = params.repeatY ? 0 : params.posY;
canvas.drawRect(params.posX, params.posY, params.posX + w, params.posY + h, paint);
}
} }
matrix.postTranslate(params.posX, params.posY);
if (!params.repeatX && !params.repeatY) {
canvas.drawBitmap(bitmap, matrix, undefined);
}
else {
var shader = new android.graphics.BitmapShader(bitmap, android.graphics.Shader.TileMode.REPEAT, android.graphics.Shader.TileMode.REPEAT);
shader.setLocalMatrix(matrix);
var paint = new android.graphics.Paint();
paint.setShader(shader);
var w = params.repeatX ? bounds.width() : params.sizeX;
var h = params.repeatY ? bounds.height() : params.sizeY;
params.posX = params.repeatX ? 0 : params.posX;
params.posY = params.repeatY ? 0 : params.posY;
canvas.drawRect(params.posX, params.posY, params.posX + w, params.posY + h, paint);
}
}
// draw border (topmost)
if (stroke > 0 && this._borderColor && this._borderColor) {
let borderPaint = new android.graphics.Paint();
borderPaint.setStyle(android.graphics.Paint.Style.STROKE);
borderPaint.setColor(this._borderColor);
// Notes double the stroke as the outer part will be clipped
borderPaint.setStrokeWidth(stroke * 2);
canvas.drawRoundRect(boundsF, radius, radius, borderPaint)
} }
} }
} }

2
ui/styling/background.d.ts vendored
View File

@ -49,7 +49,7 @@ declare module "ui/styling/background" {
// We are using "ad" here to avoid namespace collision with the global android object // We are using "ad" here to avoid namespace collision with the global android object
export module ad { export module ad {
export class BorderGradientDrawable extends android.graphics.drawable.GradientDrawable { export class BorderDrawable extends android.graphics.drawable.ColorDrawable {
borderWidth: number; borderWidth: number;
cornerRadius: number; cornerRadius: number;
borderColor: number; borderColor: number;

12
ui/styling/background.ios.ts
View File

@ -9,15 +9,17 @@ export module ios {
export function createBackgroundUIColor(view: viewModule.View): UIColor { export function createBackgroundUIColor(view: viewModule.View): UIColor {
var background = <common.Background> view.style._getValue(style.backgroundInternalProperty); var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
var frame = (<UIView>view._nativeView).frame; var frame = (<UIView>view._nativeView).frame;
var boundsWidth = frame.size.width;
var boundsHeight = frame.size.height;
var result: UIColor; var result: UIColor;
if (background && !background.isEmpty() && frame.size.width > 0 && frame.size.height) { if (background && !background.isEmpty() && boundsWidth > 0 && boundsHeight) {
if (!background.image) { if (!background.image) {
result = background.color.ios; result = background.color.ios;
} }
else { else {
var img = <UIImage>background.image.ios; var img = <UIImage>background.image.ios;
var params = background.getDrawParams(frame.size.width, frame.size.height); var params = background.getDrawParams(boundsWidth, boundsHeight);
if (params.sizeX > 0 && params.sizeY > 0) { if (params.sizeX > 0 && params.sizeY > 0) {
var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY); var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
@ -32,15 +34,15 @@ export module ios {
if (background.color && background.color.ios) { if (background.color && background.color.ios) {
CGContextSetFillColorWithColor(context, background.color.ios.CGColor); CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
CGContextFillRect(context, frame); CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
} }
if (!params.repeatX && !params.repeatY) { if (!params.repeatX && !params.repeatY) {
img.drawAtPoint(CGPointMake(params.posX, params.posY)); img.drawAtPoint(CGPointMake(params.posX, params.posY));
} }
else { else {
var w = params.repeatX ? frame.size.width : img.size.width; var w = params.repeatX ? boundsWidth : img.size.width;
var h = params.repeatY ? frame.size.height : img.size.height; var h = params.repeatY ? boundsHeight : img.size.height;
CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY)); CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));

6
ui/styling/stylers.android.ts
View File

@ -26,9 +26,9 @@ function onBackgroundOrBorderPropertyChanged(v: view.View) {
if (v.borderWidth !== 0 || v.borderRadius !== 0 || !backgroundValue.isEmpty()) { if (v.borderWidth !== 0 || v.borderRadius !== 0 || !backgroundValue.isEmpty()) {
var nativeView = <android.view.View>v._nativeView; var nativeView = <android.view.View>v._nativeView;
var bkg = <background.ad.BorderGradientDrawable>nativeView.getBackground(); var bkg = <background.ad.BorderDrawable>nativeView.getBackground();
if (!(bkg instanceof background.ad.BorderGradientDrawable)) { if (!(bkg instanceof background.ad.BorderDrawable)) {
bkg = new background.ad.BorderGradientDrawable(); bkg = new background.ad.BorderDrawable();
let viewClass = types.getClass(view); let viewClass = types.getClass(view);
if (!_defaultBackgrounds.has(viewClass)) { if (!_defaultBackgrounds.has(viewClass)) {
_defaultBackgrounds.set(viewClass, nativeView.getBackground()); _defaultBackgrounds.set(viewClass, nativeView.getBackground());

32
ui/styling/stylers.ios.ts
View File

@ -83,6 +83,13 @@ export class DefaultStyler implements definition.stylers.Styler {
} }
} }
private static getBorderWidthProperty(view: view.View): any {
if (view._nativeView instanceof UIView){
return (<UIView>view._nativeView).layer.borderWidth;
}
return 0;
}
//Border color methods //Border color methods
private static setBorderColorProperty(view: view.View, newValue: any) { private static setBorderColorProperty(view: view.View, newValue: any) {
if (view._nativeView instanceof UIView && newValue instanceof UIColor) { if (view._nativeView instanceof UIView && newValue instanceof UIColor) {
@ -92,10 +99,17 @@ export class DefaultStyler implements definition.stylers.Styler {
private static resetBorderColorProperty(view: view.View, nativeValue: any) { private static resetBorderColorProperty(view: view.View, nativeValue: any) {
if (view._nativeView instanceof UIView && nativeValue instanceof UIColor) { if (view._nativeView instanceof UIView && nativeValue instanceof UIColor) {
(<UIView>view._nativeView).layer.borderColor = (<UIColor>nativeValue).CGColor; (<UIView>view._nativeView).layer.borderColor = nativeValue;
} }
} }
private static getBorderColorProperty(view: view.View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.borderColor;
}
return undefined;
}
//Border radius methods //Border radius methods
private static setBorderRadiusProperty(view: view.View, newValue: any) { private static setBorderRadiusProperty(view: view.View, newValue: any) {
if (view._nativeView instanceof UIView) { if (view._nativeView instanceof UIView) {
@ -109,6 +123,13 @@ export class DefaultStyler implements definition.stylers.Styler {
} }
} }
private static getBorderRadiusProperty(view: view.View): any {
if (view._nativeView instanceof UIView) {
return (<UIView>view._nativeView).layer.cornerRadius;
}
return 0;
}
public static registerHandlers() { public static registerHandlers() {
style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler( style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBackgroundInternalProperty, DefaultStyler.setBackgroundInternalProperty,
@ -125,15 +146,18 @@ export class DefaultStyler implements definition.stylers.Styler {
style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler( style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderWidthProperty, DefaultStyler.setBorderWidthProperty,
DefaultStyler.resetBorderWidthProperty)); DefaultStyler.resetBorderWidthProperty,
DefaultStyler.getBorderWidthProperty));
style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler( style.registerHandler(style.borderColorProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderColorProperty, DefaultStyler.setBorderColorProperty,
DefaultStyler.resetBorderColorProperty)); DefaultStyler.resetBorderColorProperty,
DefaultStyler.getBorderColorProperty));
style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler( style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
DefaultStyler.setBorderRadiusProperty, DefaultStyler.setBorderRadiusProperty,
DefaultStyler.resetBorderRadiusProperty)); DefaultStyler.resetBorderRadiusProperty,
DefaultStyler.getBorderRadiusProperty));
} }
} }