Skip to content

Commit 01f9146

Browse files
farfromrefugfarfromrefug
committed
demo: fixed svg demo
1 parent dfd1b20 commit 01f9146

File tree

4 files changed

+59
-67
lines changed

4 files changed

+59
-67
lines changed

‎demo-snippets/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"dependencies": {
66
"@nativescript-community/perms": "2.2.21",
77
"@nativescript-community/tween": "0.0.14",
8-
"@nativescript-community/ui-canvas": "4.4.6",
8+
"@nativescript-community/ui-canvas": "*",
9+
"@nativescript-community/ui-svg": "*",
910
"vue-class-component": "7.2.6",
1011
"vue-property-decorator": "9.1.2"
1112
},

‎demo-snippets/vue/SVG.vue

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
<Page>
33
<ActionBar title="Image Demo" />
44

5-
<GridLayout rows="auto,*">
6-
<SVGView blendingMode="lighten" height="30%" src="~/assets/svgs/Ghostscript_Tiger.svg" stretch="aspectFit" backgroundColor="transparent" @tap="onTap"/>
7-
<CollectionView row="1" rowHeight="180" ref="listView" :items="itemList" @itemTap="onItemTap" itemIdGenerator="index">
8-
<v-template>
9-
<GridLayout>
10-
<CanvasSVG @tap="refreshCanvas">
5+
<GridLayout rows="auto,auto">
6+
<SVGView blendingMode="lighten" height="30%" src="~/assets/svgs/Ghostscript_Tiger.svg" stretch="aspectFit" backgroundColor="transparent" @tap="onTap" />
7+
<!-- <CollectionView row="1" rowHeight="180" ref="listView" :items="itemList" @itemTap="onItemTap" itemIdGenerator="index"> -->
8+
<!-- <v-template> -->
9+
<!-- <GridLayout> -->
10+
<CanvasSVG @tap="refreshCanvas" row="1" height="180">
1111
<Rectangle left="0" width="50" height="100%" color="red" horizontalAlignment="left" />
1212

1313
<Line id="line" :antiAlias="true" color="yellow" startX="10%" startY="34%" stopX="90%" stopY="90%" strokeCap="round" strokeJoin="round" strokeWidth="4" dash="1 10 0" />
1414
<CSVG cache="false" horizontalAlignment="center" src="~/assets/svgs/MenuButton.svg" width="10" height="30" stretch="aspectFit" />
15-
<CSVG horizontalAlignment="left" src="~/assets/svgs/ShareButton.svg" height="100%" stretch="aspectFit" />
15+
<CSVG horizontalAlignment="left" :src="svgString" height="100%" stretch="aspectFit" />
1616
</CanvasSVG>
17-
</GridLayout>
18-
</v-template>
19-
</CollectionView>
17+
<!-- </GridLayout> -->
18+
<!-- </v-template> -->
19+
<!-- </CollectionView> -->
2020
</GridLayout>
2121
</Page>
2222
</template>
@@ -28,20 +28,23 @@ import { Component } from 'vue-property-decorator';
2828
2929
@Component
3030
export default class Image extends Vue {
31-
itemList=new Array(1000).fill(null).map((v, i) => ({
32-
index: i,
33-
}))
34-
refreshCanvas(event) {
35-
(event.object as CanvasView).redraw();
36-
}
37-
onItemTap({ index, item }) {
38-
console.log(`Tapped on ${index} ${item.title}`);
39-
}
40-
onTap(e) {
41-
e.object.src = '~/assets/svgs/MenuButton.svg'
42-
}
43-
logEvent(e) {
44-
console.log('logEvent', e.eventName, e.extraData);
45-
}
31+
itemList = new Array(1000).fill(null).map((v, i) => ({
32+
index: i
33+
}));
34+
svgString = `<svg xmlns='http://www.w3.org/2000/svg' height="100" width="100">
35+
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
36+
</svg>`;
37+
refreshCanvas(event) {
38+
(event.object as CanvasView).redraw();
39+
}
40+
onItemTap({ index, item }) {
41+
console.log(`Tapped on ${index} ${item.title}`);
42+
}
43+
onTap(e) {
44+
e.object.src = '~/assets/svgs/MenuButton.svg';
45+
}
46+
logEvent(e) {
47+
console.log('logEvent', e.eventName, e.extraData);
48+
}
4649
}
4750
</script>

‎demo-snippets/vue/install.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import Image from './Image.vue';
66
import Complex from './Complex.vue';
77
import SVG from './SVG.vue';
88
import CanvasPlugin from '@nativescript-community/ui-canvas/vue';
9+
import SVGPlugin from '@nativescript-community/ui-svg/vue';
910

1011
export function installPlugin() {
1112
Vue.use(CanvasPlugin);
13+
Vue.use(SVGPlugin);
1214
}
1315

1416
export const demos = [

‎yarn.lock

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2409,22 +2409,24 @@ __metadata:
24092409
dependencies:
24102410
"@nativescript-community/perms": 2.2.21
24112411
"@nativescript-community/tween": 0.0.14
2412-
"@nativescript-community/ui-canvas": 4.4.6
2412+
"@nativescript-community/ui-canvas": "*"
2413+
"@nativescript-community/ui-svg": "*"
24132414
vue-class-component: 7.2.6
24142415
vue-property-decorator: 9.1.2
24152416
languageName: unknown
24162417
linkType: soft
24172418

24182419
"@nativescript-community/template-snippet@file:demo-snippets::locator=root-workspace-0b6124%40workspace%3A.":
24192420
version: 0.0.1
2420-
resolution: "@nativescript-community/template-snippet@file:demo-snippets#demo-snippets::hash=9fdfb4&locator=root-workspace-0b6124%40workspace%3A."
2421+
resolution: "@nativescript-community/template-snippet@file:demo-snippets#demo-snippets::hash=48e09e&locator=root-workspace-0b6124%40workspace%3A."
24212422
dependencies:
24222423
"@nativescript-community/perms": 2.2.21
24232424
"@nativescript-community/tween": 0.0.14
2424-
"@nativescript-community/ui-canvas": 4.4.6
2425+
"@nativescript-community/ui-canvas": "*"
2426+
"@nativescript-community/ui-svg": "*"
24252427
vue-class-component: 7.2.6
24262428
vue-property-decorator: 9.1.2
2427-
checksum: 625767682897e985d2d267aa48b53c7907a9b3c5c0f2d364405ba247831ddc4033587d99ae5fde163d371402a8a728f11e0f7e64f727bbb1e5ea9f18950f9618
2429+
checksum: ca9d6d4ed2e0238fdb1f0594443284c3bc50187236e9c9078bf07b48be9dfd1f0a1576c8326eccab7cf6ed20ed8aad01451e885c83f47350224198dc83acd92c
24282430
languageName: node
24292431
linkType: hard
24302432

@@ -2444,29 +2446,20 @@ __metadata:
24442446
languageName: node
24452447
linkType: hard
24462448

2447-
"@nativescript-community/ui-canvas@^4.4.8, @nativescript-community/ui-canvas@workspace:packages/ui-canvas":
2449+
"@nativescript-community/ui-canvas@*, @nativescript-community/ui-canvas@^4.4.12, @nativescript-community/ui-canvas@workspace:packages/ui-canvas":
24482450
version: 0.0.0-use.local
24492451
resolution: "@nativescript-community/ui-canvas@workspace:packages/ui-canvas"
24502452
dependencies:
24512453
"@nativescript-community/arraybuffers": ^1.0.0
24522454
languageName: unknown
24532455
linkType: soft
24542456

2455-
"@nativescript-community/ui-canvas@npm:4.4.6":
2456-
version: 4.4.6
2457-
resolution: "@nativescript-community/ui-canvas@npm:4.4.6"
2458-
dependencies:
2459-
"@nativescript-community/arraybuffers": ^1.0.0
2460-
checksum: 6f5e4e7b2381c72fadd29dc5c9fee49598f9ac0565106b70607238391979fbdbd5abcd2d0766f54ca0a8e993823d0422c2b827386ae02523ef94348ff0d9fe7c
2461-
languageName: node
2462-
linkType: hard
2463-
2464-
"@nativescript-community/ui-svg@workspace:packages/ui-svg":
2457+
"@nativescript-community/ui-svg@*, @nativescript-community/ui-svg@workspace:packages/ui-svg":
24652458
version: 0.0.0-use.local
24662459
resolution: "@nativescript-community/ui-svg@workspace:packages/ui-svg"
24672460
dependencies:
24682461
"@nativescript-community/text": ^1.5.11
2469-
"@nativescript-community/ui-canvas": ^4.4.8
2462+
"@nativescript-community/ui-canvas": ^4.4.12
24702463
languageName: unknown
24712464
linkType: soft
24722465

@@ -2534,21 +2527,7 @@ __metadata:
25342527
languageName: node
25352528
linkType: hard
25362529

2537-
"@nativescript/core@npm:~8.4.1":
2538-
version: 8.4.3
2539-
resolution: "@nativescript/core@npm:8.4.3"
2540-
dependencies:
2541-
"@nativescript/hook": ~2.0.0
2542-
acorn: ^8.7.0
2543-
css-tree: ^1.1.2
2544-
emoji-regex: ^10.2.1
2545-
reduce-css-calc: ^2.1.7
2546-
tslib: ^2.0.0
2547-
checksum: d958c3d59bcddcb949ea449c8d6fa61b1e9a794721e2c52ebc16591f645d198635373390952dfce22280bfbae5b9929dc631ce4977782dd886e3dc7cb11060a1
2548-
languageName: node
2549-
linkType: hard
2550-
2551-
"@nativescript/core@npm:~8.4.3":
2530+
"@nativescript/core@npm:~8.4.1, @nativescript/core@npm:~8.4.3":
25522531
version: 8.4.7
25532532
resolution: "@nativescript/core@npm:8.4.7"
25542533
dependencies:
@@ -3437,13 +3416,20 @@ __metadata:
34373416
languageName: node
34383417
linkType: hard
34393418

3440-
"@types/node@npm:18.11.18, @types/node@npm:~18.11.15":
3419+
"@types/node@npm:18.11.18":
34413420
version: 18.11.18
34423421
resolution: "@types/node@npm:18.11.18"
34433422
checksum: 03f17f9480f8d775c8a72da5ea7e9383db5f6d85aa5fefde90dd953a1449bd5e4ffde376f139da4f3744b4c83942166d2a7603969a6f8ea826edfb16e6e3b49d
34443423
languageName: node
34453424
linkType: hard
34463425

3426+
"@types/node@npm:~18.11.15":
3427+
version: 18.11.19
3428+
resolution: "@types/node@npm:18.11.19"
3429+
checksum: d7cd19fcfc59cbdd3f9ba0b4072cb7adc21bd575bd8eb7d7e698975e63564aaa83f03434f32b12331f84f73d0b369d9cbe2371e359d9d7f5c3361f4987f4f7da
3430+
languageName: node
3431+
linkType: hard
3432+
34473433
"@types/normalize-package-data@npm:^2.4.0":
34483434
version: 2.4.1
34493435
resolution: "@types/normalize-package-data@npm:2.4.1"
@@ -7822,7 +7808,7 @@ __metadata:
78227808

78237809
"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
78247810
version: 2.3.2
7825-
resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
7811+
resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
78267812
dependencies:
78277813
node-gyp: latest
78287814
conditions: os=darwin
@@ -13594,7 +13580,7 @@ __metadata:
1359413580

1359513581
"resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
1359613582
version: 1.22.1
13597-
resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
13583+
resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
1359813584
dependencies:
1359913585
is-core-module: ^2.9.0
1360013586
path-parse: ^1.0.7
@@ -13607,7 +13593,7 @@ __metadata:
1360713593

1360813594
"resolve@patch:resolve@^2.0.0-next.3#~builtin<compat/resolve>":
1360913595
version: 2.0.0-next.4
13610-
resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=c3c19d"
13596+
resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=07638b"
1361113597
dependencies:
1361213598
is-core-module: ^2.9.0
1361313599
path-parse: ^1.0.7
@@ -15366,17 +15352,17 @@ __metadata:
1536615352

1536715353
"typescript@patch:typescript@^3 || ^4#~builtin<compat/typescript>, typescript@patch:typescript@^4.6.4#~builtin<compat/typescript>":
1536815354
version: 4.9.4
15369-
resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"
15355+
resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=a1c5e5"
1537015356
bin:
1537115357
tsc: bin/tsc
1537215358
tsserver: bin/tsserver
15373-
checksum: 1caaea6cb7f813e64345190fddc4e6c924d0b698ab81189b503763c4a18f7f5501c69362979d36e19c042d89d936443e768a78b0675690b35eb663d19e0eae71
15359+
checksum: 37f6e2c3c5e2aa5934b85b0fddbf32eeac8b1bacf3a5b51d01946936d03f5377fe86255d4e5a4ae628fd0cd553386355ad362c57f13b4635064400f3e8e05b9d
1537415360
languageName: node
1537515361
linkType: hard
1537615362

1537715363
"typescript@patch:typescript@^3.5.3#~builtin<compat/typescript>":
1537815364
version: 3.9.10
15379-
resolution: "typescript@patch:typescript@npm%3A3.9.10#~builtin<compat/typescript>::version=3.9.10&hash=3bd3d3"
15365+
resolution: "typescript@patch:typescript@npm%3A3.9.10#~builtin<compat/typescript>::version=3.9.10&hash=a1c5e5"
1538015366
bin:
1538115367
tsc: bin/tsc
1538215368
tsserver: bin/tsserver
@@ -15386,7 +15372,7 @@ __metadata:
1538615372

1538715373
"typescript@patch:typescript@~4.2.3#~builtin<compat/typescript>":
1538815374
version: 4.2.4
15389-
resolution: "typescript@patch:typescript@npm%3A4.2.4#~builtin<compat/typescript>::version=4.2.4&hash=334f98"
15375+
resolution: "typescript@patch:typescript@npm%3A4.2.4#~builtin<compat/typescript>::version=4.2.4&hash=a1c5e5"
1539015376
bin:
1539115377
tsc: bin/tsc
1539215378
tsserver: bin/tsserver
@@ -15396,11 +15382,11 @@ __metadata:
1539615382

1539715383
"typescript@patch:typescript@~4.8.4#~builtin<compat/typescript>":
1539815384
version: 4.8.4
15399-
resolution: "typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=0102e9"
15385+
resolution: "typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=a1c5e5"
1540015386
bin:
1540115387
tsc: bin/tsc
1540215388
tsserver: bin/tsserver
15403-
checksum: 301459fc3eb3b1a38fe91bf96d98eb55da88a9cb17b4ef80b4d105d620f4d547ba776cc27b44cc2ef58b66eda23fe0a74142feb5e79a6fb99f54fc018a696afa
15389+
checksum: 563a0ef47abae6df27a9a3ab38f75fc681f633ccf1a3502b1108e252e187787893de689220f4544aaf95a371a4eb3141e4a337deb9895de5ac3c1ca76430e5f0
1540415390
languageName: node
1540515391
linkType: hard
1540615392

0 commit comments

Comments
 (0)