Commit d1a0b3fe authored by 李维's avatar 李维

文字热区 文字输入 音频播放 热区选项添加完成

parent 9678c8be
......@@ -58,6 +58,7 @@ export default class NewClass extends cc.Component {
initEventListener() {
const closeBtn = cc.find("center/header/close", this.node);
closeBtn.on("click", ()=>{
this.node.emit("onCancel");
this.hide();
})
......
......@@ -58,7 +58,7 @@ export default class NewClass extends cc.Component {
mainContainer.scale = s2;
}
show() {
show(defaultText = "") {
if(this.isShow) {
// 如果正在显示 不处理
return;
......@@ -70,9 +70,9 @@ export default class NewClass extends cc.Component {
this.node.y = this.node.y = -canvas.height / 2 - this.node.height / 2;
// 显示组件
this.node.active = true;
// 清空输入字符串变量
this.text = "";
// 清空当前显示
// 显示默认传进来的字符串
this.text = defaultText;
// 显示默认传进来的字符串
this.inputText("");
// 显示标记位置为true
this.isShow = true;
......@@ -130,8 +130,8 @@ export default class NewClass extends cc.Component {
})
// 订阅节点事件监听 - 外部调用键盘时会发送事件消息
this.node.on("show", ()=>{
this.show();
this.node.on("show", (defaultText)=>{
this.show(defaultText);
})
}
......
......@@ -88,18 +88,21 @@
},
{
"__id__": 206
},
{
"__id__": 218
}
],
"_active": true,
"_components": [
{
"__id__": 216
"__id__": 221
},
{
"__id__": 217
"__id__": 222
},
{
"__id__": 218
"__id__": 223
}
],
"_prefab": null,
......@@ -7823,7 +7826,7 @@
"__id__": 210
},
{
"__id__": 213
"__id__": 215
}
],
"_active": false,
......@@ -8041,6 +8044,9 @@
"_children": [
{
"__id__": 211
},
{
"__id__": 213
}
],
"_active": true,
......@@ -8183,6 +8189,96 @@
"_atlas": null,
"_id": "7dNKhuld5Lo78FZfSVa0u2"
},
{
"__type__": "cc.Node",
"_name": "icon_play_audio",
"_objFlags": 0,
"_parent": {
"__id__": 210
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 214
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 61,
"height": 65
},
"_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": "b8au8Qh/lAH5Yg55Tf3Ycl"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 213
},
"_enabled": true,
"_materials": [],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "a7b53583-16db-42a1-b923-b73852383a5e"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "82K3w/4rtE1KU4M0GNfg7P"
},
{
"__type__": "cc.Node",
"_name": "audio",
......@@ -8192,7 +8288,7 @@
},
"_children": [
{
"__id__": 214
"__id__": 216
}
],
"_active": true,
......@@ -8250,13 +8346,13 @@
"_name": "btn",
"_objFlags": 0,
"_parent": {
"__id__": 213
"__id__": 215
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 215
"__id__": 217
}
],
"_prefab": null,
......@@ -8312,7 +8408,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 214
"__id__": 216
},
"_enabled": true,
"_clip": {
......@@ -8326,6 +8422,163 @@
"preload": false,
"_id": "dey05oKrBIspvsDa6pOIQz"
},
{
"__type__": "cc.Node",
"_name": "New Node",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 219
}
],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 100,
"height": 100
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_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": "91i2wGBUNO/aVEV0M402zJ"
},
{
"__type__": "cc.Node",
"_name": "New Label",
"_objFlags": 0,
"_parent": {
"__id__": 218
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 220
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 22.25,
"height": 50.4
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
50,
50,
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": "6cCRKENvFE5I9978OAy3iB"
},
{
"__type__": "cc.Label",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 219
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_string": "3",
"_N$string": "3",
"_fontSize": 40,
"_lineHeight": 40,
"_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": "d8hatUvWxAi5F+od2lb3r1"
},
{
"__type__": "cc.Canvas",
"_name": "",
......
import {
asyncDelay,
onHomeworkFinish,
playAudioByUrl,
getSprNode,
} from "../script/util_DG_FAF";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent_DG_FAF";
......@@ -69,9 +70,12 @@ export default class SceneComponent extends MyCocosSceneComponent {
}
currentInputTarget = null;
onSelectedCallback = null;
onKeyboardEnterCallback = null;
initEventListener() {
// 注册键盘输入确定时间
this.keyboard.on("onEnter", (text)=>{
this.onKeyboardEnterCallback && this.onKeyboardEnterCallback(this.currentInputTarget, text)
if(this.currentInputTarget) {
// const la = this.currentInputTarget.addComponent(cc.Label);
// la.string = text;
......@@ -79,7 +83,17 @@ export default class SceneComponent extends MyCocosSceneComponent {
}
})
this.selectModal.on("onSelected", (event)=>{
this.selectModal.on("onSelected", (e)=>{
this.onSelectedCallback && this.onSelectedCallback(this.currentInputTarget, e)
if(this.currentInputTarget) {
// const la = this.currentInputTarget.addComponent(cc.Label);
// la.string = event.value;
this.currentInputTarget = null;
}
})
this.selectModal.on("onCancel", (e)=>{
this.onSelectedCallback && this.onSelectedCallback(this.currentInputTarget, e)
if(this.currentInputTarget) {
// const la = this.currentInputTarget.addComponent(cc.Label);
// la.string = event.value;
......@@ -118,101 +132,261 @@ export default class SceneComponent extends MyCocosSceneComponent {
});
}
colorUnit = 0.004;
serverUnitX = 0.00333334;
serverUnitY = 0.00257734;
colorSprPoolArr = [];
totalLineArr = [];
rectNodeArr = [];
picAnimNodeArr = []
colorPicNodeArr = [];
animaNodeArr = [];
circleAnimaNodeArr = [];
signAnimaNodeArr = [];
picNodeArr = [];
linkRectGroup = [];
initHotZoneItem() {
this.picNodeArr = [];
this.data.hotZoneItemArr.forEach((item) => {
this.setOneAudioBtn(item);
// switch (item.gIdx) {
// case "0":
// this.setOneLinkRect(item);
// break;
// case "1":
// this.setOneWriteAnima(item);
// break;
// case "2":
// this.setOneCircleAnima(item);
// break;
// case "3":
// this.setOneAudioBtn(item);
// break;
// case "4":
// this.setOneSignAnima(item);
// break;
// case "5":
// this.setOneColorPic(item);
// break;
// case "6":
// this.setOnePicAnima(item);
// break;
// // case "0":
// // this.setOneHotZonePic(item);
// // break;
// default:
// break;
// }
this.data.hotZoneConfigArr.forEach(configItem => {
switch (configItem.hotZoneType) {
// 文字选择题
case "0": this.setOptionList(configItem, this.data.hotZoneItemArr[configItem.linkHotZoneIndex]); break;
// 音频播放按钮
case "2": this.setOneAudioBtn(configItem, this.data.hotZoneItemArr[configItem.linkHotZoneIndex]); break;
// 热区选项
case "3": this.setHotZoneRadioGroup(configItem); break;
// 文字输入区
case "4": this.setTextInput(configItem, this.data.hotZoneItemArr[configItem.linkHotZoneIndex]); break;
}
});
};
setOneAudioBtn(data) {
const btn = this.getAudioSpr(data);
btn.addComponent(cc.Button);
// 热区单选组
setHotZoneRadioGroup(contentData, debugMode=false) {
const radioGroup = [];
let currentHighLightRec = null;
contentData.contentList.forEach((option, index) => {
const hotZoneData = this.data.hotZoneItemArr[option.selectHotZoneIndex];
const rect = this.newRectNode(hotZoneData, debugMode);
rect.index = index;
radioGroup.push(rect);
rect.on("click", ()=>{
if(currentHighLightRec) {
currentHighLightRec.destroy();
currentHighLightRec = null
}
currentHighLightRec = this.newMaskRectNode(hotZoneData);
})
});
radioGroup
}
// 设置文字输入热区
setTextInput(contentData, hotZoneItemData, debugMode=false) {
const rect = this.newRectNode(hotZoneItemData, debugMode);
rect.on("click", async () => {
this.currentInputTarget = rect;
const optionList = [];
contentData.contentList.forEach(option => {
optionList.push({
label: option.text,
value: option.text
})
});
// 取得上次输入文字 传到键盘中 作为默认显示 - 清空当前文字节点
let lastText = "";
if(rect.cleanLast) {
lastText = rect.cleanLast()
}
let text = await this.asyncShowKeyboardModal(lastText);
const inputLabel = this.newInputTextNode(text, 0);
inputLabel.x = rect.width / 2;
inputLabel.y = rect.height / 2;
// 更新清除方法
rect.cleanLast = () => {
inputLabel.destroy();
return text;
}
rect.addChild(inputLabel);
})
}
// 设置选项菜单热区
setOptionList(contentData, hotZoneItemData, debugMode=false) {
const rect = this.newRectNode(hotZoneItemData, debugMode);
rect.on("click", async () => {
this.currentInputTarget = rect;
const optionList = [];
contentData.contentList.forEach(option => {
optionList.push({
label: option.text,
value: option.text
})
});
// 取得上次输入文字 - 清空当前文字节点
let lastText = "";
if(rect.cleanLast) {
lastText = rect.cleanLast()
}
let selectData = await this.asyncShowSelectModal(optionList)
// 如果点击了取消 则还原上次显示
if(selectData == null) {
selectData = {
value: lastText
}
}
const inputLabel = this.newInputTextNode(selectData.value, 0);
inputLabel.x = rect.width / 2;
inputLabel.y = rect.height / 2;
// 更新清除方法
rect.cleanLast = () => {
inputLabel.destroy();
return selectData.value;
}
rect.addChild(inputLabel);
})
}
// 设置音频热区
setOneAudioBtn(contentData, hotZoneItemData) {
const btn = this.newAudioSpr(hotZoneItemData);
btn.on("click", () => {
this.currentInputTarget = btn;
// this.selectModal.emit("show", [
// {index: 0, label: "Option-1", value: 1},
// {index: 1, label: "Option-2", value: 2},
// {index: 2, label: "Option-3", value: 3},
// {index: 3, label: "Option-4", value: 5}
// ]);
this.keyboard.emit("show");
playAudioByUrl(contentData.audio_url, () => {
})
})
};
getAudioSpr(data) {
// 新建矩形区域
newRectNode(data, debugMode) {
const rate = (this.hotZoneBg.scale * this.hotZoneBg.width) / this.data.bgItem.rect.width;
const rectNode = new cc.Node();
rectNode.name = 'rect' + data.index;
this.hotZoneBg.addChild(rectNode);
// 红色矩形
const ctx = rectNode.addComponent(cc.Graphics);
ctx.lineWidth = 4;
ctx.strokeColor = cc.Color.BLACK;
ctx.fillColor = cc.Color.WHITE.setA(100);
// 设置位置 大小 基准坐标
const scale = rate / this.hotZoneBg.scaleY;
rectNode.width = data.rect.width * scale;
rectNode.height = data.rect.height * scale;
rectNode.x = -this.hotZoneBg.width / 2 + data.rect.x * scale;
rectNode.y = 0 - data.rect.height * scale - data.rect.y * scale;
rectNode.anchorX = rectNode.anchorY = 0;
if (debugMode) {
ctx.rect(0, 0, rectNode.width, rectNode.height);
}
ctx.stroke();
ctx.fill();
rectNode.addComponent(cc.Button);
return rectNode
}
// 新建音频节点 使用默认音乐播放按钮 大小不变 只取热区位置
newAudioSpr(data) {
const rate = (this.hotZoneBg.scale * this.hotZoneBg.width) / this.data.bgItem.rect.width;
const picNode = new cc.Node();
picNode.name= 'pic' + data.index;
picNode.data = data;
this.hotZoneBg.addChild(picNode);
const sprNode = getSprNode("btn_sound");
const sprNode = getSprNode("icon_play_audio");
sprNode.anchorX = 0;
sprNode.anchorY = 0;
picNode.anchorX = 0;
picNode.anchorY = 0;
picNode.addChild(sprNode);
const scale = rate / this.hotZoneBg.scaleY;
picNode.width = sprNode.width = data.rect.width * scale;
picNode.height = sprNode.height = data.rect.height * scale;
picNode.width = data.rect.width * scale;
picNode.height = data.rect.height * scale;
picNode.x = -this.hotZoneBg.width / 2 + data.rect.x * scale;
picNode.y = 0 - data.rect.height * scale - data.rect.y * scale;
picNode.addComponent(cc.Button);
return picNode;
};
// 新建输入文字节点
newInputTextNode(text, styleType) {
const inputNode = new cc.Node();
inputNode.name= '_text_input_';
const label = inputNode.addComponent(cc.Label);
const color = new cc.Color();
cc.Color.fromHEX(color, "#333333");
inputNode.color = color;
label.string = text;
label.lineHeight = 40;
label.fontSize = 40;
label.verticalAlign = 2;
label.horizontalAlign = 2;
return inputNode;
}
// 颜色色块
newMaskRectNode(data) {
const highlightColor = "#FFFF0066";
const rate = (this.hotZoneBg.scale * this.hotZoneBg.width) / this.data.bgItem.rect.width;
const rectNode = new cc.Node();
rectNode.name = '_mask_color_';
this.hotZoneBg.addChild(rectNode);
// 红色矩形
const ctx = rectNode.addComponent(cc.Graphics);
ctx.lineWidth = 4;
const color = new cc.Color();
cc.Color.fromHEX(color, highlightColor);
ctx.fillColor = color;
// 设置位置 大小 基准坐标
const scale = rate / this.hotZoneBg.scaleY;
rectNode.width = data.rect.width * scale;
rectNode.height = data.rect.height * scale;
rectNode.x = -this.hotZoneBg.width / 2 + data.rect.x * scale;
rectNode.y = 0 - data.rect.height * scale - data.rect.y * scale;
rectNode.anchorX = rectNode.anchorY = 0;
ctx.rect(0, 0, rectNode.width, rectNode.height);
ctx.fill();
rectNode.addComponent(cc.Button);
return rectNode
}
// 同步方式显示选择模态框
asyncShowSelectModal(option) {
return new Promise((resovle, reject) => {
this.selectModal.emit("show", option);
this.onSelectedCallback = (target, e) => {
if(e == undefined) {
// 点击了取消
resovle(null)
} else {
resovle(e);
}
}
})
}
// 同步方式显示输入模态框
asyncShowKeyboardModal(defaultText) {
return new Promise((resovle, reject) => {
this.keyboard.emit("show", defaultText);
this.onKeyboardEnterCallback = (target, e) => {
resovle(e);
}
})
}
// update (dt) {},
}
......@@ -136,38 +136,171 @@
// }
export const defaultData = {
hotZoneConfigArr: [
{
linkHotZoneIndex: 0,
contentList: [{ index: 0, text: "item-1" }],
hotZoneType: "2",
audio_url:
"http://staging-teach.cdn.ireadabc.com/2bf96923b83ee0c5f20930386ce07384.mp3",
score: "1",
},
{
linkHotZoneIndex: 1,
contentList: [
{ index: 0, text: "1", isCorrect: true },
{ text: "2", image_url: "", hotZoneIndex: null, score: 0 },
{ text: "3", image_url: "", hotZoneIndex: null, score: 0 },
],
hotZoneType: "0",
score: "1",
},
{
linkHotZoneIndex: 2,
contentList: [
{ index: 0, text: "item-1", selectHotZoneIndex: 2, isCorrect: true },
{
text: "",
image_url: "",
hotZoneIndex: null,
score: 0,
selectHotZoneIndex: 3,
},
],
hotZoneType: "3",
score: "2",
},
{
linkHotZoneIndex: 4,
contentList: [{ index: 0, text: "item-1" }],
hotZoneType: "4",
inputText: "Hello World",
score: "1",
},
],
scoreConfigArr: [
{ linkHotZoneIndex: 7, linkHotZoneIndexArr: [1] },
{ linkHotZoneIndex: 8, linkHotZoneIndexArr: [2, 3] },
],
bgItem: {
url: "http://staging-teach.cdn.ireadabc.com/b6c249637c2892d75121dbb76717508e.png",
url: "http://staging-teach.cdn.ireadabc.com/5c84b987ea2291c8d6013fffd39dda32.png",
rect: {
x: 316.90215716486904,
x: 178.53182751540032,
y: 0,
width: 236.19568567026195,
height: 333,
width: 1182.9363449691994,
height: 1665,
},
},
hotZoneItemArr: [
{
index: 0,
itemType: "rect",
itemName: "1-音频",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 0.6796875,
fontScale: 1.203125,
imgScale: 1,
mapScale: 0.6796875,
rect: { x: 11.6, y: 234, width: 93, height: 93 },
mapScale: 1.203125,
rect: { x: 438.97, y: 216, width: 45, height: 45 },
},
{
index: 1,
itemType: "rect",
itemName: "1-1选项",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 1.203125,
imgScale: 1,
mapScale: 1.203125,
rect: { x: 226.47, y: 445.5, width: 40, height: 40 },
},
{
index: 2,
itemType: "rect",
itemName: "2-1Alex",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 1.203125,
imgScale: 1,
mapScale: 1.203125,
rect: { x: 164.47, y: 573, width: 62, height: 37 },
},
{
index: 3,
itemType: "rect",
itemName: "2-1Anna",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 1.203125,
imgScale: 1,
mapScale: 1.203125,
rect: { x: 234.47, y: 574, width: 78, height: 35 },
},
{
index: 4,
itemType: "rect",
itemName: "3-1输入文本",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 1.203125,
imgScale: 1,
mapScale: 1.203125,
rect: { x: 493.47, y: 1049, width: 200, height: 39 },
},
{
index: 5,
itemType: "rect",
itemName: "提交按钮",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 1.203125,
imgScale: 1,
mapScale: 1.203125,
rect: { x: 553.47, y: 1511, width: 150, height: 45 },
},
{
index: 6,
itemType: "rect",
itemName: "重做按钮",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 1.203125,
imgScale: 1,
mapScale: 1.203125,
rect: { x: 755.47, y: 1512, width: 132, height: 41 },
},
{
index: 7,
itemType: "rect",
itemName: "1得分",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 1.203125,
imgScale: 1,
mapScale: 1.203125,
rect: { x: 1040.47, y: 217, width: 74, height: 41 },
},
{
index: 8,
itemType: "rect",
itemName: "2得分",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 0.6796875,
fontScale: 1.203125,
imgScale: 1,
mapScale: 0.6796875,
rect: { x: 162.1, y: 26.5, width: 68, height: 68 },
mapScale: 1.203125,
rect: { x: 1040.47, y: 520, width: 76, height: 39 },
},
],
itemCombineGroup: [],
submitHotZoneIndex: 5,
replayHotZoneIndex: 6,
};
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