Commit 4f2879db authored by limingzhe's avatar limingzhe

fix: 滚动条异常

parent 9796ee64
...@@ -2061,6 +2061,7 @@ export class ScrollView extends MySprite { ...@@ -2061,6 +2061,7 @@ export class ScrollView extends MySprite {
scorllBarWidth; scorllBarWidth;
scrollBarHeight; scrollBarHeight;
itemArr = [];
constructor(ctx = null) { constructor(ctx = null) {
super(ctx); super(ctx);
...@@ -2118,26 +2119,39 @@ export class ScrollView extends MySprite { ...@@ -2118,26 +2119,39 @@ export class ScrollView extends MySprite {
} }
addItem(sprite) { addItem(sprite) {
this.itemArr.push(sprite);
this.content.addChild(sprite); this.content.addChild(sprite);
sprite.ctx = this._offCtx; sprite.ctx = this._offCtx;
this.refreshContentSize(); this.refreshContentSize();
} }
refreshContentSize() { refreshContentSize() {
const children = this.content.children; const children = this.itemArr;
// 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++) {
if (children[i] == this.content) {
continue;
}
const box = children[i].getBoundingBox(); const box = children[i].getBoundingBox();
const curChild = children[i];
// console.log('box: ', box); // console.log('box: ', box);
const boxEdgeX = box.x + box.width; const boxEdgeX = curChild.x + (1 - curChild.anchorX) * curChild.width * curChild.scaleX;
const boxEdgeY = box.y + box.height; const boxEdgeY = curChild.y + (1 - curChild.anchorY) * curChild.height * curChild.scaleY;
if (!children[i].colorRect) {
//测试
// const rect = new ShapeRectNew();
// rect.fillColor = '#ff0000';
// rect.setSize(curChild.width * curChild.scaleX, curChild.height * curChild.scaleY, 0);
// rect.alpha = 0.3;
// rect.x = boxEdgeX - curChild.width * curChild.scaleX;
// rect.y = boxEdgeY - curChild.height * curChild.scaleY;
// this.content.addChild(rect);
// children[i].colorRect = rect;
}
// console.log('boxEdgeY: ', boxEdgeY); // console.log('boxEdgeY: ', boxEdgeY);
if (boxEdgeX > maxW) { if (boxEdgeX > maxW) {
...@@ -2148,13 +2162,14 @@ export class ScrollView extends MySprite { ...@@ -2148,13 +2162,14 @@ export class ScrollView extends MySprite {
} }
} }
// console.log('maxW: ', maxW); // console.log('maxW: ', maxW);s
// console.log('maxH: ', maxH); // console.log('maxH: ', maxH);
// console.log('this.y: ', this.y); // console.log('this.y: ', this.y);
// console.log(this.getBoundingBox().height); // console.log(this.getBoundingBox().height);
this.content.width = maxW;
this.content.height = maxH ;
// const box = this.getBoundingBox();
this.content.width = maxW;
this.content.height = maxH + 10 //+ 500;
this.refreshScrollBar(); this.refreshScrollBar();
...@@ -2165,10 +2180,7 @@ export class ScrollView extends MySprite { ...@@ -2165,10 +2180,7 @@ export class ScrollView extends MySprite {
this.scrollBarHeight = h; this.scrollBarHeight = h;
} }
setContentScale(s) {
this.content.setScaleXY( 1 / s);
this.refreshScrollBar();
}
refreshScrollBar() { refreshScrollBar() {
let w = this.scorllBarWidth; let w = this.scorllBarWidth;
...@@ -2179,9 +2191,10 @@ export class ScrollView extends MySprite { ...@@ -2179,9 +2191,10 @@ export class ScrollView extends MySprite {
const rect1 = this.getBoundingBox(); const rect1 = this.getBoundingBox();
const rect2 = this.content.getBoundingBox(); const rect2 = this.content.getBoundingBox();
const sRate = rect1.height / this.height;
// let rate = rect1.height / rect2.height;
let rate = this.height / this.content.height; let rate = rect1.height / rect2.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;
...@@ -2189,7 +2202,7 @@ export class ScrollView extends MySprite { ...@@ -2189,7 +2202,7 @@ export class ScrollView extends MySprite {
} else { } else {
this._scrollBar.visible = true; this._scrollBar.visible = true;
} }
const h = rate * (this.height) const h = rate * this.height / sRate;
const r = w / 2; const r = w / 2;
this._scrollBar.setSize(w, h, r); this._scrollBar.setSize(w, h, r);
...@@ -2199,10 +2212,10 @@ export class ScrollView extends MySprite { ...@@ -2199,10 +2212,10 @@ export class ScrollView extends MySprite {
refreshScrollBarPos() { refreshScrollBarPos() {
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 = this.height / this.content.height;
this._scrollBar.y = -rect2.y * (rate ); this._scrollBar.y = -this.content.y * (rate );
} }
...@@ -2223,34 +2236,40 @@ export class ScrollView extends MySprite { ...@@ -2223,34 +2236,40 @@ export class ScrollView extends MySprite {
touchStartContentPos; touchStartContentPos;
onTouchStart(x, y) { onTouchStart(x, y) {
if (!this._scrollBar.visible) { if (!this._scrollBar.visible) {
return; return;
} }
this.touchStartPos = { x, y }; this.touchStartPos = { x, y };
this.touchStartContentPos = { x: this.content.x, y: this.content.y }; this.touchStartContentPos = { x: this.content.x, y: this.content.y };
} }
onTouchMove(x, y) { onTouchMove(x, y) {
if (!this.touchStartPos) { if (!this.touchStartPos) {
return; return;
} }
if (!this.touchStartContentPos) { if (!this.touchStartContentPos) {
return; return;
} }
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(); const rect = this.getBoundingBox();
const rect2 = this.content.getBoundingBox();
if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) { if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) {
this.content.y = between(this.touchStartContentPos.y + offsetY, 0, -rect.y + rect.height - this.content.height); this.content.y = between(this.touchStartContentPos.y + offsetY, 0, this.height - this.content.height);
} else { } else {
this.content.x = between(this.touchStartContentPos.x + offsetX, 0, -rect.x + rect.width - this.content.width); this.content.x = between(this.touchStartContentPos.x + offsetX, 0, this.width - this.content.width);
} }
this.refreshScrollBarPos(); this.refreshScrollBarPos();
} }
...@@ -2267,9 +2286,9 @@ export class ScrollView extends MySprite { ...@@ -2267,9 +2286,9 @@ export class ScrollView extends MySprite {
const rect = this.getBoundingBox(); 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, -rect.y + rect.height - this.content.height); this.content.y = between(this.content.y + 40, 0, this.height - this.content.height);
} else { } else {
this.content.x = between(this.content.x + 40, 0, -rect.x + rect.width - this.content.width); this.content.x = between(this.content.x + 40, 0, this.width - this.content.width);
} }
this.refreshScrollBarPos(); this.refreshScrollBarPos();
...@@ -2283,9 +2302,9 @@ export class ScrollView extends MySprite { ...@@ -2283,9 +2302,9 @@ export class ScrollView extends MySprite {
const rect = this.getBoundingBox(); 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, -rect.y + rect.height - this.content.height); this.content.y = between(this.content.y - 40, 0, this.height - this.content.height);
} else { } else {
this.content.x = between(this.content.x - 40, 0, -rect.x + rect.width - this.content.width); this.content.x = between(this.content.x - 40, 0, this.width - this.content.width);
} }
this.refreshScrollBarPos(); this.refreshScrollBarPos();
...@@ -2340,6 +2359,8 @@ export class ScrollView extends MySprite { ...@@ -2340,6 +2359,8 @@ export class ScrollView extends MySprite {
} }
export function between(a, b, c) { export function between(a, b, c) {
return [a, b, c].sort((x, y) => x - y)[1]; return [a, b, c].sort((x, y) => x - y)[1];
} }
......
...@@ -605,7 +605,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -605,7 +605,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.relink(); this.relink();
// this.gameStart(); this.gameStart();
// this.initResultView(); // this.initResultView();
} }
...@@ -1085,7 +1085,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1085,7 +1085,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 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;
...@@ -1107,6 +1107,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1107,6 +1107,8 @@ export class PlayComponent implements OnInit, OnDestroy {
richText.x = baseX; richText.x = baseX;
richText.y = curY; richText.y = curY;
richText.text = arr[i].text; richText.text = arr[i].text;
richText.setScaleXY(1);
richText.width = sv.width;
richText.isShowWordBg = true; richText.isShowWordBg = true;
richText.update(); richText.update();
...@@ -1146,11 +1148,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1146,11 +1148,11 @@ export class PlayComponent implements OnInit, OnDestroy {
// richText.addChild(colorRect); // richText.addChild(colorRect);
// this.sentenceEmptyArr.push(colorRect); // this.sentenceEmptyArr.push(colorRect);
curY += richText.getAreaHeight() * this.mapScale + disH; curY += richText.getAreaHeight() + disH;
richText['data'] = arr[i]; richText['data'] = arr[i];
richText.height = richText.getAreaHeight();
sv.addItem(richText); sv.addItem(richText);
// this.renderArr.push(richText); // this.renderArr.push(richText);
...@@ -1432,9 +1434,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1432,9 +1434,6 @@ export class PlayComponent implements OnInit, OnDestroy {
mapDown(event) { mapDown(event) {
console.log('aaaa 1')
if (!this.canTouch) { if (!this.canTouch) {
return; return;
} }
...@@ -1444,8 +1443,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1444,8 +1443,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
this.downFlag = true; this.downFlag = true;
console.log('aaaa 2')
if (this.isTeacher) { if (this.isTeacher) {
...@@ -1460,7 +1457,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1460,7 +1457,6 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
console.log('aaaa 3')
if (this.moreBtn) { if (this.moreBtn) {
if (this.checkClickTarget(this.moreBtn)) { if (this.checkClickTarget(this.moreBtn)) {
...@@ -1471,8 +1467,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1471,8 +1467,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
console.log('aaaa 4')
for (let i = 0; i < this.btnArr.length; i++) { for (let i = 0; i < this.btnArr.length; i++) {
if (this.btnArr[i].visible && this.checkClickTarget(this.btnArr[i])) { if (this.btnArr[i].visible && this.checkClickTarget(this.btnArr[i])) {
...@@ -1483,7 +1477,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1483,7 +1477,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
} }
console.log('aaaa 5')
for (let i = 0; i < this.sentenceEmptyArr.length; i++) { for (let i = 0; i < this.sentenceEmptyArr.length; i++) {
...@@ -1497,7 +1491,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1497,7 +1491,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
console.log('aaaa 6')
if (this.checkClickTarget(this.submitBtn)) { if (this.checkClickTarget(this.submitBtn)) {
...@@ -1509,6 +1502,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1509,6 +1502,8 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
if (this.resultSv && this.checkClickTarget(this.resultSv)) { if (this.resultSv && this.checkClickTarget(this.resultSv)) {
this.resultSv.onTouchStart(this.mx, this.my); this.resultSv.onTouchStart(this.mx, this.my);
return; return;
...@@ -1533,23 +1528,25 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1533,23 +1528,25 @@ export class PlayComponent implements OnInit, OnDestroy {
event.preventDefault() event.preventDefault()
} }
if (!this.curMoveItem) {
return;
}
if (!this.downFlag) { if (!this.downFlag) {
return; return;
} }
if (this.resultSv) { if (this.resultSv) {
this.resultSv.onTouchMove(this.mx, this.my); this.resultSv.onTouchMove(this.mx, this.my);
} else { } else {
this.scrollView.onTouchMove(this.mx, this.my); this.scrollView.onTouchMove(this.mx, this.my);
} }
if (!this.curMoveItem) {
return;
}
this.curMoveItem.x = this.mx; this.curMoveItem.x = this.mx;
this.curMoveItem.y = this.my; this.curMoveItem.y = this.my;
......
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