Commit fe52a851 authored by 李维's avatar 李维

修复背景图过长导致的黑屏

添加背景图切片功能
parent 576030aa
......@@ -108,6 +108,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.initHeaderAndFooter(); // 顶部和底部图片
this.initVideoPlayerLayer(); // 视频播放层
await this.initHotZoneBg(); // 初始化背景
this.initSlicedHotZoneBg(); // 切片背景图 - 修复某些设备上背景图过长导致的黑屏
this.initHotZoneItem(); // 初始化热区数据
this.initScorePanel();
this.initActionButton();
......@@ -556,6 +557,34 @@ export default class SceneComponent extends MyCocosSceneComponent {
});
}
initSlicedHotZoneBg() {
if(!this.data.hotZoneBgSliceList || this.data.hotZoneBgSliceList.length == 0 ) {
return
}
const svContentSlicedBg = cc.find("Canvas/MainContent/ScorllView/view/content/slicedBg");
const pAll = [];
this.data.hotZoneBgSliceList.forEach((imgObj, index) => {
pAll.push(new Promise((resovle, reject) =>{
cc.assetManager.loadRemote(imgObj.image_url, (err, img) => {
resovle(img);
});
}))
});
Promise.all(pAll).then(res=>{
res.forEach((img, index)=>{
// 创建节点 挂载背景图
const sprNode = new cc.Node();
sprNode.name = "sliced_" + index;
var sf = new cc.SpriteFrame(img);
const spr = sprNode.addComponent(cc.Sprite);
spr.spriteFrame = sf;
svContentSlicedBg.addChild(sprNode)
})
})
}
picNodeArr = [];
scoreValidater = [];
// 根据配置的内容类型 生成对应的题型
......@@ -3080,6 +3109,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.disableScroll(); // 禁用页面滚动
await this.initHotZoneBg();
this.initSlicedHotZoneBg(); // 切片背景图 - 修复某些设备上背景图过长导致的黑屏
this.initHotZoneItem();
this.initScorePanel();
this.enableScroll(); // 启用页面滚动
......
export const defaultData = {"header_image_url":"http://teach.cdn.ireadabc.com/083720132dfa2d2da2b7c3d9bb572224.jpg","footer_image_url":"http://teach.cdn.ireadabc.com/665e4c3e6a80563b4c33dd7bbcd18014.jpg","bgItem":{"url":"http://teach.cdn.ireadabc.com/c84ddb8e290c7cd82d82db0c2efe2b53.jpg","rect":{"x":0,"y":1711.0425,"width":1351,"height":1573.915}},"hotZoneItemArr":[{"index":0,"itemType":"rect","itemName":"1-2-tree","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":450.73,"y":258.11,"width":35.36,"height":35.36}},{"index":1,"itemType":"rect","itemName":"1-2-正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":311.32,"y":81.32,"width":35.36,"height":35.36}},{"index":2,"itemType":"rect","itemName":"1-3-frisbee","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":709.34,"y":258.11,"width":35.36,"height":35.36}},{"index":3,"itemType":"rect","itemName":"1-3-正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":536.6,"y":81.32,"width":35.36,"height":35.36}},{"index":4,"itemType":"rect","itemName":"1-4-jungle","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":973.01,"y":255.08,"width":35.36,"height":35.36}},{"index":5,"itemType":"rect","itemName":"1-4-正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":764.9,"y":81.32,"width":35.36,"height":35.36}},{"index":6,"itemType":"rect","itemName":"1-5-ice","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":1210.41,"y":256.09,"width":35.36,"height":35.36}},{"index":7,"itemType":"rect","itemName":"1-5-正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":1016.45,"y":81.32,"width":35.36,"height":35.36}},{"index":8,"itemType":"rect","itemName":"2-2-slide","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":356.27,"y":572.79,"width":141.43,"height":30.31}},{"index":9,"itemType":"rect","itemName":"2-3-pool ","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":579.53,"y":573.8,"width":121.23,"height":30.31}},{"index":10,"itemType":"rect","itemName":"2-4-goal ","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":798.75,"y":573.8,"width":141.43,"height":30.31}},{"index":11,"itemType":"rect","itemName":"2-5-armbands","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":1018.97,"y":573.8,"width":262.66,"height":30.31}},{"index":12,"itemType":"rect","itemName":"3-2-on","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":1068.47,"y":740.49,"width":131.33,"height":30.31}},{"index":13,"itemType":"rect","itemName":"3-3-in","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":1099.79,"y":856.66,"width":131.33,"height":30.31}},{"index":14,"itemType":"rect","itemName":"3-4on","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":991.7,"y":972.84,"width":131.33,"height":30.31}},{"index":15,"itemType":"rect","itemName":"3-5-under","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":990.69,"y":1089.01,"width":131.33,"height":30.31}},{"index":16,"itemType":"rect","itemName":"4-2-1","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":170.39,"y":1360.76,"width":161.63,"height":30.31}},{"index":17,"itemType":"rect","itemName":"4-2-2","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":614.89,"y":1360.76,"width":101.02,"height":30.31}},{"index":18,"itemType":"rect","itemName":"4-3-1","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":170.39,"y":1419.35,"width":161.63,"height":30.31}},{"index":19,"itemType":"rect","itemName":"4-3-2","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":614.89,"y":1419.35,"width":101.02,"height":30.31}},{"index":20,"itemType":"rect","itemName":"4-4-1","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":170.39,"y":1477.94,"width":161.63,"height":30.31}},{"index":21,"itemType":"rect","itemName":"4-4-2","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.05546875,"imgScale":1,"mapScale":1.05546875,"rect":{"x":614.89,"y":1477.94,"width":101.02,"height":30.31}}],"hotZoneConfigArr":[{"hotZoneType":"8","linkHotZoneIndex":-1,"audio_url":"","score":"0","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"f0ee58ba-a330-40c7-b190-69998eed3e39","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":true,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":0}],"linkResultShowHotZoneIndex":1},{"hotZoneType":"8","linkHotZoneIndex":-1,"audio_url":"","score":"0","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"6b5d0317-1991-42ab-a01e-4be739822285","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":true,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":2}],"linkResultShowHotZoneIndex":3},{"hotZoneType":"8","linkHotZoneIndex":-1,"audio_url":"","score":"0","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"15519f25-46aa-4b01-a993-5756ae8b62f9","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":4}],"linkResultShowHotZoneIndex":5},{"hotZoneType":"8","linkHotZoneIndex":-1,"audio_url":"","score":"0","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"92967003-f3e3-459b-adce-15a01e79792a","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":true,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":6}],"linkResultShowHotZoneIndex":7},{"hotZoneType":"5","linkHotZoneIndex":8,"audio_url":"","score":"1","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"slide","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":9,"audio_url":"","score":"1","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"pool","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":10,"audio_url":"","score":"1","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"goal","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":11,"audio_url":"","score":"1","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"armbands","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":16,"audio_url":"","score":"0.5","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"Where's","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":17,"audio_url":"","score":"0.5","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"It's","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":18,"audio_url":"","score":"0.5","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"Where's","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":19,"audio_url":"","score":"0.5","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"It's","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":20,"audio_url":"","score":"0.5","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"Where's","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":21,"audio_url":"","score":"0.5","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"It's","contentList":[]},{"hotZoneType":"0","linkHotZoneIndex":-1,"audio_url":"","score":"0","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","useSelectOptionList":true,"selectOptionList":[{"text":"in","optionShowText":""},{"text":"on","optionShowText":""},{"text":"under","optionShowText":""}],"contentList":[{"uuid":"3007f123-7e3a-488b-b98a-fb2bf045874d","text":"on","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":12,"selectOptionListIndex":1},{"uuid":"1075b9a2-5988-4798-b0ce-5f20a6405b9c","text":"in","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":13,"selectOptionListIndex":0},{"uuid":"739dfaee-3e57-46f1-b9c0-e15c5f2c091e","text":"on","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":14,"selectOptionListIndex":1},{"uuid":"32a39a7d-4568-4462-8d5d-b59cc67f2e5b","text":"under","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"1","isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":15,"selectOptionListIndex":2}]}],"scoreConfigArr":[{"linkHotZoneIndex":-1,"linkHotZoneIndexArr":[0,1,2,3,4,5,6,7]},{"linkHotZoneIndex":-1,"linkHotZoneIndexArr":[8,9,10,11,12,13,14]}],"alignMode":"left","ratingSystem":"0"}
\ No newline at end of file
export const defaultData = {"hotZoneConfigArr":[{"hotZoneType":"16","linkHotZoneIndex":-1,"audio_url":"","video_url":"","score":"0","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","keyWordMatch":false,"isCaseInsensitive":false,"openAnswer":false,"useSelectOptionList":false,"keyWordMatchInOrder":false,"capitalizedFirstLetter":false,"notAdaptContraction":false,"textAlignLeft":false,"selectOptionList":[],"contentList":[{"uuid":"b6cd8072-9f74-40d0-9f89-bd67b52060f7","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":"6","isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectStartHotZoneIndex_1":0,"selectEndHotZoneIndex_1":1,"selectStartHotZoneIndex_2":2,"selectEndHotZoneIndex_2":3,"inputText":"","keyWordMatch":false,"keyWordMatchInOrder":false,"isCaseInsensitive":false,"openAnswer":false,"capitalizedFirstLetter":false,"notAdaptContraction":false,"textAlignLeft":false}],"linkResultShowHotZoneIndex":4},{"hotZoneType":"15","linkHotZoneIndex":6,"audio_url":"","video_url":"","score":"66","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","keyWordMatch":false,"isCaseInsensitive":false,"openAnswer":false,"useSelectOptionList":false,"keyWordMatchInOrder":false,"capitalizedFirstLetter":false,"notAdaptContraction":false,"textAlignLeft":false,"selectOptionList":[],"contentList":[],"drawingCheckCorrectColors":["color_red","color_orange","color_yellow","color_green","color_blue","color_purple","color_pink"],"drawingCheckStrictEqual":true}],"bgItem":{"rect":{"x":124.37271750805587,"y":0,"width":1073.2545649838883,"height":4996},"url":"http://staging-teach.cdn.ireadabc.com/d82192902671c1567c237f8b8b6c17b0.jpg"},"hotZoneItemArr":[],"hotZoneBgSliceList":[{"image_url":"http://staging-teach.cdn.ireadabc.com/0e8c2d62dd2c2ce008a931ec24d87db9.png"},{"image_url":"http://staging-teach.cdn.ireadabc.com/6c9238d99ab6613e74e76cf817baae45.png"},{"image_url":"http://staging-teach.cdn.ireadabc.com/3a159494342e25e0f4513108b065c22d.png"},{"image_url":"http://staging-teach.cdn.ireadabc.com/2f9451ae09101f0d0f30568814a30a53.png"},{"image_url":"http://staging-teach.cdn.ireadabc.com/5594532559d5cd73f2c08b8badbb25d9.png"}],"scoreConfigArr":[{"linkHotZoneIndex":-1,"linkHotZoneIndexArr":[0,1]}]}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -39,6 +39,19 @@
>
</app-custom-hot-zone>
<h2 style="margin-top: 10px;">热区背景图切片:</h2>
<div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px 150px 10px 10px;">
<div style="display: flex;">
<div *ngFor="let it of item.hotZoneBgSliceList; let i = index" style="width: 200px;">
<app-upload-image-with-preview
[picUrl]="it.image_url"
(imageUploaded)="onImageUploadSuccess($event, 'image_url', it)">
</app-upload-image-with-preview>
</div>
</div>
<button nz-button (click)="addBgImageSlice();"><i nz-icon nzType="plus-circle"></i>创建</button>
</div>
<h2 style="margin-top: 10px;">快速创建热区:</h2>
<div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px 150px 10px 10px;">
<input type="text" nz-input [(ngModel)]="fastHotZoneStr"/>
......
......@@ -121,6 +121,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
this.nzMessageService.success('创建成功,需要保存热区');
}
// 添加背景图切片
addBgImageSlice() {
if(!this.item.hotZoneBgSliceList) {
this.item.hotZoneBgSliceList = [];
}
this.item.hotZoneBgSliceList.push({
image_url: ""
})
this.save()
}
// 添加热区配置
addHotZoneConfig() {
if(!this.item.hotZoneConfigArr) {
......
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