javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 03:01:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated transforms app

Browse Source
This commit is contained in:
vakrilov
2015-11-24 11:23:43 +02:00
parent be723b2960
commit 5a63071242
4 changed files with 80 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/transforms/main-page.ts
View File

@ -5,4 +5,9 @@ import model = require("./model");
export function pageLoaded(args: observable.EventData) {
var page = <pages.Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onReset(args: observable.EventData) {
var model = <model.ViewModel>(<any>args.object).bindingContext;
model.reset();
}

59
apps/transforms/main-page.xml
View File

@ -1,29 +1,56 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
<StackLayout orientation="vertical" backgroundColor="LightGray" paddingLeft="5" paddingRight="5">
<Page loaded="pageLoaded" id="mainPage">
<GridLayout columns="*, *" rows="auto, *">
<Label text="translateX" marginTop="5" />
<Slider minValue="-300" maxValue="300" value="{{ translateX }}"/>
<StackLayout orientation="vertical" backgroundColor="LightGray" paddingLeft="5" paddingRight="5">
<Label text="translateY" marginTop="5" />
<Slider minValue="-300" maxValue="300" value="{{ translateY }}"/>
<Label text="{{ 'translateX (' + translateX + ')' }}" marginTop="5" />
<Slider minValue="-300" maxValue="300" value="{{ translateX }}"/>
<Label text="scaleX" marginTop="5" />
<Slider minValue="0" maxValue="5" value="{{ scaleX }}"/>
<Label text="{{ 'scaleX (' + (scaleX / 100) + ')' }}" marginTop="5" />
<Slider minValue="0" maxValue="300" value="{{ scaleX }}"/>
<Label text="scaleY" marginTop="5" />
<Slider minValue="0" maxValue="5" value="{{ scaleY }}"/>
<Label text="{{ 'pivotX (' + (pivotX / 100) + ')' }}" marginTop="5" />
<Slider minValue="-100" maxValue="200" value="{{ pivotX }}"/>
<Label text="rotate" marginTop="5" />
<Slider minValue="-360" maxValue="360" value="{{ rotate }}"/>
<Label text="{{ 'rotate (' + rotate + ')' }}" marginTop="5" />
<Slider minValue="-360" maxValue="360" value="{{ rotate }}"/>
<AbsoluteLayout backgroundColor="Yellow" width="300" height="300" clipToBounds="true" marginTop="5" marginBottom="5">
</StackLayout>
<StackLayout col="1" orientation="vertical" backgroundColor="LightGray" paddingLeft="5" paddingRight="5">
<Label text="{{ 'translateY (' + translateY + ')' }}" marginTop="5" />
<Slider minValue="-300" maxValue="300" value="{{ translateY }}"/>
<Label text="{{ 'scaleY (' + (scaleY / 100) + ')' }}" marginTop="5" />
<Slider minValue="0" maxValue="300" value="{{ scaleY }}"/>
<Label text="{{ 'pivotY (' + (pivotY / 100) + ')' }}" marginTop="5" />
<Slider minValue="-100" maxValue="200" value="{{ pivotY }}"/>
<Button text="Reset" margin="5" tap="onReset">
</StackLayout>
<AbsoluteLayout row="1" colSpan="2"
backgroundColor="Yellow" width="300" height="300" clipToBounds="true" marginTop="5" marginBottom="5">
<Label text="Transform Me!" backgroundColor="Green" width="100" height="100" left="100" top="100"
translateX="{{ translateX }}"
translateY="{{ translateY }}"
scaleX="{{ scaleX }}"
scaleY="{{ scaleY }}"
scaleX="{{ scaleX / 100 }}"
scaleY="{{ scaleY / 100 }}"
pivotX="{{ pivotX / 100 }}"
pivotY="{{ pivotY / 100 }}"
rotate="{{ rotate }}"
/>
<StackLayout width="1" height="300" backgroundColor="gray" left="99" />
<StackLayout width="1" height="300" backgroundColor="gray" left="200" />
<StackLayout height="1" width="300" backgroundColor="gray" top="99" />
<StackLayout height="1" width="300" backgroundColor="gray" top="200" />
<StackLayout height="2" width="2" backgroundColor="red" marginLeft="{{ pivotX + 99 }}" marginTop="{{ pivotY + 99 }}" />
</AbsoluteLayout>
</StackLayout>
</GridLayout>
</Page>

33
apps/transforms/model.ts
View File

@ -3,6 +3,7 @@
export class ViewModel extends observable.Observable {
constructor() {
super();
this.reset();
}
private _translateX = 0;;
@ -23,7 +24,7 @@ export class ViewModel extends observable.Observable {
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "translateY", value: value });
}
private _scaleX = 1;
private _scaleX = 100;
get scaleX(): number {
return this._scaleX;
}
@ -32,7 +33,7 @@ export class ViewModel extends observable.Observable {
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "scaleX", value: value });
}
private _scaleY = 1;
private _scaleY = 100;
get scaleY(): number {
return this._scaleY;
}
@ -41,6 +42,24 @@ export class ViewModel extends observable.Observable {
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "scaleY", value: value });
}
private _pivotX = 50;
get pivotX(): number {
return this._pivotX;
}
set pivotX(value: number) {
this._pivotX = value;
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "pivotX", value: value });
}
private _pivotY = 50;
get pivotY(): number {
return this._pivotY;
}
set pivotY(value: number) {
this._pivotY = value;
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "pivotY", value: value });
}
private _rotate = 0;
get rotate(): number {
return this._rotate;
@ -49,4 +68,14 @@ export class ViewModel extends observable.Observable {
this._rotate = value;
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "rotate", value: value });
}
public reset() {
this.pivotX = 50;
this.pivotY = 50;
this.scaleX = 100;
this.scaleY = 100;
this.translateX = 0;
this.translateY = 0;
this.rotate = 0;
}
}