Commit f7228ce8 authored by Li MingZhe's avatar Li MingZhe

feat: 背景色更改

parent 82c22ffd
......@@ -42,8 +42,14 @@ cc.Class({
// baseHeight: 720;
onLoad() {
// cc.sys.capabilities = true;
cc.macro.ENABLE_MULTI_TOUCH = true;
cc.debug.setDisplayStats(false);
this.initSceneData();
this.initSize();
},
initSceneData() {
......@@ -54,8 +60,18 @@ cc.Class({
_designSize: null,
initSize() {
// 注意cc.winSize只有在适配后(修改fitHeight/fitWidth后)才能获取到正确的值,因此使用cc.getFrameSize()来获取初始的屏幕大小
let screen_size = cc.view.getFrameSize().width / cc.view.getFrameSize().height
let design_size = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height
let f = screen_size >= design_size
cc.Canvas.instance.fitHeight = f
cc.Canvas.instance.fitWidth = !f
this._designSize = cc.view.getDesignResolutionSize();
},
start() {
......@@ -216,6 +232,7 @@ cc.Class({
const bgBottom = cc.find('Canvas/bgBottom');
const canvas = cc.find('Canvas');
// this.initWebListener();
let downFlag = false;
bgBottom.on('item_touch_start', (item) => {
......@@ -242,10 +259,14 @@ cc.Class({
if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove)
this.removeHtmlCanvasListener('touchmove');
}
}
const touchEnd = (e) => {
// if (downFlag == false) {
// return;
// }
downFlag = false;
this.canvasTouchEnd(e);
console.log('touch end')
......@@ -256,10 +277,15 @@ cc.Class({
if (canvas.hasEventListener(cc.Node.EventType.MOUSE_LEAVE)) {
canvas.off(cc.Node.EventType.MOUSE_LEAVE, mouseUp)
}
this.removeHtmlTouchEnd();
}
const mouseUp = (e) => {
// if (downFlag == false) {
// return;
// }
downFlag = false;
this.canvasTouchEnd(e);
console.log('mouse up')
......@@ -271,6 +297,15 @@ cc.Class({
}
}
// canvas.on(cc.Node.EventType.TOUCH_START, () => {
// console.log('canvas touch start')
// })
// canvas.on(cc.Node.EventType.MOUSE_DOWN, (e) => {
// console.log('canvas MOUSE_DOWN ')
// })
canvas.on(cc.Node.EventType.TOUCH_MOVE, touchMove)
canvas.on(cc.Node.EventType.MOUSE_MOVE, mouseMove)
......@@ -278,33 +313,131 @@ cc.Class({
canvas.on(cc.Node.EventType.TOUCH_CANCEL, touchEnd)
canvas.on(cc.Node.EventType.MOUSE_UP, mouseUp)
// canvas.on(cc.Node.EventType.MOUSE_LEAVE, mouseUp)
},
// canvas.on(cc.Node.EventType.MOUSE_MOVE, (e) => {
// // this.canvasTouchMove(e);
// if (!downFlag) {
// return;
// }
// console.log('mouse');
// moveFunc(e);
// canvas.off(cc.Node.EventType.TOUCH_MOVE, moveFunc)
// })
removeHtmlCanvasListener(type) {
const canvasHtml = document.querySelector('canvas');
canvasHtml.addEventListener(type, (e) => {})
},
// canvas.on(cc.Node.EventType.MOUSE_UP, (e) => {
// // this.canvasTouchMove(e);
// canvas.off(cc.Node.EventType.TOUCH_END, endFunc)
// })
// canvas.on(cc.Node.EventType.TOUCH_CANCEL, (e) => {
// downFlag = false;
// this.canvasTouchEnd(e);
// })
// canvas.on(cc.Node.EventType.TOUCH_END, (e) => {
// downFlag = false;
// this.canvasTouchEnd(e);
initWebListener() {
// canvas.on(cc.Node.EventType.MOUSE_DOWN, (e) => {
// console.log('mouse down e: ', e)
// console.log('location: ', e.getLocation());
// })
console.log('in initWebListener');
const canvasHtml = document.querySelector('canvas');
document.addEventListener('touchstart', this.htmlCanvasTouchstartFunc.bind(this), this);
document.addEventListener('touchmove', this.htmlCanvasTouchmoveFunc.bind(this), this);
document.addEventListener('touchend', this.htmlCanvasTouchendFunc.bind(this), this);
document.addEventListener('click', this.htmlCanvasClickFunc.bind(this), this);
// canvasHtml.addEventListener('touchcancel', this.htmlCanvasTouchcancelFunc, this);
// canvasHtml.addEventListener('touchstart', (e) => {
// console.log('html touch start e: ', e);
// const evt = this.createTouchEvent(canvas, 'mousedown', e);
// canvas.dispatchEvent(evt);
// });
// canvasHtml.addEventListener('touchmove', (e) => {
// console.log('html touch move e: ', e);
// const evt = this.createTouchEvent(canvas, 'mousemove', e);
// canvas.dispatchEvent(evt);
// });
// canvasHtml.addEventListener('touchend', (e) => {
// console.log('html touch end e: ', e);
// const evt = this.createTouchEvent(canvas, 'mouseup', e);
// canvas.dispatchEvent(evt);
// });
// canvasHtml.addEventListener('touchcancel', (e) => {
// console.log('html touch cancel e: ', e);
// const evt = this.createTouchEvent(canvas, 'mouseleave', e);
// canvas.dispatchEvent(evt);
// });
// canvasHtml.addEventListener('mousedown', (e) => {
// console.log('html mousedown e: ', e);
// const baseNode = canvas
// const subY = e.target.clientHeight;
// const p1 = baseNode.parent.convertToNodeSpaceAR(cc.v2(e.clientX, subY - e.clientY));
// const p2 = baseNode.parent.convertToNodeSpaceAR(cc.v2(e.layerX, subY - e.layerY));
// const p3 = baseNode.parent.convertToNodeSpaceAR(cc.v2(e.offsetX, subY - e.offsetY));
// const p4 = baseNode.parent.convertToNodeSpaceAR(cc.v2(e.pageX, subY - e.pageY));
// const p5 = baseNode.parent.convertToNodeSpaceAR(cc.v2(e.screenX, subY - e.screenY));
// const p6 = baseNode.parent.convertToNodeSpaceAR(cc.v2(e.x, subY - e.y));
// console.log('p1: ', p1);
// console.log('p2: ', p2);
// console.log('p3: ', p3);
// console.log('p4: ', p4);
// console.log('p5: ', p5);
// console.log('p6: ', p6);
// });
},
htmlCanvasTouchstartFunc(e) {
console.log('html htmlCanvasTouchstartFunc')
const canvasHtml = document.querySelector('canvas');
const evt = this.createTouchEvent(canvasHtml, 'mousedown', e);
canvasHtml.dispatchEvent(evt);
},
htmlCanvasTouchmoveFunc(e) {
console.log('html htmlCanvasTouchmoveFunc')
const canvasHtml = document.querySelector('canvas');
const evt = this.createTouchEvent(canvasHtml, 'mousemove', e);
canvasHtml.dispatchEvent(evt);
},
htmlCanvasTouchendFunc(e) {
console.log('html htmlCanvasTouchendFunc')
const canvasHtml = document.querySelector('canvas');
const evt = this.createTouchEvent(canvasHtml, 'mouseup', e);
canvasHtml.dispatchEvent(evt);
},
htmlCanvasTouchcancelFunc(e) {
const canvasHtml = document.querySelector('canvas');
const evt = this.createTouchEvent(canvasHtml, 'mouseleave', e);
canvasHtml.dispatchEvent(evt);
},
htmlCanvasClickFunc(e) {
if (e.aaas){
return
}
const canvasHtml = document.querySelector('canvas');
const evt = this.createTouchEvent(canvasHtml, 'click', e);
evt.aaas=1
canvasHtml.dispatchEvent(evt);
},
removeHtmlTouchEnd() {
const canvasHtml = document.querySelector('canvas');
canvasHtml.removeEventListener('touchend', this.htmlCanvasTouchendFunc, this);
},
initView() {
this.initBg();
this.initHotZone();
......@@ -332,6 +465,22 @@ cc.Class({
bgNode.anchorY = 0;
bgNode.x = frameSize.width / 2 * s;
bgNode.y = -frameSize.height / 2 * s;
const bg = cc.find('Canvas/bg');
const rectNode = new cc.Node();
rectNode.x = -bg.x;
rectNode.y = -bg.y;
rectNode.scaleX = bg.scaleX;
rectNode.scaleY = bg.scaleY;
bg.addChild(rectNode);
const ctx = rectNode.addComponent(cc.Graphics);
ctx.fillColor = this.data.bgColor || '#f9bd03';
ctx.fillRect(-bg.width / 2 , -bg.height / 2, bg.width, bg.height);
ctx.fill();
},
......@@ -1037,5 +1186,49 @@ cc.Class({
createTouchEvent(touchTarget, type, e) {
const otcs = [...e.touches];
// console.log(e.type, e)
// e = e.type.startsWith('touch') ? e.touches[0] : e
// if (!e.touches) {
// e.touches = otcs
// }
const posInfo = e.touches ? e.touches[0] || {} : e;
const touch = new Touch({
identifier: -Date.now(),
target: touchTarget,
clientX: posInfo.clientX||0,
clientY: posInfo.clientY||0,
force: posInfo.force,
pageX: posInfo.pageX,
pageY: posInfo.pageY,
radiusX: posInfo.radiusX,
radiusY: posInfo.radiusY,
rotationAngle: e.rotationAngle,
screenX: posInfo.screenX,
screenY: posInfo.screenY,
});
const touchEvent = new TouchEvent(type, {
touches: [touch],
view: window,
cancelable: true,
bubbles: true,
changedTouches: [touch]
});
touchEvent.fireByMe = true;
touchEvent.pageX = posInfo.pageX
touchEvent.pageY = posInfo.pageY
touchEvent.clientX = posInfo.clientX
touchEvent.clientY = posInfo.clientY
touchEvent.screenX = posInfo.screenX
touchEvent.screenY = posInfo.screenY
return touchEvent;
},
// update (dt) {},
});
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