Commit d39ff12f authored by jeff's avatar jeff

提交

parent d63fd780
<div class="position-relative">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" >
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
<i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}}
</button>
<!--配置龙骨面板-->
<nz-modal [(nzVisible)]="panelVisible" (nzAfterClose)="closePanel()" [nzTitle]="btnName" (nzOnCancel)="panelCancel()" (nzOnOk)="panelOk()" nzOkText="保存">
<nz-modal [(nzVisible)]="panelVisible" (nzAfterClose)="closePanel()" [nzTitle]="btnName" (nzOnCancel)="panelCancel()"
(nzOnOk)="panelOk()" nzOkText="保存">
<div>
<h4>基础内容:</h4>
......@@ -20,8 +21,7 @@
</nz-radio-group> -->
<div *ngIf="item.type == 'pic'">
<app-upload-image-with-preview
[picUrl]="item?.pic_url"
<app-upload-image-with-preview [picUrl]="item?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, item)">
</app-upload-image-with-preview>
</div>
......@@ -31,12 +31,8 @@
</div>
<div *ngIf="item.type == 'anima'" style="margin-left: 100px;">
<app-upload-dragon-bone
[skeJsonData]=item.skeJsonData
[texJsonData]=item.texJsonData
[texPngData]=item.texPngData
(save)="saveAnima($event)"
>
<app-upload-dragon-bone [skeJsonData]=item.skeJsonData [texJsonData]=item.texJsonData
[texPngData]=item.texPngData (save)="saveAnima($event)">
</app-upload-dragon-bone>
</div>
</div>
......@@ -47,7 +43,7 @@
<h4>状态设置:</h4>
<div style="display: flex; justify-content: space-around;">
<div style="width: 30%; display: flex; align-items: center; flex-direction: column;">
<!-- <div style="width: 30%; display: flex; align-items: center; flex-direction: column;">
<h5> 开始状态 </h5>
<div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; ">
<div style="display: flex; align-items: center; justify-content: center;">
......@@ -72,17 +68,25 @@
<span>{{op[0]}}: </span> <input [disabled]="op[2] == null" type="text" nz-input [(ngModel)]="op[2]" (blur)="saveText(op)" style="margin-left: 5px;">
</div>
</div>
</div> -->
<div style="width: 30%; display: flex; align-items: center; flex-direction: column;">
<div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; ">
<div style="display: flex; align-items: center; justify-content: center;">
<span style="white-space: nowrap">{{op[0]}}: </span> <input type="text" nz-input [(ngModel)]="op[1]"
(blur)="saveText(op)" style="margin-left: 5px;">
</div>
</div>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyChangeData()"> 复制数据 </button>
<div style="margin-left: 20px; margin-top: -5px" >
<div style="margin-left: 20px; margin-top: -5px">
<span>粘贴数据: </span>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData">
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary"
(click)="importData()">导入</button>
</div>
</div>
......@@ -92,17 +96,14 @@
<h4> 音频设置 </h4>
<app-audio-recorder
style="margin: auto"
[audioUrl]="item?.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, item)"
></app-audio-recorder>
<app-audio-recorder style="margin: auto" [audioUrl]="item?.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, item)"></app-audio-recorder>
</div>
<!--
<!--
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
......@@ -149,5 +150,3 @@
</nz-modal>
</div>
\ No newline at end of file
......@@ -70,18 +70,18 @@ export class CustomActionComponent implements OnDestroy, OnChanges {
if (!this.item) {
this.item = {
type: this.type,
skeJsonData: {},
texJsonData: {},
texPngData: {},
// skeJsonData: {},
// texJsonData: {},
// texPngData: {},
changeStart: [
// changeStart: [
],
changeEnd: [
// ],
// changeEnd: [
],
changeTime: 0.3
// ],
// changeTime: 0.3
};
if (this.option) {
......
......@@ -7,20 +7,27 @@
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
<div nz-col nzSpan="5" nzOffset="1" style="display:flex; flex-wrap:wrap;flex-direction: row;width: 100%;">
<h5> 添加背景: </h5>
<!-- <h5> 添加背景: </h5>
<div class="bg-box">
<app-upload-image-with-preview [picUrl]="bgItem?.url" (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div> -->
<div>
<h5>题干音频</h5>
<div style="display: flex;align-items: center; margin-top: 5px">
<app-audio-recorder style="margin: auto" [audioUrl]="bgAudioUrl"
(audioUploaded)="onBgAudioUploadSuucess($event)"></app-audio-recorder>
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" *ngFor="let it of hotZoneArr; let i = index">
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" style="width: auto;"
*ngFor="let it of hotZoneArr; let i = index">
<div
style="margin: auto; padding: 5px;min-width: 220px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
style="width: auto; margin: auto; padding: 5px;min-width: 220px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> 区域{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
......@@ -56,18 +63,10 @@
<div *ngIf="customTypeGroupArr && customTypeGroupArr[it.gIdx]">
<div *ngIf="customTypeGroupArr[it.gIdx].pic">
<app-upload-image-with-preview [picUrl]="it?.pic_url" (imageUploaded)="onItemImgUploadSuccess($event, it)">
<app-upload-image-with-preview [picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div
style="margin-top: 5px; margin-bottom: 5px; display: inline-flex;justify-content: space-between;justify-items: center;">
<div>
手提示 <nz-switch [ngModel]="it.useHand" (ngModelChange)="onChangeSwitch(it,'useHand')" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch>
</div>
<div *ngIf="it.gIdx==0" style="margin-left: 10px;">
显示边框 <nz-switch [ngModel]='it.useBorder' (ngModelChange)="onChangeSwitch(it,'useBorder')" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch>
</div>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].text" style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
......@@ -141,9 +140,9 @@
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div nz-col nzSpan="5" nzOffset="1" style="width: 230px;height: auto;align-self: center;">
<div class="bg-box">
<div class="bg-box" style="width: auto;height: auto;">
<button nz-button nzType="dashed" (click)="addBtnClick()" class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image-->
......@@ -189,13 +188,13 @@
</div>
</div>
</div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()"
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()"
(nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
......@@ -233,4 +232,4 @@
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
\ No newline at end of file
</nz-modal>
\ No newline at end of file
......@@ -153,7 +153,7 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
this.initListener();
// this.init();
this.init();
this.update();
this.refresh();
......@@ -169,6 +169,14 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
}
// 背景音频
@Input()
bgAudioUrl: string = ''
onBgAudioUploadSuucess(e) {
console.log(e)
this.bgAudioUrl = e.url
}
onBackgroundUploadSuccess(e) {
console.log('e: ', e);
......@@ -196,7 +204,7 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
}
if (!this.bgItem.url) {
this.bgItem.url = 'http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg';
this.bgItem.url = 'http://staging-teach.cdn.ireadabc.com/b90a006ba41723ec11970051e92f43e0.png';
}
const bg = this.bg;
......@@ -309,8 +317,6 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
item['id'] = new Date().getTime().toString();
item['data'] = saveData;
item['useHand'] = true
item['useBorder'] = true
console.log('item.x: ', item.x);
if (saveData) {
......@@ -592,7 +598,7 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
showItemLabel(item) {
item.textLabel.visible = true;
item.itemType = 'text';
this.showArrowTop(item)
this.showArrowTop(item, true)
}
showItemRect(item, isShowArrowTop = true) {
......@@ -1167,7 +1173,8 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
console.log('hotZoneItemArr: ', hotZoneItemArr);
return { bgItem, hotZoneItemArr };
// return { bgItem, hotZoneItemArr };
return { hotZoneItemArr, bgAudioUrl: this.bgAudioUrl };
}
saveText(item) {
......@@ -1359,8 +1366,8 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
}
copyHotZoneData() {
const { bgItem, hotZoneItemArr } = this.getSendData();
const { hotZoneItemArr } = this.getSendData();
// const { bgItem, hotZoneItemArr } = this.getSendData();
// const hotZoneItemArrNew = [];
// const tmpArr = JSON.parse(JSON.stringify(hotZoneItemArr));
......@@ -1371,7 +1378,6 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
// })
const jsonData = {
bgItem,
hotZoneItemArr,
isHasRect: this.isHasRect,
isHasPic: this.isHasPic,
......
......@@ -19,7 +19,7 @@
-->
<div *ngFor='let data of item ;index as i'>
<span> 卡片{{i+1}}</span>
<app-custom-hot-zone-mini [bgItem]="data.bgItem" [hotZoneItemArr]="data.hotZoneItemArr"
<app-custom-hot-zone-mini [bgAudioUrl]="data.bgAudioUrl" [hotZoneItemArr]="data.hotZoneItemArr"
[customTypeGroupArr]="customTypeGroupArr" (save)="saveHotZone(data, $event)" (del)="delHotZone(i)">
</app-custom-hot-zone-mini>
</div>
......
......@@ -10,20 +10,30 @@ import { JsonPipe } from '@angular/common';
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "et_13";
saveKey = "PU21";
// 储存对象
item;
customTypeGroupArr = [
{
name: '发音图片',
pic: true,
audio: true,
name: '句子音频',
action: {
type: 'text',
option: [
['color', '#000000'],
['size', '100']
]
}
},
{
name: '发音区块',
rect: true,
audio: true,
name: '发音区域',
action: {
type: 'text',
option: [
['color', '#000000'],
['size', '100']
]
}
},
]
......@@ -80,9 +90,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
/** 保存按钮 */
saveHotZone(group, e) {
console.log('e: ', e);
const { bgItem, hotZoneItemArr } = e;
const { hotZoneItemArr ,bgAudioUrl} = e;
group.bgItem = bgItem;
group.bgAudioUrl = bgAudioUrl;
group.hotZoneItemArr = hotZoneItemArr;
this.save();
......
......@@ -11,6 +11,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"compressing": "^1.5.0"
"compressing": "^1.5.0",
"ngx-color-picker": "^11.0.0"
}
}
......@@ -22,24 +22,14 @@ cc.Class({
this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
},
initWithData(data, scale) {
console.log(scale)
initWithData(data) {
this.data = data
let rect = this.data.rect
this.node.x = (rect.x + rect.width / 2) / scale
this.node.y = (-rect.y - rect.height / 2) / scale
this.node.width = rect.width / scale
this.node.height = rect.height / scale
console.log(this.node)
this.sprite.node.active = false
if (data.useHand) {
this.handAnim.node.active = true
this.handAnim.play()
}
let comps = this.getComponentsInChildren(cc.Widget)
for (let one of comps) {
one.updateAlignment()
}
this.node.x = rect.x + rect.width / 2
this.node.y = -rect.y - rect.height / 2
this.node.width = rect.width
this.node.height = rect.height
this.label = data.text
this.audioId = null
},
......@@ -52,19 +42,6 @@ cc.Class({
this.tipsAnim.node.active = true
this.tipsAnim.play()
}
if (this.data.pic_url) {
tools.getSpriteFrimeByUrl(this.data.pic_url, (sp) => {
this.sprite.spriteFrame = sp
this.sprite.node.width = this.node.width
this.sprite.node.height = this.node.height
this.sprite.node.active = true
})
}
if (this.data.useBorder) {
this.quan.active = true
}
this.handAnim.stop()
this.handAnim.node.active = false
cc.audioEngine.play(this.tipClip)
}
},
......@@ -83,14 +60,6 @@ cc.Class({
if (this.audioId != null) {
cc.audioEngine.stop(this.audioId)
this.audioId = null
this.quan.active = false
this.tipsAnim.stop()
this.tipsAnim.node.active = false
this.sprite.node.active = false
if (this.data.useHand) {
this.handAnim.node.active = true
this.handAnim.play()
}
cc.systemEvent.off('stopMusic', this.stopAudio, this)
}
},
......
......@@ -4,7 +4,8 @@ cc.Class({
extends: cc.Component,
properties: {
hitPre: cc.Prefab
hitPre: cc.Prefab,
wordsPre: cc.Prefab
},
onLoad() {
......@@ -15,44 +16,57 @@ cc.Class({
initWithData(data) {
this.clearItems()
tools.getSpriteFrimeByUrl(data.bgItem.url, (sp) => {
let rect = sp.getRect()
let scale = rect.width / rect.height
let originRect = cc.size(1280, 720)
let originScale = originRect.width / originRect.height
if (scale < originScale) {
scale = rect.height / originRect.height
let width = rect.width / scale
this.node.width = width
this.node.height = originRect.height
// tools.getSpriteFrimeByUrl(data.bgItem.url, (sp) => {
// let rect = sp.getRect()
// let scale = rect.width / rect.height
// let originRect = cc.size(1280, 720)
// let originScale = originRect.width / originRect.height
// if (scale < originScale) {
// scale = rect.height / originRect.height
// let width = rect.width / scale
// this.node.width = width
// this.node.height = originRect.height
} else if (scale > originScale) {
scale = rect.width / originRect.width
this.node.height = rect.height / scale
this.node.width = originRect.width
// } else if (scale > originScale) {
// scale = rect.width / originRect.width
// this.node.height = rect.height / scale
// this.node.width = originRect.width
// } else {
// scale = rect.width / originRect.width
// this.node.width = originRect.width
// this.node.height = originRect.height
// }
// this._sprite.spriteFrame = sp
// this._sprite.node.width = this.node.width
// this._sprite.node.height = this.node.height
// this._items.width = this.node.width
// this._items.height = this.node.height
// this._items.x = -this.node.width / 2
// this._items.y = this.node.height / 2
// scale = data.bgItem.rect.width / this.node.width
// //初始化点击区域
// let node, comp
// for (let data of data.hotZoneItemArr) {
// node = cc.instantiate(this.hitPre)
// this._items.addChild(node)
// comp = node.getComponent('hitItem')
// comp.initWithData(data, scale)
// this._hitItem.push(node)
// }
// })
let node
for (let one of data.hotZoneItemArr) {
if (one.gIdx == '0') { // 发音句子
node = cc.instantiate(this.wordsPre)
comp = node.getComponent('wordsItem')
} else {
scale = rect.width / originRect.width
this.node.width = originRect.width
this.node.height = originRect.height
}
this._sprite.spriteFrame = sp
this._sprite.node.width = this.node.width
this._sprite.node.height = this.node.height
this._items.width = this.node.width
this._items.height = this.node.height
this._items.x = -this.node.width / 2
this._items.y = this.node.height / 2
scale = data.bgItem.rect.width / this.node.width
//初始化点击区域
let node, comp
for (let data of data.hotZoneItemArr) {
node = cc.instantiate(this.hitPre)
this._items.addChild(node)
comp = node.getComponent('hitItem')
comp.initWithData(data, scale)
}
this._items.addChild(node)
comp.initWithData(one)
this._hitItem.push(node)
}
})
},
/** 清除item */
......
......@@ -82,18 +82,21 @@
},
{
"__id__": 19
},
{
"__id__": 33
}
],
"_active": true,
"_components": [
{
"__id__": 33
"__id__": 48
},
{
"__id__": 34
"__id__": 49
},
{
"__id__": 35
"__id__": 50
}
],
"_prefab": null,
......@@ -626,6 +629,9 @@
"hitPre": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"wordsPre": {
"__uuid__": "a33b90a4-90af-4a31-91ad-110894bbe407"
},
"_id": "25htXxEOZC+47ROkvoLV/U"
},
{
......@@ -858,6 +864,9 @@
"hitPre": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"wordsPre": {
"__uuid__": "a33b90a4-90af-4a31-91ad-110894bbe407"
},
"_id": "89aCQ7yHtOn4s8onn5MbAu"
},
{
......@@ -1508,6 +1517,742 @@
"_originalHeight": 0,
"_id": "14yYhIw95BeZx56bjhZzfB"
},
{
"__type__": "cc.Node",
"_name": "audio",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 34
},
{
"__id__": 39
},
{
"__id__": 45
}
],
"_active": true,
"_components": [
{
"__id__": 47
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 600,
"height": 90
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-252.23000000000002,
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": "73LZP/ZUhPjb95BiJ/JUtb"
},
{
"__type__": "cc.Node",
"_name": "btnPlay",
"_objFlags": 0,
"_parent": {
"__id__": 33
},
"_children": [
{
"__id__": 35
},
{
"__id__": 37
}
],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 73,
"height": 73
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-204.199,
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": "6aSd82eBdJ3KE8dWlnKkyV"
},
{
"__type__": "cc.Node",
"_name": "btn_stop",
"_objFlags": 0,
"_parent": {
"__id__": 34
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 36
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 69,
"height": 73
},
"_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": "caur2ABY5CPrxVap+/dG1s"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 35
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "7b07d2a9-946a-46e7-ae60-71d45eb0d5c3"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "9bUdEmv89LM7Ch2zikGZxE"
},
{
"__type__": "cc.Node",
"_name": "btn_next",
"_objFlags": 0,
"_parent": {
"__id__": 34
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 38
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 64,
"height": 68
},
"_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": "a26RWDR1dKgbvH/mmPKa4I"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 37
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "68899d36-0959-405b-b0a4-ba99d96f471c"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "67n/3zVDlChbBxVBsMSZCn"
},
{
"__type__": "cc.Node",
"_name": "bg_tiaodi",
"_objFlags": 0,
"_parent": {
"__id__": 33
},
"_children": [
{
"__id__": 40
},
{
"__id__": 42
}
],
"_active": true,
"_components": [
{
"__id__": 44
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 388,
"height": 30
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
51.05,
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": "08zW2AlLdJdZ5SERtwWIqs"
},
{
"__type__": "cc.Node",
"_name": "bg_tiao",
"_objFlags": 0,
"_parent": {
"__id__": 39
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 41
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 382,
"height": 24
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-190.6,
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": "693gzQ/ilBboz++pwIjRZW"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 40
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "802a73b5-336d-465e-a5aa-2c559975bd84"
},
"_type": 3,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 1,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "22ejznEcFGuYZA5G0//V6z"
},
{
"__type__": "cc.Node",
"_name": "icon_move",
"_objFlags": 0,
"_parent": {
"__id__": 39
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 43
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 26,
"height": 51
},
"_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": "0eGoPI+7hJDra6UYZOzegS"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 42
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "fff435c8-ec81-49f6-8793-3a8ae25d77e2"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "7dLEK9QGpHx4ykezUqcHlh"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 39
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "80fb10f3-51a4-4982-b965-590c813dd748"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "d2iUs5jcxJcoSJAgf9ngMa"
},
{
"__type__": "cc.Node",
"_name": "New Label",
"_objFlags": 0,
"_parent": {
"__id__": 33
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 46
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 108,
"g": 105,
"b": 155,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 104.26,
"height": 31.5
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
183.568,
35.456,
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": "9dlq477AlIkqZdPBNW6e1s"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 45
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_string": "1:00/1:45",
"_N$string": "1:00/1:45",
"_fontSize": 25,
"_lineHeight": 25,
"_enableWrapText": true,
"_N$file": null,
"_isSystemFontUsed": true,
"_spacingX": 0,
"_batchAsBitmap": false,
"_styleFlags": 0,
"_underlineHeight": 0,
"_N$horizontalAlign": 1,
"_N$verticalAlign": 1,
"_N$fontFamily": "Arial",
"_N$overflow": 0,
"_N$cacheMode": 0,
"_id": "ef4UTltpZDP51GI6bexavI"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 33
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 20,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 62.77000000000001,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "50C3HEd7VCHoMtvxKUTJaF"
},
{
"__type__": "cc.Canvas",
"_name": "",
......
......@@ -100,7 +100,7 @@ cc.Class({
},
getDefaultData() {
const dataJson = '[{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/1a7513da33595f343fa73efa3be153d6.png","rect":{"x":231,"y":0,"width":287,"height":287}},"hotZoneItemArr":[{"id":"1620741734006","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/e74a1c89473132b6ce53633fc53a6aee.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/c8a7dd49a778b0b6dd509aac0ef437ff.mp3","itemType":"pic","fontScale":0.58515625,"imgScale":0.12725,"mapScale":0.58515625,"gIdx":"1","rect":{"x":113.87,"y":112.33,"width":64.9,"height":86.02}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/1a7513da33595f343fa73efa3be153d6.png","rect":{"x":231,"y":0,"width":287,"height":287}},"hotZoneItemArr":[{"id":"1620741734006","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/e74a1c89473132b6ce53633fc53a6aee.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/c8a7dd49a778b0b6dd509aac0ef437ff.mp3","itemType":"pic","fontScale":0.58515625,"imgScale":0.12725,"mapScale":0.58515625,"gIdx":"1","rect":{"x":113.87,"y":112.33,"width":64.9,"height":86.02}}]}]'
const dataJson = '[{"hotZoneItemArr":[{"id":"1620866294132","index":0,"itemType":"text","fontScale":0.29296875,"imgScale":1,"mapScale":0.29296875,"gIdx":"0","rect":{"width":58.1,"height":11.72,"x":300.54,"y":305.15}},{"id":"1620866973543","index":1,"itemType":"text","fontScale":0.29296875,"imgScale":1,"mapScale":0.29296875,"gIdx":"1","rect":{"width":46.84,"height":11.72,"x":387.59,"y":236.14}}],"bgAudioUrl":"http://staging-teach.cdn.ireadabc.com/c8a7dd49a778b0b6dd509aac0ef437ff.mp3"}]'
const data = JSON.parse(dataJson);
return data;
},
......@@ -112,9 +112,8 @@ cc.Class({
addPreload() {
for (let item of this.data) {
this._imageResList.push({ url: item.bgItem.url })
item.bgAudioUrl && this._audioResList.push({ url: item.bgAudioUrl })
for (let item of item.hotZoneItemArr) {
item.pic_url && this._imageResList.push({ url: item.pic_url })
item.audio_url && this._audioResList.push({ url: item.audio_url })
}
}
......
......@@ -17,18 +17,22 @@ cc.Class({
},
initWithData(data, scale) {
initWithData(data) {
this.data = data
let rect = this.data.rect
this.node.x = (rect.x + rect.width / 2) / scale
this.node.y = (-rect.y - rect.height / 2) / scale
this.node.width = rect.width / scale
this.node.height = rect.height / scale
let comps = this.getComponentsInChildren(cc.Widget)
for (let one of comps) {
one.updateAlignment()
}
console.log(rect)
this.node.x = rect.x + rect.width / 2
this.node.y = -rect.y - rect.height / 2
this.node.width = rect.width
this.node.height = rect.height
this.node.scale = data.fontScale ? data.fontScale : 1
this.label.string = data.text ? data.text : ''
this.audioId = null
if (data.audio_url) {
this.playAnim.node.active = true
} else {
this.playAnim.node.active = false
}
},
onTouchStart() {
......
......@@ -28,8 +28,8 @@
"rawHeight": 30,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"borderLeft": 35,
"borderRight": 35,
"subMetas": {}
}
}
......
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