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>
<div style="margin-bottom: 10px; width: 80%; margin: auto;">
<!-- <nz-radio-group [ngModel]="item.type" (ngModelChange)="radioChange($event)">
......@@ -20,34 +21,29 @@
</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>
<div *ngIf="item.type == 'text'">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="saveText(item)">
</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>
</div>
<nz-divider style="margin-top: 10px;"></nz-divider>
<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,37 +68,42 @@
<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>
<nz-divider style="margin-top: 10px;"></nz-divider>
<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"
......@@ -148,6 +149,4 @@
</nz-modal>
</div>
</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) {
......
......@@ -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._hitItem.push(node)
}
})
this._items.addChild(node)
comp.initWithData(one)
this._hitItem.push(node)
}
},
/** 清除item */
......
This diff is collapsed.
......@@ -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 })
}
}
......
......@@ -14,21 +14,25 @@ cc.Class({
},
onDisable() {
},
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