Skip to content

Commit b60c611

Browse files
committed
demo: localMatrix demo
1 parent 1f47d35 commit b60c611

File tree

1 file changed

+34
-7
lines changed

1 file changed

+34
-7
lines changed

demo-snippets/vue/Image.vue

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,60 @@
33
<ActionBar title="Image Demo" />
44

55
<StackLayout>
6-
<CanvasView width="100%" height="100%" @draw="onDraw" />
6+
<CanvasView ref="canvas" width="100%" height="100%" @draw="onDraw" @touch="onTouch" />
77
</StackLayout>
88
</Page>
99
</template>
1010

1111
<script lang="ts">
12-
import { createRect } from '@nativescript-community/ui-canvas';
13-
import { Frame, ImageSource, knownFolders, path } from '@nativescript/core';
14-
import Vue from 'nativescript-vue';
12+
import { BitmapShader, CanvasView, createRect, Matrix, Paint, Style } from '@nativescript-community/ui-canvas';
13+
import { Frame, TouchGestureEventData, ImageSource, knownFolders, path } from '@nativescript/core';
14+
import Vue, {NativeScriptVue} from 'nativescript-vue';
1515
import { Component } from 'vue-property-decorator';
1616
1717
const iconLocalFile: ImageSource = ImageSource.fromFileSync(path.join(knownFolders.currentApp().path, 'assets/images/test.jpg'));
18+
const shaderPaint = new Paint()
19+
shaderPaint.style= Style.FILL
1820
21+
const cirlcePaint = new Paint()
22+
cirlcePaint.strokeWidth = 4;
23+
cirlcePaint.style= Style.STROKE
24+
cirlcePaint.color= 'red'
1925
@Component
2026
export default class Image extends Vue {
2127
onBack() {
2228
Frame.topmost().goBack();
2329
}
30+
touchX = 0
31+
touchY = 0
32+
onTouch(event: TouchGestureEventData) {
33+
this.touchX = event.getX();
34+
this.touchY = event.getY();
35+
(this.$refs['canvas'] as NativeScriptVue<CanvasView>).nativeView.invalidate()
36+
}
2437
onDraw(event: { canvas }) {
2538
try {
2639
const canvas = event.canvas;
2740
41+
42+
canvas.drawBitmap(iconLocalFile, null, createRect(0, 0, canvas.getWidth(), canvas.getHeight()), null);
43+
2844
// const deviceScale = screen.mainScreen.scale;
2945
// canvas.scale(deviceScale, deviceScale); // always scale to device density to work with dp
30-
console.log('onDraw canvas:', canvas.getWidth(), canvas.getHeight());
31-
32-
canvas.drawBitmap(iconLocalFile, null, createRect(0, 50, 200, 300), null);
46+
const ratioX = canvas.getWidth() / iconLocalFile.width
47+
const ratioY = canvas.getHeight() / iconLocalFile.height
48+
const matrix = new Matrix()
49+
matrix.postScale(ratioX, ratioY, 0,0)
50+
matrix.postScale(
51+
2,
52+
2,
53+
this.touchX,this.touchY
54+
)
55+
const shader = new BitmapShader(iconLocalFile, 0, 0);
56+
shader.setLocalMatrix(matrix)
57+
shaderPaint.setShader(shader)
58+
canvas.drawCircle(this.touchX, this.touchY, 60, shaderPaint)
59+
canvas.drawCircle(this.touchX, this.touchY, 60, cirlcePaint)
3360
} catch (error) {
3461
console.error(error, error.stack);
3562
}

0 commit comments

Comments
 (0)