@icanvas/components/2d/libs/scroll.js

这是icanvas的界面组件包

import Component from './base.js';
import Canvas from '@icanvas/apis/libs/canvas.js';
import Vector2 from '@icanvas/maths/libs/vector2.js';
export default class Scroll extends Component {
	size = new Vector2(); //绘制、切割大小
	get width() {
		return this.size.x;
	}
	set width(width) {
		this.size.x = width;
	}
	get height() {
		return this.size.y;
	}
	set height(height) {
		this.size.y = height;
	}
	setSize(x, y) {
		this.size.setTo(x, y);
		return this;
	}
	setAnchorSize(x = 0.5, y = 0.5) {
		this.anchor.x = this.width * x;
		this.anchor.y = this.height * y;
		return this;
	}

	context = Canvas().getContext('2d');
	setRealSize(x, y) {
		this.context.SetSize(x, y);
		return this;
	}
	get realWidth() {
		return this.context.canvas.width;
	}
	get realHeight() {
		return this.context.canvas.height;
	}
	setStatic(callback) {
		callback(this.context);
		return this;
	}
	scrollAt = new Vector2(); //切割位置
	get scrollHeight() {
		return this.realHeight - this.height;
	}
	get scrollWidth() {
		return this.realWidth - this.width;
	}

	constructor(width, height, realwidth, realheight) {
		super();
		this.setSize(width, height);
		this.setRealSize(realwidth, realheight);
	}
	/**
	 * 横向移动
	 * @param {Number} mx 轴X移动量
	 */
	touchMoveX(mx) {
		let X = this.scrollAt.x;
		let Max = this.scrollWidth;
		this.scrollAt.x -= mx;
		if (this.scrollAt.x > Max) this.scrollAt.x = Max;
		if (this.scrollAt.x < 0) this.scrollAt.x = 0;
		return this.scrollAt.x != X;
	}
	/**
	 * 纵向移动
	 * @param {Number} my 轴Y移动量
	 */
	touchMoveY(my) {
		let Y = this.scrollAt.y;
		let Max = this.scrollHeight;
		this.scrollAt.y -= my;
		if (this.scrollAt.y > Max) this.scrollAt.y = Max;
		if (this.scrollAt.y < 0) this.scrollAt.y = 0;
		return this.scrollAt.y != Y;
	}
	update(Context) {
		Context.drawImage(
			this.context.canvas,
			this.scrollAt.x,
			this.scrollAt.y,
			this.size.x,
			this.size.y,
			-this.anchor.x,
			-this.anchor.y,
			this.size.x,
			this.size.y,
		);
	}
	/**
	 * 触摸事件位置偏移量
	 * @param {*} touch
	 */
	offsetTouch(touch) {
		return touch.addToVector(this.anchor).addToVector(this.scrollAt);
	}
	hitMe(x, y) {
		x -= this.scrollAt.x;
		y -= this.scrollAt.y;
		return x >= 0 && x <= this.width && y >= 0 && y <= this.height;
	}
}

// class ScrollDynamic extends Component {
// 	Stage = null;
// 	constructor(component) {
// 		super();
// 		this.Stage = component;
// 	}
// 	realSize = new Vector2(1, 1);
// 	setRealSize(x, y) {
// 		this.realSize.setTo(x, y);
// 		return this;
// 	}
// 	get realWidth() {
// 		return this.realSize.x;
// 	}
// 	set realWidth(x) {
// 		this.realSize.y = x;
// 	}
// 	get realHeight() {
// 		return this.realSize.y;
// 	}
// 	set realHeight(y) {
// 		this.realSize.y = y;
// 	}
// 	size = new Vector2(1, 1);
// 	get width() {
// 		return this.size.x;
// 	}
// 	set width(width) {
// 		this.size.x = width;
// 	}
// 	get height() {
// 		return this.size.y;
// 	}
// 	set height(height) {
// 		this.size.y = height;
// 	}
// 	setSize(x, y) {
// 		this.size.setTo(x, y);
// 		return this;
// 	}

// 	setAnchorSize(x = 0.5, y = 0.5) {
// 		this.anchor.x = this.width * x;
// 		this.anchor.y = this.height * y;
// 		return this;
// 	}
// 	scrollMax = new Vector2();
// 	scrollAt = new Vector2(); //切割位置
// 	/**
// 	 * 横向移动
// 	 * @param {Number} mx 轴X移动量
// 	 */
// 	touchMoveX(mx) {
// 		let X = this.scrollAt.x;
// 		let Max = this.realWidth - this.width;
// 		this.scrollAt.x -= mx;
// 		if (this.scrollAt.x > Max) this.scrollAt.x = Max;
// 		if (this.scrollAt.x < 0) this.scrollAt.x = 0;
// 		return this.scrollAt.x != X;
// 	}
// 	/**
// 	 * 纵向移动
// 	 * @param {Number} my 轴Y移动量
// 	 */
// 	touchMoveY(my) {
// 		let Y = this.scrollAt.y;
// 		let Max = this.realHeight - this.height;
// 		this.scrollAt.y -= my;
// 		if (this.scrollAt.y > Max) this.scrollAt.y = Max;
// 		if (this.scrollAt.y < 0) this.scrollAt.y = 0;
// 		return this.scrollAt.y != Y;
// 	}
// 	clip(Context) {
// 		Context.rect(this.scrollAt.x, this.scrollAt.y, this.height, this.width);
// 	}
// }