Commit 8fe25eee authored by limingzhe's avatar limingzhe

fix:滚动异常 添加数据上报

parent e74399ed
...@@ -31,7 +31,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,7 +31,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
{label: '电器', value: 'device'}, {label: '电器', value: 'device'},
{label: '方位', value: 'side'}, {label: '方位', value: 'side'},
{label: '工作', value: 'work'}, {label: '工作', value: 'work'},
{label: '', value: 'adj'}, {label: '形容', value: 'adj'},
{label: '单词', value: 'word'}, {label: '单词', value: 'word'},
], ],
label: '比对', label: '比对',
......
...@@ -92,6 +92,8 @@ export class MySprite extends Sprite { ...@@ -92,6 +92,8 @@ export class MySprite extends Sprite {
this.width = this.img.width; this.width = this.img.width;
this.height = this.img.height; this.height = this.img.height;
// this.img.setAttribute("crossOrigin",'Anonymous')
} }
this.anchorX = anchorX; this.anchorX = anchorX;
...@@ -2209,7 +2211,6 @@ export class ScrollView extends MySprite { ...@@ -2209,7 +2211,6 @@ export class ScrollView extends MySprite {
// console.log('children: ', children); // console.log('children: ', children);
let maxW = 0; let maxW = 0;
let maxH = 0; let maxH = 0;
for (let i=0; i<children.length; i++) { for (let i=0; i<children.length; i++) {
...@@ -2219,7 +2220,7 @@ export class ScrollView extends MySprite { ...@@ -2219,7 +2220,7 @@ export class ScrollView extends MySprite {
const box = children[i].getBoundingBox(); const box = children[i].getBoundingBox();
// console.log('box: ', box); // console.log('box: ', box);
const boxEdgeX = box.x + box.width; const boxEdgeX = box.x + box.width;
const boxEdgeY = this.y + box.y + box.height; const boxEdgeY = box.y + box.height;
// console.log('boxEdgeY: ', boxEdgeY); // console.log('boxEdgeY: ', boxEdgeY);
if (boxEdgeX > maxW) { if (boxEdgeX > maxW) {
...@@ -2231,10 +2232,14 @@ export class ScrollView extends MySprite { ...@@ -2231,10 +2232,14 @@ export class ScrollView extends MySprite {
} }
// console.log('maxW: ', maxW); // console.log('maxW: ', maxW);
// console.log('maxH: ', maxH); console.log('maxH: ', maxH);
// console.log('this.y: ', this.y);
// console.log(this.getBoundingBox().height);
this.content.width = maxW; this.content.width = maxW;
this.content.height = maxH ; this.content.height = maxH ;
this.refreshScrollBar(); this.refreshScrollBar();
} }
...@@ -2258,8 +2263,8 @@ export class ScrollView extends MySprite { ...@@ -2258,8 +2263,8 @@ export class ScrollView extends MySprite {
const rect1 = this.getBoundingBox(); const rect1 = this.getBoundingBox();
const rect2 = this.content.getBoundingBox(); const rect2 = this.content.getBoundingBox();
let rate = rect1.height / rect2.height; // let rate = rect1.height / rect2.height;
// let rate = this.height / this.content.height; let rate = this.height / this.content.height;
// let rate = this.height * this.scaleY / this.content.height / this.content.scaleY; // let rate = this.height * this.scaleY / this.content.height / this.content.scaleY;
if (rate >= 1) { if (rate >= 1) {
this._scrollBar.visible = false; this._scrollBar.visible = false;
...@@ -2275,7 +2280,12 @@ export class ScrollView extends MySprite { ...@@ -2275,7 +2280,12 @@ export class ScrollView extends MySprite {
} }
refreshScrollBarPos() { refreshScrollBarPos() {
this._scrollBar.y = -this.content.y * ( this.height / this.content.height ); const rect1 = this.getBoundingBox();
const rect2 = this.content.getBoundingBox();
let rate = rect1.height / rect2.height;
this._scrollBar.y = -rect2.y * (rate );
} }
...@@ -2305,9 +2315,12 @@ export class ScrollView extends MySprite { ...@@ -2305,9 +2315,12 @@ export class ScrollView extends MySprite {
} }
onTouchMove(x, y) { onTouchMove(x, y) {
if (!this.touchStartPos) { if (!this.touchStartPos) {
return; return;
} }
if (!this.touchStartContentPos) { if (!this.touchStartContentPos) {
return; return;
} }
...@@ -2315,10 +2328,12 @@ export class ScrollView extends MySprite { ...@@ -2315,10 +2328,12 @@ export class ScrollView extends MySprite {
const offsetX = x - this.touchStartPos.x; const offsetX = x - this.touchStartPos.x;
const offsetY = y - this.touchStartPos.y; const offsetY = y - this.touchStartPos.y;
const rect = this.getBoundingBox();
if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) { if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) {
this.content.y = between(this.touchStartContentPos.y + offsetY, 0, this.getBoundingBox().height - this.content.height); this.content.y = between(this.touchStartContentPos.y + offsetY, 0, -rect.y + rect.height - this.content.height);
} else { } else {
this.content.x = between(this.touchStartContentPos.x + offsetX, 0, this.getBoundingBox().width - this.content.width); this.content.x = between(this.touchStartContentPos.x + offsetX, 0, -rect.x + rect.width - this.content.width);
} }
this.refreshScrollBarPos(); this.refreshScrollBarPos();
} }
...@@ -2332,10 +2347,12 @@ export class ScrollView extends MySprite { ...@@ -2332,10 +2347,12 @@ export class ScrollView extends MySprite {
if (!this._scrollBar.visible) { if (!this._scrollBar.visible) {
return; return;
} }
const rect = this.getBoundingBox();
if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) { if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) {
this.content.y = between(this.content.y + 40, 0, this.getBoundingBox().height - this.content.height); this.content.y = between(this.content.y + 40, 0, -rect.y + rect.height - this.content.height);
} else { } else {
this.content.x = between(this.content.x + 40, 0, this.getBoundingBox().width - this.content.width); this.content.x = between(this.content.x + 40, 0, -rect.x + rect.width - this.content.width);
} }
this.refreshScrollBarPos(); this.refreshScrollBarPos();
...@@ -2345,10 +2362,13 @@ export class ScrollView extends MySprite { ...@@ -2345,10 +2362,13 @@ export class ScrollView extends MySprite {
if (!this._scrollBar.visible) { if (!this._scrollBar.visible) {
return; return;
} }
const rect = this.getBoundingBox();
if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) { if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) {
this.content.y = between(this.content.y - 40, 0, this.getBoundingBox().height - this.content.height); this.content.y = between(this.content.y - 40, 0, -rect.y + rect.height - this.content.height);
} else { } else {
this.content.x = between(this.content.x - 40, 0, this.getBoundingBox().width - this.content.width); this.content.x = between(this.content.x - 40, 0, -rect.x + rect.width - this.content.width);
} }
this.refreshScrollBarPos(); this.refreshScrollBarPos();
...@@ -2409,5 +2429,6 @@ export function between(a, b, c) { ...@@ -2409,5 +2429,6 @@ export function between(a, b, c) {
// --------------- custom class -------------------- // --------------- custom class --------------------
...@@ -21,6 +21,7 @@ import { loadFonts } from './Util' ...@@ -21,6 +21,7 @@ import { loadFonts } from './Util'
import { faTshirt } from '@fortawesome/free-solid-svg-icons'; import { faTshirt } from '@fortawesome/free-solid-svg-icons';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { checkAnswer } from './checker'; import { checkAnswer } from './checker';
import { HttpClient } from '@angular/common/http';
...@@ -133,7 +134,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -133,7 +134,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
constructor(private sanitizer: DomSanitizer, private appRef: ApplicationRef) { constructor(private http: HttpClient, private sanitizer: DomSanitizer, private appRef: ApplicationRef) {
} }
...@@ -295,6 +296,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -295,6 +296,9 @@ export class PlayComponent implements OnInit, OnDestroy {
scrollView; scrollView;
resultSv; resultSv;
userResultPic;
userResultData;
uploadUrl;
initData() { initData() {
...@@ -319,10 +323,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -319,10 +323,13 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.mapScale = this.canvasHeight / this.canvasBaseH; // this.mapScale = this.canvasHeight / this.canvasBaseH;
this.renderArr = []; this.renderArr = [];
this.topArr = []; this.topArr = [];
this.userResultPic = null;
this.userResultData = null;
console.log(' in initData', this.data); console.log(' in initData', this.data);
this.uploadUrl = (<any> window).courseware.uploadUrl();
...@@ -649,7 +656,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -649,7 +656,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initMaskPic(); this.initMaskPic();
this.relink(); this.relink();
// this.gameStart();
this.gameStart();
// this.initBtn(); // this.initBtn();
...@@ -823,7 +831,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -823,7 +831,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.setRectRight(data); this.setRectRight(data);
} else { } else {
const resultData = this.getResultData(); const resultData = this.getResultData();
this.sendResult(resultData); this.userResultData = resultData;
this.sendResult();
this.setStoreData('resultData', resultData); this.setStoreData('resultData', resultData);
} }
...@@ -932,6 +941,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -932,6 +941,7 @@ export class PlayComponent implements OnInit, OnDestroy {
resultSv.y = -this.resultPanel.height / 2 + 120; resultSv.y = -this.resultPanel.height / 2 + 120;
resultSv.setScrollBarSize(20 * this.mapScale, 5); resultSv.setScrollBarSize(20 * this.mapScale, 5);
// resultSv.setContentScale(this.mapScale); // resultSv.setContentScale(this.mapScale);
this.resultPanel.addChild(resultSv); this.resultPanel.addChild(resultSv);
this.resultSv = resultSv; this.resultSv = resultSv;
...@@ -1046,6 +1056,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1046,6 +1056,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
...@@ -1226,21 +1237,21 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1226,21 +1237,21 @@ export class PlayComponent implements OnInit, OnDestroy {
const subH = row * this.btnDisH ; const subH = row * this.btnDisH ;
const sv = new ScrollView(); const sv = new ScrollView();
sv.setShowSize(this.panel.width, 900 - subH); // sv.setShowSize(this.panel.width, 900 - subH);
sv.x = -this.panel.width / 2; // sv.x = -this.panel.width / 2;
sv.y = -395 + subH; // sv.y = -395 + subH;
sv.setBgColor('#faf7ee') // sv.setBgColor('#faf7ee')
// sv.setMapScale(this.mapScale); // // sv.setMapScale(this.mapScale);
// sv.content.setScaleXY(1/this.mapScale); // // sv.content.setScaleXY(1/this.mapScale);
sv.setScrollBarSize(20 * this.mapScale, 5) // sv.setScrollBarSize(20 * this.mapScale, 5)
// this.renderArr.push(sv); // // this.renderArr.push(sv);
// sv.setScaleXY(this.mapScale); // // sv.setScaleXY(this.mapScale);
// sv.x = 0; // // sv.x = 0;
// sv.y = 200; // // sv.y = 200;
sv.setContentScale(this.mapScale); // sv.setContentScale(this.mapScale);
this.panel.addChild(sv); // this.panel.addChild(sv);
this.scrollView = sv; // this.scrollView = sv;
...@@ -1527,6 +1538,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1527,6 +1538,7 @@ export class PlayComponent implements OnInit, OnDestroy {
sv.setBgColor('#ffffff') sv.setBgColor('#ffffff')
sv.setScrollBarSize(20 * this.mapScale, 5) sv.setScrollBarSize(20 * this.mapScale, 5)
// sv.refreshContentSize();
// sv.setContentScale(this.mapScale); // sv.setContentScale(this.mapScale);
this.renderArr.push(sv); this.renderArr.push(sv);
...@@ -1578,6 +1590,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1578,6 +1590,8 @@ export class PlayComponent implements OnInit, OnDestroy {
okBtnClick() { okBtnClick() {
this.convertCanvasToImage();
this.checkPanel.visible = false; this.checkPanel.visible = false;
this.initResultView(); this.initResultView();
} }
...@@ -1668,8 +1682,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1668,8 +1682,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
console.log('aaaa 6')
...@@ -1997,6 +2009,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1997,6 +2009,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.submitCount ++; // this.submitCount ++;
const btnBaseY = this.submitBtn.y; const btnBaseY = this.submitBtn.y;
const btnTargetY = btnBaseY + 5 * this.mapScale; const btnTargetY = btnBaseY + 5 * this.mapScale;
...@@ -2072,13 +2085,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2072,13 +2085,17 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
sendResult(data) { sendResult() {
if (this.userResultPic && this.userResultData) {
const sendResult = (<any>window).courseware.sendResult;
if (sendResult) {
sendResult({resultData: this.userResultData, resultPic: this.userResultPic});
}
}
// const sendResult = (<any>window).courseware.sendResult;
// sendResult(data);
} }
...@@ -3067,6 +3084,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -3067,6 +3084,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const p = this.preload(value) const p = this.preload(value)
.then(img => { .then(img => {
img['setAttribute']("crossOrigin",'Anonymous')
this.images.set(key, img); this.images.set(key, img);
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
...@@ -3220,4 +3239,72 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -3220,4 +3239,72 @@ export class PlayComponent implements OnInit, OnDestroy {
return len; return len;
} }
b64ToUint8Array(b64Image) {
var img = atob(b64Image.split(',')[1]);
var img_buffer = [];
var i = 0;
while (i < img.length) {
img_buffer.push(img.charCodeAt(i));
i++;
}
return new Uint8Array(img_buffer);
}
convertCanvasToImage() {
console.log('1');
console.log('2 uploadUrl: ', this.uploadUrl.toString());
const src = this.canvas.nativeElement.toDataURL("image/png");
const arr = src.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while ( n -- ) {
u8arr[n] = bstr.charCodeAt(n);
}
const obj = new Blob([u8arr], {type: mime});
const fd = new FormData();
fd.append("file", obj, "cw_cover.png");
// 上传截图
this.http.post(this.uploadUrl, fd).subscribe((res) => {
// 存储服务器的截图url
if (res['url']) {
console.log('res url: ', res['url']);
this.userResultPic = res['url'];
this.sendResult();
}
});
}
httpServer(type, url, options, cb) {
this.http[type](url, options)
.subscribe( val => {
console.log("Post call successful value returned in body", val);
cb(val);
}, error => {
console.log("Post call in error", error);
cb(error);
}, () => {
console.log("The Post observable is now completed.");
cb(null);
}
);
}
} }
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