|
3 | 3 | <ActionBar title="Image Demo" />
|
4 | 4 |
|
5 | 5 | <StackLayout>
|
6 |
| - <CanvasView width="100%" height="100%" @draw="onDraw" /> |
| 6 | + <CanvasView ref="canvas" width="100%" height="100%" @draw="onDraw" @touch="onTouch" /> |
7 | 7 | </StackLayout>
|
8 | 8 | </Page>
|
9 | 9 | </template>
|
10 | 10 |
|
11 | 11 | <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'; |
15 | 15 | import { Component } from 'vue-property-decorator';
|
16 | 16 |
|
17 | 17 | const iconLocalFile: ImageSource = ImageSource.fromFileSync(path.join(knownFolders.currentApp().path, 'assets/images/test.jpg'));
|
| 18 | +const shaderPaint = new Paint() |
| 19 | +shaderPaint.style= Style.FILL |
18 | 20 |
|
| 21 | +const cirlcePaint = new Paint() |
| 22 | +cirlcePaint.strokeWidth = 4; |
| 23 | +cirlcePaint.style= Style.STROKE |
| 24 | +cirlcePaint.color= 'red' |
19 | 25 | @Component
|
20 | 26 | export default class Image extends Vue {
|
21 | 27 | onBack() {
|
22 | 28 | Frame.topmost().goBack();
|
23 | 29 | }
|
| 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 | + } |
24 | 37 | onDraw(event: { canvas }) {
|
25 | 38 | try {
|
26 | 39 | const canvas = event.canvas;
|
27 | 40 |
|
| 41 | +
|
| 42 | + canvas.drawBitmap(iconLocalFile, null, createRect(0, 0, canvas.getWidth(), canvas.getHeight()), null); |
| 43 | +
|
28 | 44 | // const deviceScale = screen.mainScreen.scale;
|
29 | 45 | // 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) |
33 | 60 | } catch (error) {
|
34 | 61 | console.error(error, error.stack);
|
35 | 62 | }
|
|
0 commit comments