Commit 5579fc40 authored by jeff's avatar jeff

1.提交

parent 0952dbf6
......@@ -67,6 +67,7 @@
display: flex;
align-items: center;
justify-content: center;
justify-items: center;
.save-btn {
width: 160px;
......@@ -78,6 +79,8 @@
display: flex;
align-items: center;
justify-content: center;
margin-left: 50px;
margin-right: 50px;
}
}
......
......@@ -66,6 +66,8 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
@Output()
save = new EventEmitter();
@Output()
del = new EventEmitter();
saveDisabled = true;
......@@ -268,7 +270,7 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) {
this.hotZoneArr[i].title = 'item-' + (i + 1);
this.hotZoneArr[i].title = '区域' + (i + 1);
}
}
......@@ -302,11 +304,12 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
item.y = this.canvasHeight / 2;
item.itemType = this.getDefaultItemType();
item.gIdx = this._dafaultIndex + ''
item.gIdx = 0
item['id'] = new Date().getTime().toString();
item['data'] = saveData;
item['useHand'] = true
item['useBorder'] =true
console.log('item.x: ', item.x);
if (saveData) {
......@@ -320,6 +323,7 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
item['id'] = saveData.id;
item['pic'] = saveData.pic_url
// item['skeJsonData'] = saveData.skeJsonData;
// item['texJsonData'] = saveData.texJsonData;
// item['texPngData'] = saveData.texPngData;
......@@ -438,10 +442,9 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
}
}
private _dafaultIndex: number = 1
getDefaultItemType() {
if (this.customTypeGroupArr) {
const group = this.customTypeGroupArr[this._dafaultIndex];
const group = this.customTypeGroupArr[0];
if (group.rect) {
return 'rect';
}
......@@ -1074,13 +1077,20 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
return false;
}
saveClick() {
const sendData = this.getSendData();
this.save.emit(sendData);
}
deleteClick() {
this.del.emit()
}
/** 改变内容 */
onChangeSwitch(data,name:string){
data[name] =!data[name]
}
getSendData() {
const bgItem = this.bgItem;
......@@ -1115,10 +1125,12 @@ export class CustomHotZoneComponent1 implements OnInit, OnDestroy, OnChanges {
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
mapScale: this.mapScale,
skeJsonData: hotZoneArr[i].skeJsonData,
texJsonData: hotZoneArr[i].texJsonData,
texPngData: hotZoneArr[i].texPngData,
gIdx: hotZoneArr[i].gIdx
// skeJsonData: hotZoneArr[i].skeJsonData,
// texJsonData: hotZoneArr[i].texJsonData,
// texPngData: hotZoneArr[i].texPngData,
gIdx: hotZoneArr[i].gIdx,
useHand: hotZoneArr[i].useHand,
useBorder: hotZoneArr[i].useBorder
};
hotZoneItem['actionData_' + hotZoneItem.gIdx] = hotZoneArr[i]['actionData_' + hotZoneArr[i].gIdx]
......
<div class="model-content">
<div style="padding: 10px;">
<!--
<!--
<div style="width: 100%; margin-top: 15px; margin-bottom: 50px;" align="center">
......@@ -17,14 +17,19 @@
</div>
-->
<app-custom-hot-zone-mini
[bgItem]="item.bgItem"
[hotZoneItemArr]="item.hotZoneItemArr"
[customTypeGroupArr]="customTypeGroupArr"
(save)="saveHotZone(item, $event)"
>
<div *ngFor='let data of item ;index as i'>
<span> 卡片{{i+1}}</span>
<app-custom-hot-zone-mini [bgItem]="data.bgItem" [hotZoneItemArr]="data.hotZoneItemArr"
[customTypeGroupArr]="customTypeGroupArr" (save)="saveHotZone(data, $event)" (del)="delHotZone(i)">
</app-custom-hot-zone-mini>
</div>
<div style="margin-top: 20px; width: 100%; display: inline-flex; align-items: center;justify-content: center;">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" (click)="addClick()">
<i nz-icon nzType="save"></i>
添加新卡片
</button>
</div>
</app-custom-hot-zone-mini>
<!-- <div style="width: 300px;" align='center'>
<span>图1: </span>
<app-upload-image-with-preview
......@@ -56,4 +61,4 @@
</div>
</div>
</div>
\ No newline at end of file
......@@ -15,13 +15,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item;
customTypeGroupArr = [
{
name: '发音动画',
rect: true,
animaSmall: true,
audio: true,
},
{
name: '发音图片',
pic: true,
......@@ -32,38 +25,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
rect: true,
audio: true,
},
{
name: '变化文本',
action: {
type: 'text',
option: [
['fontColor', '#000000'],
['fontSize', '100'],
['opacity', '0', '100']
]
},
},
{
name: '变化图片',
action: {
type: 'pic',
option: [
// ['scale', '1'],
['opacity', '0', '100']
]
},
},
{
name: '变化动画',
action: {
type: 'anima',
option: [
// ['scale', '1'],
['opacity', '0', '100']
]
},
},
]
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
......@@ -87,12 +49,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
this.item = {};
this.item = [];
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
if (data && data.length) {
this.item = data;
}
......@@ -115,51 +77,25 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
onSaveCustomAction(e) {
console.log('e:', e);
this.item.customAction = e;
this.save();
}
/** 保存按钮 */
saveHotZone(group, e) {
console.log('e: ', e);
const {bgItem, hotZoneItemArr} = e;
const { bgItem, hotZoneItemArr } = e;
group.bgItem = bgItem;
group.hotZoneItemArr = hotZoneItemArr;
this.save();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
/** 删除按钮 */
delHotZone(index: number) {
this.item.splice(index, 1)
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
onWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].audio = e.url;
this.save();
}
onBackWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].backWordAudio = e.url;
this.save();
/** 添加按钮 */
addClick() {
this.item.push({})
}
/**
......
......@@ -13,12 +13,12 @@
{
"frame": 0,
"value": 255,
"curve": "constant"
"curve": "cubicIn"
},
{
"frame": 0.25,
"value": 0,
"curve": "constant"
"curve": "cubicIn"
},
{
"frame": 0.5,
......
This diff is collapsed.
const tools = require("../script/tools");
cc.Class({
extends: cc.Component,
properties: {
quan: cc.Node,
tipsAnim: cc.Animation,
handAnim: cc.Animation,
sprite: cc.Sprite
},
data: null,
onLoad() {
this.quan.active = false
this.tipsAnim.node.active = false
this.handAnim.node.active = false
},
onEnable() {
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
},
onDisable() {
this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
},
initWithData(data, scale) {
console.log(scale)
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.audioId = null
},
onTouchStart() {
if (this.audioId) return
if (this.data) {
let url = this.data.audio_url
if (url && url != '') {
this.playAudio(url)
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
}
},
/** 播放音乐 */
playAudio(url) {
cc.assetManager.loadRemote(url, (err, audioClip) => {
if (err) return
cc.systemEvent.once('stopMusic', this.stopAudio, this)
this.audioId = cc.audioEngine.play(audioClip, false, 0.8);
cc.audioEngine.setFinishCallback(this.audioId, this.stopAudio.bind(this));
});
},
stopAudio() {
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)
}
},
/** 音频id */
audioId: null,
});
{
"ver": "1.0.8",
"uuid": "57f79280-6f4b-4d53-b1e3-1cca543a4d9e",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
const tools = require("../script/tools");
cc.Class({
extends: cc.Component,
properties: {
tipsAnim: cc.Animation,
handAnim: cc.Animation,
hitPre: cc.Prefab,
borders: [cc.Node]
},
data: null,
onLoad() {
this.tipsAnim.node.active = false
this.handAnim.node.active = false
},
onEnable() {
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
},
onDisable() {
this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
this._hitItem = []
this._items = this.node.getChildByName('items')
this._sprite = this.getComponentInChildren(cc.Sprite)
},
initWithData(data) {
this.data = data
let rect = this.data.rect
this.node.x = rect.x
this.node.y = rect.y
this.node.width = rect.width
this.node.height = rect.height
if (this.data.useHand) {
this.handAnim.node.active = false
this.handAnim.play()
}
},
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
onTouchStart() {
if (this.data) {
let url = this.data.audio_url
if (url && url != '') {
this.playAudio(url)
} 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
}
}
},
/** 播放音乐 */
playAudio(url) {
cc.assetManager.loadRemote(url, (err, audioClip) => {
if (err) return
this.audioId = cc.audioEngine.play(audioClip, false, 0.8);
cc.audioEngine.setFinishCallback(this.audioId, () => {
this.audioId = null
});
});
this.borders[0].x = -this.node.width / 2
this.borders[1].x = this.node.width / 2
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)
}
})
},
stopAudio() {
if (this.audioId != null) {
cc.audioEngine.stop(this.audioId)
this.audioId = null
}
},
/** 音频id */
audioId: null,
/** 清除item */
clearItems() {
this._items.removeAllChildren(true)
this._hitItem.length = 0
}
});
{
"ver": "1.0.8",
"uuid": "57f79280-6f4b-4d53-b1e3-1cca543a4d9e",
"uuid": "fccd4db5-30ec-4b66-aea2-c29fd0c0301f",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
......
This diff is collapsed.
import { tools } from "./tools";
const tools = require("./tools");
cc.Class({
extends: cc.Component,
......@@ -64,7 +65,6 @@ cc.Class({
sy = frameSize.height / this._designSize.height;
this._mapScaleMin = Math.min(sx, sy) * this._cocosScale;
this._mapScaleMax = Math.max(sx, sy) * this._cocosScale;
this.originRect = cc.size(1280, 720)
},
......@@ -88,36 +88,20 @@ cc.Class({
},
onEnable() {
this.rightNode.on(cc.Node.EventType.MOUSE_DOWN, this.changeIcon.bind(this, this.rightNode, true))
this.rightNode.on(cc.Node.EventType.MOUSE_UP, this.changeIcon.bind(this, this.rightNode, false))
this.rightNode.on(cc.Node.EventType.MOUSE_LEAVE, this.changeIcon.bind(this, this.rightNode, false))
this.leftNode.on(cc.Node.EventType.MOUSE_DOWN, this.changeIcon.bind(this, this.leftNode, true))
this.leftNode.on(cc.Node.EventType.MOUSE_UP, this.changeIcon.bind(this, this.leftNode, false))
this.leftNode.on(cc.Node.EventType.MOUSE_UP, this.changeIcon.bind(this, this.leftNode, false))
cc.systemEvent.on('playAudio', this.onPlayAudio, this)
},
onDisable() {
this.rightNode.off(cc.Node.EventType.MOUSE_DOWN)
this.rightNode.off(cc.Node.EventType.MOUSE_UP)
this.rightNode.off(cc.Node.EventType.MOUSE_LEAVE)
this.leftNode.off(cc.Node.EventType.MOUSE_DOWN)
this.leftNode.off(cc.Node.EventType.MOUSE_UP)
this.leftNode.off(cc.Node.EventType.MOUSE_LEAVE)
cc.systemEvent.off('playAudio', this.onPlayAudio, this)
},
changeIcon(node, bl) {
node.children[0].active = !bl
node.children[1].active = bl
},
getData(cb) {
cb(this.getDefaultData());
},
getDefaultData() {
const dataJson = '[{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/807e9f0c160545ec14d5094f258e0c75.png","rect":{"x":249,"y":0,"width":299,"height":299}},"hotZoneItemArr":[{"id":"1620701172440","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/d8edc8d8113269b4c97b75a55a5c926c.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/bd0502e664d0d279ccbec4e22b60f051.mp3","itemType":"pic","fontScale":0.62265625,"imgScale":0.4671875,"mapScale":0.62265625,"gIdx":"1","rect":{"x":29.9,"y":29.9,"width":239.2,"height":239.2}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/807e9f0c160545ec14d5094f258e0c75.png","rect":{"x":249,"y":0,"width":299,"height":299}},"hotZoneItemArr":[{"id":"1620701172440","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/d8edc8d8113269b4c97b75a55a5c926c.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/bd0502e664d0d279ccbec4e22b60f051.mp3","itemType":"pic","fontScale":0.62265625,"imgScale":0.4671875,"mapScale":0.62265625,"gIdx":"1","rect":{"x":29.9,"y":29.9,"width":239.2,"height":239.2}}]}]'
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 data = JSON.parse(dataJson);
return data;
},
......@@ -199,8 +183,6 @@ cc.Class({
if (this.curPage == 1) {
this.leftNode.active = true
this.leftNode.children[0].active = true
this.leftNode.children[1].active = false
this.leftNode.scale = 1
}
......@@ -224,8 +206,6 @@ cc.Class({
if (this.curPage == this.data.length - 2) {
this.rightNode.active = true
this.rightNode.children[0].active = true
this.rightNode.children[1].active = false
this.rightNode.scale = 1
}
this.rightMove()
......@@ -280,38 +260,18 @@ cc.Class({
})
.start();
},
// update (dt) {},
stopAudio(){
cc.systemEvent.emit('stopMusic')
},
// ------------------------------------------------
/**普通大小 */
originRect: null,
/**设置显示区域内容 */
setContent(picNode, data) {
if (!data) {
console.log('数据错误')
return
}
picNode
let sprite = picNode.getComponentInChildren(cc.Sprite)
tools.getSpriteFrimeByUrl(data.bgItem.url, (sp) => {
sprite.spriteFrame = sp
let rect = sp.getRect()
let scale = rect.width / rect.height
let originScale = this.originRect.width / this.originRect.height
if (scale < originScale) {
let width = rect.width / (rect.height / this.originRect.height)
picNode.width = width
picNode.height = this.originRect.height
} else if (scale > originScale) {
picNode.height = rect.height / (rect.width / this.originRect.width)
picNode.width = this.originRect.width
} else {
picNode.width = this.originRect.width
picNode.height = this.originRect.height
}
console.log(picNode)
})
picNode.getComponent('picNode').initWithData(data)
}
// ------------------------------------------
......
......@@ -23,19 +23,18 @@ export default class NewClass extends cc.Component {
start() {
cc.color()
this.node.off(cc.Node.EventType.MOUSE_DOWN)
cc.systemEvent.emit('stopMusic')
}
// update (dt) {}
onEnable() {
let one = new cc.Animation()
one.currentClip.speed
one.play().wrapMode
one.defaultClip.wrapMode = cc.WrapMode.Reverse
cc.Node.EventType.MOUSE_LEAVE
cc.tween(this.node).to(1,{opacity:1}).to
cc.assetManager.loadRemote
this.node.
this.node.removeAllChildren()
// let one = new cc.Node()
// one.removeFromParent()
// this.node
// cc.audioEngine.setFinishCallback()
}
......
export const tools = {
const tools = {
getSpriteFrimeByUrl(url, cb) {
cc.loader.load({ url }, (err, img) => {
const spriteFrame = new cc.SpriteFrame(img)
......@@ -7,4 +7,6 @@ export const tools = {
}
})
}
}
\ No newline at end of file
}
module.exports = tools
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "82ae3bc3-8bdf-463b-97d1-60ebd190bad2",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 170,
"height": 100,
"platformSettings": {},
"subMetas": {
"bg_quan": {
"ver": "1.0.4",
"uuid": "9b336882-962e-447b-9d2c-89aca2bf95b4",
"rawTextureUuid": "82ae3bc3-8bdf-463b-97d1-60ebd190bad2",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 170,
"height": 100,
"rawWidth": 170,
"rawHeight": 100,
"borderTop": 31,
"borderBottom": 31,
"borderLeft": 31,
"borderRight": 31,
"subMetas": {}
}
}
}
\ 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