Commit fbcb2cb7 authored by 范雪寒's avatar 范雪寒

feat: 表单完成

parent c1e830bb
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
border: 2px dashed #ddd; border: 2px dashed #ddd;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: #fafafa; background-color: #888;
text-align: center; text-align: center;
color: #aaa; color: #aaa;
......
...@@ -16,53 +16,53 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -16,53 +16,53 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
customTypeGroupArr = [ customTypeGroupArr = [
{ // {
name: '发音动画', // name: '发音动画',
rect: true, // rect: true,
animaSmall: true, // animaSmall: true,
audio: true, // audio: true,
}, // },
{ {
name: '发音图片', name: '发音图片',
pic: true, pic: true,
audio: true, audio: true,
}, },
{ // {
name: '发音区块', // name: '发音区块',
rect: true, // rect: true,
audio: true, // audio: true,
}, // },
{ // {
name: '变化文本', // name: '变化文本',
action: { // action: {
type: 'text', // type: 'text',
option: [ // option: [
['fontColor', '#000000'], // ['fontColor', '#000000'],
['fontSize', '100'], // ['fontSize', '100'],
['opacity', '0', '100'] // ['opacity', '0', '100']
] // ]
}, // },
}, // },
{ // {
name: '变化图片', // name: '变化图片',
action: { // action: {
type: 'pic', // type: 'pic',
option: [ // option: [
// ['scale', '1'], // // ['scale', '1'],
['opacity', '0', '100'] // ['opacity', '0', '100']
] // ]
}, // },
}, // },
{ // {
name: '变化动画', // name: '变化动画',
action: { // action: {
type: 'anima', // type: 'anima',
option: [ // option: [
// ['scale', '1'], // // ['scale', '1'],
['opacity', '0', '100'] // ['opacity', '0', '100']
] // ]
}, // },
}, // },
] ]
......
...@@ -17,7 +17,10 @@ ...@@ -17,7 +17,10 @@
"__id__": 2 "__id__": 2
}, },
{ {
"__id__": 10 "__id__": 14
},
{
"__id__": 15
} }
], ],
"_active": false, "_active": false,
...@@ -81,13 +84,13 @@ ...@@ -81,13 +84,13 @@
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 7 "__id__": 11
}, },
{ {
"__id__": 8 "__id__": 12
}, },
{ {
"__id__": 9 "__id__": 13
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -101,8 +104,8 @@ ...@@ -101,8 +104,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 1280, "width": 1088,
"height": 720 "height": 800
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -113,8 +116,8 @@ ...@@ -113,8 +116,8 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
640, 544,
360, 400,
0, 0,
0, 0,
0, 0,
...@@ -163,8 +166,8 @@ ...@@ -163,8 +166,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 1280, "width": 1088,
"height": 720 "height": 800
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -243,11 +246,83 @@ ...@@ -243,11 +246,83 @@
"_parent": { "_parent": {
"__id__": 2 "__id__": 2
}, },
"_children": [
{
"__id__": 6
}
],
"_active": true,
"_components": [
{
"__id__": 9
},
{
"__id__": 10
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1088,
"height": 800
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "c3GYfSaEpP94AyYyWhJpcv"
},
{
"__type__": "cc.Node",
"_name": "ImgBg",
"_objFlags": 0,
"_parent": {
"__id__": 5
},
"_children": [], "_children": [],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 6 "__id__": 7
},
{
"__id__": 8
} }
], ],
"_prefab": null, "_prefab": null,
...@@ -261,8 +336,8 @@ ...@@ -261,8 +336,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 1280, "width": 40,
"height": 720 "height": 36
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -296,14 +371,14 @@ ...@@ -296,14 +371,14 @@
"_is3DNode": false, "_is3DNode": false,
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "32MJMZ2HRGF4BOf533Avyi" "_id": "02k6q2xI9KDJgPKYS91js9"
}, },
{ {
"__type__": "cc.Sprite", "__type__": "cc.Sprite",
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 5 "__id__": 6
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
...@@ -313,7 +388,9 @@ ...@@ -313,7 +388,9 @@
], ],
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": null, "_spriteFrame": {
"__uuid__": "8cdb44ac-a3f6-449f-b354-7cd48cf84061"
},
"_type": 0, "_type": 0,
"_sizeMode": 1, "_sizeMode": 1,
"_fillType": 0, "_fillType": 0,
...@@ -326,7 +403,93 @@ ...@@ -326,7 +403,93 @@
"_fillRange": 0, "_fillRange": 0,
"_isTrimmedMode": true, "_isTrimmedMode": true,
"_atlas": null, "_atlas": null,
"_id": "97/S6HDq9MeqgmV1Zwnhbb" "_id": "4f3FLPAwBOmZ14dcL7wINL"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 6
},
"_enabled": true,
"alignMode": 2,
"_target": null,
"_alignFlags": 18,
"_left": 0,
"_right": 1048,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 40,
"_originalHeight": 0,
"_id": "4egRIGqGlJ+q9io/Aad+bD"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "51haGpsblC9L6V90SEmhCy"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 100,
"_originalHeight": 100,
"_id": "ceuFd5fJtHL7nlxNnSnNC5"
}, },
{ {
"__type__": "cc.Canvas", "__type__": "cc.Canvas",
...@@ -338,8 +501,8 @@ ...@@ -338,8 +501,8 @@
"_enabled": true, "_enabled": true,
"_designResolution": { "_designResolution": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 1280, "width": 1088,
"height": 720 "height": 800
}, },
"_fitWidth": false, "_fitWidth": false,
"_fitHeight": false, "_fitHeight": false,
...@@ -439,5 +602,170 @@ ...@@ -439,5 +602,170 @@
"_groupIndex": 0, "_groupIndex": 0,
"groupIndex": 0, "groupIndex": 0,
"_id": "0aAzbH6R1E+6AmGRrkKa5O" "_id": "0aAzbH6R1E+6AmGRrkKa5O"
},
{
"__type__": "cc.Node",
"_name": "item",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 16
},
{
"__id__": 17
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 40,
"height": 36
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-289,
-187,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "b5oIfmHYFAaII6iXqF+ss2"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "8cdb44ac-a3f6-449f-b354-7cd48cf84061"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "37uFx5NApA3J+kNclu0uM7"
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"_N$hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": null,
"_id": "d1AJZ80p5NNJ9WQGE6r8sz"
} }
] ]
\ No newline at end of file
import { onHomeworkFinish } from "../script/util"; import { onHomeworkFinish, playAudioByUrl } from "../script/util";
import { defaultData } from "../script/defaultData"; import { defaultData } from "../script/defaultData";
cc.Class({ cc.Class({
...@@ -96,11 +96,21 @@ cc.Class({ ...@@ -96,11 +96,21 @@ cc.Class({
addPreloadImage() { addPreloadImage() {
// this._imageResList.push({ url: this.data.pic_url }); this._imageResList.push({ url: this.data.bgItem.url });
this._imageResList.push(...this.data.hotZoneItemArr
.map(data => data.pic_url)
.map(url => { return { url: url } })
);
}, },
addPreloadAudio() { addPreloadAudio() {
// this._audioResList.push({ url: this.data.audio_url }); this._imageResList.push(...this.data.hotZoneItemArr
.map(data => data.audio_url)
.map(url => { return { url: url } })
);
this._audioResList.push({ url: this.data.startAudio });
this._audioResList.push({ url: this.data.endAudio });
}, },
addPreloadAnima() { addPreloadAnima() {
...@@ -131,7 +141,39 @@ cc.Class({ ...@@ -131,7 +141,39 @@ cc.Class({
}, },
initView() { initView() {
const canvas = cc.find('Canvas');
const bg = cc.find('Canvas/bg/ImgBg');
this.loadSpriteByUrl(bg, this.data.bgItem.url, () => {
bg.scale = Math.min((canvas.width / bg.width), (canvas.height / bg.height));
this.data.hotZoneItemArr.forEach(async itemData => {
const item = await this.createItem(itemData, bg);
item.on('click', () => {
playAudioByUrl(itemData.audio_url);
const time = 0.05;
cc.tween(item)
.to(time, { angle: 10 })
.to(time * 2, { angle: -10 })
.to(time, { angle: 0 })
.start();
});
});
});
},
createItem(itemData, bg) {
return new Promise((resolve, reject) => {
const bgScale = bg.width / this.data.bgItem.rect.width;
const item = cc.instantiate(cc.find('item'));
item.parent = bg;
this.loadSpriteByUrl(item, itemData.pic_url, () => {
item.scale = itemData.imgScale * bgScale;
item.x = itemData.rect.x * bgScale - bg.width / 2 + item.width * item.scaleX / 2;
item.y = bg.height / 2 - itemData.rect.y * bgScale - item.height * item.scaleY / 2;
resolve(item);
});
});
}, },
initListener() { initListener() {
...@@ -139,7 +181,6 @@ cc.Class({ ...@@ -139,7 +181,6 @@ cc.Class({
}, },
...@@ -160,6 +201,16 @@ cc.Class({ ...@@ -160,6 +201,16 @@ cc.Class({
loadSpriteByUrl(node, url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
const spr = node.getComponent(cc.Sprite);
spr.spriteFrame = spriteFrame;
if (cb) {
cb();
}
});
},
playAudioByUrl(audio_url, cb = null) { playAudioByUrl(audio_url, cb = null) {
if (audio_url) { if (audio_url) {
......
export const defaultData = { export const defaultData = {
"bgItem": { "bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/c465e1fc66313a170827d4f18d2c6e55.jpeg", "url": "http://staging-teach.cdn.ireadabc.com/0d332cb2b167feb4204b1d77a6f02ed6.jpg",
"rect": { "rect": {
"x": 396.35, "x": 500.13,
"y": 0, "y": 0,
"width": 1180.3, "width": 972.73,
"height": 738 "height": 738
} }
}, },
...@@ -12,18 +12,99 @@ export const defaultData = { ...@@ -12,18 +12,99 @@ export const defaultData = {
"id": "1632280599616", "id": "1632280599616",
"index": 0, "index": 0,
"pic_url": "http://staging-teach.cdn.ireadabc.com/e04216e18a88cf20bb02a144d1ff541a.jpg", "pic_url": "http://staging-teach.cdn.ireadabc.com/e04216e18a88cf20bb02a144d1ff541a.jpg",
"audio_url": "http://staging-teach.cdn.ireadabc.com/7cba4edb49320a17b0db544780e0d0a9.mp3",
"itemType": "pic", "itemType": "pic",
"fontScale": 1.54140625, "fontScale": 1.54140625,
"imgScale": 0.12967798085291557, "imgScale": 0.12967798085291557,
"mapScale": 1.54140625, "mapScale": 1.54140625,
"gIdx": "1", "gIdx": "0",
"rect": { "rect": {
"x": 159.65, "x": -2.13,
"y": 482.97, "y": 0.97,
"width": 149, "width": 149,
"height": 140.05 "height": 140.05
} }
},
{
"id": "1632289217237",
"index": 1,
"pic_url": "http://staging-teach.cdn.ireadabc.com/a328e3509dbf9ff14864fbfae8ce5bff.jpg",
"itemType": "pic",
"fontScale": 1.54140625,
"imgScale": 0.6212121212121212,
"mapScale": 1.54140625,
"gIdx": "0",
"rect": {
"x": 680.71,
"y": 2.45,
"width": 291.35,
"height": 249.11
}
},
{
"id": "1632289232403",
"index": 2,
"pic_url": "http://staging-teach.cdn.ireadabc.com/213871779bc2404f84bfa94672dd0e74.jpg",
"itemType": "pic",
"fontScale": 1.54140625,
"imgScale": 0.09926470588235294,
"mapScale": 1.54140625,
"gIdx": "0",
"rect": {
"x": 4.87,
"y": 548.71,
"width": 135,
"height": 190.59
}
},
{
"id": "1632289256823",
"index": 3,
"pic_url": "http://staging-teach.cdn.ireadabc.com/38a46bbaa1272d7b14e51f4fa882ec12.jpg",
"itemType": "pic",
"fontScale": 1.54140625,
"imgScale": 0.1392914653784219,
"mapScale": 1.54140625,
"gIdx": "0",
"rect": {
"x": 798.88,
"y": 477.43,
"width": 173,
"height": 257.13
}
},
{
"id": "1632289288131",
"index": 4,
"pic_url": "http://staging-teach.cdn.ireadabc.com/98d6388099de7dcd945f39d9f74e226f.jpg",
"itemType": "pic",
"fontScale": 1.54140625,
"imgScale": 0.24875124875124874,
"mapScale": 1.54140625,
"gIdx": "0",
"rect": {
"x": 326.87,
"y": 215.87,
"width": 249,
"height": 348.25
}
},
{
"id": "1632298522008",
"index": 5,
"pic_url": "http://staging-teach.cdn.ireadabc.com/c3a6342d65bd1f717615e6750b97ae30.jpg",
"itemType": "pic",
"fontScale": 1.54140625,
"imgScale": 0.7533333333333333,
"mapScale": 1.54140625,
"gIdx": "0",
"rect": {
"x": 746.38,
"y": 249,
"width": 226,
"height": 226
}
}], }],
"startAudio": "http://staging-teach.cdn.ireadabc.com/dfb27b510e121a1045a3b7613a530e43.mp3", "startAudio": "http://staging-teach.cdn.ireadabc.com/dfb27b510e121a1045a3b7613a530e43.mp3",
"endAudio": "http://staging-teach.cdn.ireadabc.com/d948ef84a50e6ac36bc31110f9062878.mp3" "endAudio": "http://staging-teach.cdn.ireadabc.com/d948ef84a50e6ac36bc31110f9062878.mp3"
}; }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment