Commit ca9d44f4 authored by limingzhe's avatar limingzhe

feat: 滚动条

parent def3657a
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
<div *ngIf="item.sentenceArr && item.sentenceArr.length < 4"> <div>
<button nz-button nzType="dashed" (click)="addBtnClick()" style="width: 200px; height: 50px;"> <button nz-button nzType="dashed" (click)="addBtnClick()" style="width: 200px; height: 50px;">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
......
...@@ -310,6 +310,8 @@ export class MySprite extends Sprite { ...@@ -310,6 +310,8 @@ export class MySprite extends Sprite {
child.alpha = this.alpha; child.alpha = this.alpha;
} }
child.ctx = this.ctx;
} }
removeChild(child) { removeChild(child) {
const index = this.children.indexOf(child); const index = this.children.indexOf(child);
...@@ -2002,6 +2004,281 @@ export class MyVideo extends MySprite { ...@@ -2002,6 +2004,281 @@ export class MyVideo extends MySprite {
export class ScrollView extends MySprite {
static ScrollSideType = {
VERTICAL : 'VERTICAL',
HORIZONTAL : 'HORIZONTAL',
}
_offCtx;
_offCanvas;
_scrollBar;
content;
bgColor;
barColor = '#fbe9b7'
scrollSide = ScrollView.ScrollSideType.VERTICAL;
scorllBarWidth;
scrollBarHeight;
constructor(ctx = null) {
super(ctx);
this._createOffCtx();
this._createScrollBar();
}
_createOffCtx() {
if (!this._offCtx) {
this._offCanvas = document.createElement('canvas'); // 创建一个新的canvas
this._offCanvas.width = this.width; // 创建一个正好包裹住一个粒子canvas
this._offCanvas.height = this.height;
this._offCtx = this._offCanvas.getContext('2d');
this.content = new MySprite(this._offCtx);
}
}
_createScrollBar() {
this._scrollBar = new ShapeRectNew();
this._scrollBar.anchorY = 0;
this._scrollBar.anchorX = 1;
this._scrollBar.setSize(10, 100, 5);
this._scrollBar.fillColor = this.barColor;
this.addChild(this._scrollBar);
}
setBgColor(color) {
this.bgColor = color;
}
setShowSize(w, h) {
this.width = w;
this.height = h;
if (this.content.width < this.width) {
this.content.width = this._offCanvas.width = this.width;
}
if (this.content.height < this.height) {
this.content.height = this._offCanvas.height = this.height;
}
this.refreshScrollBar();
}
setContentSize(w, h) {
this.content.width = w;
this.content.height = h;
this._offCanvas.width = w;
this._offCanvas.height = h;
}
addItem(sprite) {
this.content.addChild(sprite);
sprite.ctx = this._offCtx;
this.refreshContentSize();
}
refreshContentSize() {
const children = this.content.children;
console.log('children: ', children);
let maxW = 0;
let maxH = 0;
for (let i=0; i<children.length; i++) {
if (children[i] == this.content) {
continue;
}
const box = children[i].getBoundingBox();
console.log('box: ', box);
const boxEdgeX = box.x + box.width;
const boxEdgeY = box.y + box.height;
console.log('boxEdgeY: ', boxEdgeY);
if (boxEdgeX > maxW) {
maxW = boxEdgeX;
}
if (boxEdgeY > maxH) {
maxH = boxEdgeY;
}
}
console.log('maxW: ', maxW);
console.log('maxH: ', maxH);
this.content.width = maxW;
this.content.height = maxH ;
this.refreshScrollBar();
}
setScrollBarSize(w, h) {
this.scorllBarWidth = w;
this.scrollBarHeight = h;
}
setContentScale(s) {
this.content.setScaleXY( 1 / s);
}
refreshScrollBar() {
let w = this.scorllBarWidth;
if (!w) {
w = this.width / 50;
}
let rate = this.height * this.scaleY / this.content.height / this.content.scaleY;
if (rate >= 1) {
this._scrollBar.visible = false;
rate = 1;
} else {
this._scrollBar.visible = true;
}
const h = rate * this.height
const r = w / 2;
this._scrollBar.setSize(w, h, r);
this._scrollBar.x = this.width;
}
refreshScrollBarPos() {
this._scrollBar.y = -this.content.y * ( this.height / this.content.height );
}
drawSelf() {
super.drawSelf();
this._offScreenRender();
}
touchStartPos;
touchStartContentPos;
onTouchStart(x, y) {
if (!this._scrollBar.visible) {
return;
}
this.touchStartPos = { x, y };
this.touchStartContentPos = { x: this.content.x, y: this.content.y };
}
onTouchMove(x, y) {
if (!this.touchStartPos) {
return;
}
if (!this.touchStartContentPos) {
return;
}
const offsetX = x - this.touchStartPos.x;
const offsetY = y - this.touchStartPos.y;
if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) {
this.content.y = between(this.touchStartContentPos.y + offsetY, 0, this.getBoundingBox().height - this.content.height);
} else {
this.content.x = between(this.touchStartContentPos.x + offsetX, 0, this.getBoundingBox().width - this.content.width);
}
this.refreshScrollBarPos();
}
onTouchEnd(x, y) {
this.touchStartPos = null;
this.touchStartContentPos = null;
}
onWheelUp(offsetY) {
if (!this._scrollBar.visible) {
return;
}
if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) {
this.content.y = between(this.content.y + 40, 0, this.getBoundingBox().height - this.content.height);
} else {
this.content.x = between(this.content.x + 40, 0, this.getBoundingBox().width - this.content.width);
}
this.refreshScrollBarPos();
}
onWheelDown(offsetY) {
if (!this._scrollBar.visible) {
return;
}
if (this.scrollSide == ScrollView.ScrollSideType.VERTICAL) {
this.content.y = between(this.content.y - 40, 0, this.getBoundingBox().height - this.content.height);
} else {
this.content.x = between(this.content.x - 40, 0, this.getBoundingBox().width - this.content.width);
}
this.refreshScrollBarPos();
}
setContentSpr() {
}
_offScreenRender() {
this._offCtx.save();
this._offCtx.clearRect(0, 0, this._offCanvas.width, this._offCanvas.height);
if (this.bgColor) {
this._offCtx.fillStyle = this.bgColor;
this._offCtx.fillRect(this._offX, this._offY, this.width, this.height);
this._offCtx.globalCompositeOperation = "source-atop";
} else {
this._offCtx.fillStyle = '#ffffff'
this._offCtx.fillRect(this._offX, this._offY, this.width, this.height);
this._offCtx.globalCompositeOperation = "xor";
}
this.content.update();
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
// this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
// this.ctx.drawImage(this._offCanvas, this._offX, this._offY, this.content.width, this.content.height, this._offX + this.content.x, this._offY + this.content.y, this.width, this.height);
this._offCtx.restore();
}
}
export function between(a, b, c) {
return [a, b, c].sort((x, y) => x - y)[1];
}
// --------------- custom class -------------------- // --------------- custom class --------------------
This diff is collapsed.
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