Commit f7228ce8 authored by Li MingZhe's avatar Li MingZhe

feat: 背景色更改

parent 82c22ffd
...@@ -42,8 +42,14 @@ cc.Class({ ...@@ -42,8 +42,14 @@ cc.Class({
// baseHeight: 720; // baseHeight: 720;
onLoad() { onLoad() {
// cc.sys.capabilities = true;
cc.macro.ENABLE_MULTI_TOUCH = true;
cc.debug.setDisplayStats(false);
this.initSceneData(); this.initSceneData();
this.initSize(); this.initSize();
}, },
initSceneData() { initSceneData() {
...@@ -54,8 +60,18 @@ cc.Class({ ...@@ -54,8 +60,18 @@ cc.Class({
_designSize: null, _designSize: null,
initSize() { 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(); this._designSize = cc.view.getDesignResolutionSize();
}, },
start() { start() {
...@@ -216,6 +232,7 @@ cc.Class({ ...@@ -216,6 +232,7 @@ cc.Class({
const bgBottom = cc.find('Canvas/bgBottom'); const bgBottom = cc.find('Canvas/bgBottom');
const canvas = cc.find('Canvas'); const canvas = cc.find('Canvas');
// this.initWebListener();
let downFlag = false; let downFlag = false;
bgBottom.on('item_touch_start', (item) => { bgBottom.on('item_touch_start', (item) => {
...@@ -242,10 +259,14 @@ cc.Class({ ...@@ -242,10 +259,14 @@ cc.Class({
if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) { if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove) canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove)
this.removeHtmlCanvasListener('touchmove');
} }
} }
const touchEnd = (e) => { const touchEnd = (e) => {
// if (downFlag == false) {
// return;
// }
downFlag = false; downFlag = false;
this.canvasTouchEnd(e); this.canvasTouchEnd(e);
console.log('touch end') console.log('touch end')
...@@ -256,10 +277,15 @@ cc.Class({ ...@@ -256,10 +277,15 @@ cc.Class({
if (canvas.hasEventListener(cc.Node.EventType.MOUSE_LEAVE)) { if (canvas.hasEventListener(cc.Node.EventType.MOUSE_LEAVE)) {
canvas.off(cc.Node.EventType.MOUSE_LEAVE, mouseUp) canvas.off(cc.Node.EventType.MOUSE_LEAVE, mouseUp)
} }
this.removeHtmlTouchEnd();
} }
const mouseUp = (e) => { const mouseUp = (e) => {
// if (downFlag == false) {
// return;
// }
downFlag = false; downFlag = false;
this.canvasTouchEnd(e); this.canvasTouchEnd(e);
console.log('mouse up') console.log('mouse up')
...@@ -271,6 +297,15 @@ cc.Class({ ...@@ -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.TOUCH_MOVE, touchMove)
canvas.on(cc.Node.EventType.MOUSE_MOVE, mouseMove) canvas.on(cc.Node.EventType.MOUSE_MOVE, mouseMove)
...@@ -278,33 +313,131 @@ cc.Class({ ...@@ -278,33 +313,131 @@ cc.Class({
canvas.on(cc.Node.EventType.TOUCH_CANCEL, touchEnd) canvas.on(cc.Node.EventType.TOUCH_CANCEL, touchEnd)
canvas.on(cc.Node.EventType.MOUSE_UP, mouseUp) canvas.on(cc.Node.EventType.MOUSE_UP, mouseUp)
// canvas.on(cc.Node.EventType.MOUSE_LEAVE, mouseUp) // canvas.on(cc.Node.EventType.MOUSE_LEAVE, mouseUp)
},
// canvas.on(cc.Node.EventType.MOUSE_MOVE, (e) => { removeHtmlCanvasListener(type) {
// // this.canvasTouchMove(e); const canvasHtml = document.querySelector('canvas');
// if (!downFlag) { canvasHtml.addEventListener(type, (e) => {})
// return; },
// }
// console.log('mouse');
// moveFunc(e);
// canvas.off(cc.Node.EventType.TOUCH_MOVE, moveFunc)
// })
// canvas.on(cc.Node.EventType.MOUSE_UP, (e) => { initWebListener() {
// // this.canvasTouchMove(e);
// canvas.off(cc.Node.EventType.TOUCH_END, endFunc)
// }) // canvas.on(cc.Node.EventType.MOUSE_DOWN, (e) => {
// canvas.on(cc.Node.EventType.TOUCH_CANCEL, (e) => { // console.log('mouse down e: ', e)
// downFlag = false; // console.log('location: ', e.getLocation());
// this.canvasTouchEnd(e);
// })
// canvas.on(cc.Node.EventType.TOUCH_END, (e) => {
// downFlag = false;
// this.canvasTouchEnd(e);
// }) // })
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() { initView() {
this.initBg(); this.initBg();
this.initHotZone(); this.initHotZone();
...@@ -332,6 +465,22 @@ cc.Class({ ...@@ -332,6 +465,22 @@ cc.Class({
bgNode.anchorY = 0; bgNode.anchorY = 0;
bgNode.x = frameSize.width / 2 * s; bgNode.x = frameSize.width / 2 * s;
bgNode.y = -frameSize.height / 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({ ...@@ -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) {}, // 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