289 lines
10 KiB
TypeScript
289 lines
10 KiB
TypeScript
// Learn TypeScript:
|
||
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
|
||
// Learn Attribute:
|
||
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
|
||
// Learn life-cycle callbacks:
|
||
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
|
||
|
||
import DrawingBoard from "./DrawingBoard";
|
||
|
||
const { ccclass, property } = cc._decorator;
|
||
|
||
enum GameState {
|
||
drawing = 1,
|
||
erasing = 2,
|
||
}
|
||
|
||
@ccclass
|
||
export default class Game extends cc.Component {
|
||
@property(cc.Node)
|
||
drawNode: cc.Node = null;
|
||
|
||
@property(cc.Camera)
|
||
captureCamera: cc.Camera = null;
|
||
|
||
@property(cc.Camera)
|
||
mainCamera: cc.Camera = null;
|
||
|
||
private targetCamera: cc.Camera;
|
||
private db: DrawingBoard = null;
|
||
private gameState: GameState = GameState.drawing;
|
||
private texture: cc.RenderTexture = null;
|
||
private prePos: cc.Vec2 = cc.Vec2.ZERO;
|
||
private startPos: cc.Vec2 = cc.Vec2.ZERO;
|
||
private lastColor: cc.Color = cc.Color.BLUE;
|
||
private errColor: cc.Color = cc.Color.RED;
|
||
private lastLineWidth: number = 1;
|
||
private history: any[] = [];
|
||
private touchId = -1;
|
||
private touchScale = false;
|
||
|
||
|
||
start() {
|
||
this.initDb();
|
||
this.initTexture();
|
||
this.initRead();
|
||
|
||
setTimeout(() => {
|
||
this.drawNode.on("touchstart", this.onTouchStart, this);
|
||
this.drawNode.on("touchmove", this.onTouchMove, this);
|
||
this.drawNode.on("touchend", this.onTouchEnd, this);
|
||
this.drawNode.on("touchcancel", this.onTouchEnd, this);
|
||
}, 2000);
|
||
}
|
||
|
||
initDb() {
|
||
//创建一个画板(需传入画板尺寸，将自动初始化)
|
||
this.db = new DrawingBoard(this.drawNode.width, this.drawNode.height);
|
||
//设置画板的绘图颜色（每次绘制前都可以重新设置）
|
||
this.lastLineWidth = 15;
|
||
this.db.setLineWidth(this.lastLineWidth);
|
||
// this.db.setColor(this.lastColor.r, this.lastColor.g, this.lastColor.b, this.lastColor.a);
|
||
//线条端点以圆角结尾
|
||
this.db.setLineCircleEnd(true);
|
||
}
|
||
|
||
initTexture() {
|
||
this.texture = new cc.RenderTexture();
|
||
this.texture.initWithSize(this.drawNode.width, this.drawNode.height, cc.RenderTexture.DepthStencilFormat.RB_FMT_S8);
|
||
let spf: cc.SpriteFrame = new cc.SpriteFrame(this.texture);
|
||
this.drawNode.getComponent(cc.Sprite).spriteFrame = spf;
|
||
}
|
||
|
||
initRead(){
|
||
this.targetCamera = this.node.getChildByName("tagCamera").getComponent(cc.Camera);
|
||
var rander = new cc.RenderTexture();
|
||
rander.initWithSize(this.node.width, this.node.height, cc.RenderTexture.DepthStencilFormat.RB_FMT_S8);
|
||
this.targetCamera.targetTexture = rander;
|
||
this.targetCamera.render();
|
||
console.log("完成");
|
||
}
|
||
|
||
onTouchStart(e: cc.Event.EventTouch) {
|
||
//将触摸位置作为线条的起点
|
||
//画板中使用的坐标系，与图片坐标系一样，原点在左上角，X轴向右为正，Y轴向下为正
|
||
//所以Y轴坐标应反过来, 这里用getLocationInView而不是getLocation
|
||
|
||
this.touchId = e.getID();
|
||
if(this.touchId == 1){
|
||
this.touchScale = true;
|
||
return;
|
||
}
|
||
|
||
let pos = e.getLocation();
|
||
this.prePos = this.convertToDrawNodePos(pos);
|
||
this.startPos = this.convertToDrawNodePos(pos);
|
||
this.db.moveTo(this.prePos.x, this.prePos.y);
|
||
|
||
}
|
||
|
||
onTouchMove(e: cc.Event.EventTouch) {
|
||
let touches = e.getTouches();
|
||
var touch1 = touches[0]
|
||
var delta1 = touch1.getDelta();
|
||
let pos = e.getLocation();
|
||
|
||
let pos1 = this.convertToDrawNodePos(touch1.getLocation());
|
||
let dst = this.startPos.sub(pos1).mag()
|
||
// this.label.string = touches.length + "";
|
||
if(touches.length == 1 && this.touchId < 1 && !this.touchScale && dst > 7){
|
||
// alert("不该进来");
|
||
this.prePos = this.convertToDrawNodePos(pos);
|
||
var jg = this.pd(e);
|
||
this.changeColor(jg)
|
||
if (this.gameState == GameState.drawing) {
|
||
//从上一次绘制线条后的终点开始向鼠标当前位置绘制线条
|
||
this.db.lineTo(this.prePos.x, this.prePos.y);
|
||
} else if (this.gameState == GameState.erasing) {
|
||
// 橡皮擦
|
||
this.db.circle(this.prePos.x, this.prePos.y, 10);
|
||
}
|
||
//每次画板中的数据有变化后，及时将数据应用到贴图上，在屏幕上显示出来
|
||
this.drawToImg();
|
||
}
|
||
else if(touches.length == 2){
|
||
var touch1 = touches[0], touch2 = touches[1];
|
||
var delta1 = touch1.getDelta(), delta2 = touch2.getDelta();
|
||
var touchPoint1 = this.node.parent.convertToNodeSpaceAR(touch1.getLocation());
|
||
var touchPoint2 = this.node.parent.convertToNodeSpaceAR(touch2.getLocation());
|
||
|
||
var distance = touchPoint1.sub(touchPoint2);
|
||
var delta = delta1.sub(delta2);
|
||
var scale = 1;
|
||
|
||
if(Math.abs(distance.x) > Math.abs(distance.y)){
|
||
scale = (distance.x + delta.x) / distance.x * this.node.scale;
|
||
}
|
||
else{
|
||
scale = (distance.y + delta.y) / distance.y * this.node.scale;
|
||
}
|
||
if(scale > 2 ) scale = 2;
|
||
this.node.scale = scale <= 0.1 ? 0.1: scale;
|
||
}
|
||
}
|
||
|
||
onTouchEnd(e: cc.Event.EventTouch) {
|
||
this.touchId = e.getID();
|
||
if(this.touchId == 1) this.touchScale = false;
|
||
this.addHistory();
|
||
}
|
||
|
||
pd(event){
|
||
let cha = 2;
|
||
var pos = event.getLocation();
|
||
var jg = false;
|
||
for(let i=-cha; i<cha;i++){
|
||
let postion = cc.v2();
|
||
postion.x = pos.x + i;
|
||
for(let j =-cha; j<cha; j++){
|
||
postion.y = pos.y + j;
|
||
// console.log("检测点:",postion.x,postion.y);
|
||
let img = this.getGraphisData(postion);
|
||
if((img[0] != 255 && img[1]!=255 && img[2]!=255)){
|
||
jg = true;
|
||
j = 10000; i = 10000;
|
||
}
|
||
}
|
||
|
||
}
|
||
//
|
||
return jg;
|
||
|
||
}
|
||
|
||
convertToDrawNodePos(worldPos: cc.Vec2) {
|
||
let pos = this.drawNode.convertToNodeSpaceAR(worldPos);
|
||
pos.x += this.drawNode.width * this.drawNode.anchorX;
|
||
pos.y += this.drawNode.height * this.drawNode.anchorY;
|
||
pos.y = this.drawNode.height - pos.y;
|
||
return pos;
|
||
}
|
||
|
||
addHistory() {
|
||
let copy = this.db.copyData();
|
||
let ucopy = new Uint8Array(copy);
|
||
this.history.push({ data: ucopy });
|
||
// cc.log('历史步骤: ', this.history.length);
|
||
}
|
||
|
||
drawToImg() {
|
||
//获取画板中绘制的图案数据
|
||
let data: Uint8Array = this.db.getData();
|
||
//将数据传递给贴图对象
|
||
this.texture.initWithData(data, cc.Texture2D.PixelFormat.RGBA8888, this.db.width, this.db.height);
|
||
}
|
||
|
||
changeColor(red){
|
||
if(!red) this.db.setColor(this.errColor.r, this.errColor.g, this.errColor.b, this.errColor.a)
|
||
else this.db.setColor(this.lastColor.r, this.lastColor.g, this.lastColor.b, this.lastColor.a);
|
||
}
|
||
|
||
getGraphisData(point){
|
||
let Uint8 = new Uint8Array(4);
|
||
Uint8 = this.targetCamera.targetTexture.readPixels(Uint8,point.x,point.y,1,1);
|
||
|
||
return Uint8;
|
||
}
|
||
|
||
|
||
onBtnDraw() {
|
||
this.db.setLineWidth(this.lastLineWidth);
|
||
this.db.setColor(this.lastColor.r, this.lastColor.g, this.lastColor.b, this.lastColor.a);
|
||
this.gameState = GameState.drawing;
|
||
}
|
||
|
||
onBtnErase() {
|
||
this.db.setLineWidth(this.lastLineWidth * 3);
|
||
// 橡皮擦的颜色不能是(0,0,0,0),因为这样会和DrawingBoard里的默认颜色相同导致绘制跳过
|
||
this.db.setColor(255, 255, 255, 0);
|
||
this.gameState = GameState.erasing;
|
||
|
||
}
|
||
|
||
onBtnClear() {
|
||
this.db.reset();
|
||
this.drawToImg();
|
||
this.history.splice(0, this.history.length);
|
||
}
|
||
|
||
onBtnRevoke() {
|
||
this.history.pop();
|
||
if (this.history.length) {
|
||
let data: Uint8Array = this.history[this.history.length - 1].data;
|
||
this.db.setData(data.buffer);
|
||
this.texture.initWithData(this.db.getData(), cc.Texture2D.PixelFormat.RGBA8888, this.db.width, this.db.height);
|
||
} else {
|
||
this.onBtnClear();
|
||
}
|
||
cc.log('历史记录剩余: ', this.history.length);
|
||
}
|
||
|
||
onBtnSave() {
|
||
if (cc.sys.isBrowser) {
|
||
let width = this.drawNode.width;
|
||
let height = this.drawNode.height;
|
||
|
||
this.captureCamera.enabled = true;
|
||
let texture = new cc.RenderTexture();
|
||
texture.initWithSize(width, height, cc.RenderTexture.DepthStencilFormat.RB_FMT_S8);
|
||
this.captureCamera.targetTexture = texture;
|
||
|
||
let canvas: HTMLCanvasElement = document.createElement('canvas');
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
let ctx = canvas.getContext('2d');
|
||
this.captureCamera.render();
|
||
let data = texture.readPixels();
|
||
// write the render data
|
||
let rowBytes = width * 4;
|
||
for (let row = 0; row < height; row++) {
|
||
let srow = height - 1 - row;
|
||
let imageData = ctx.createImageData(width, 1);
|
||
let start = srow * width * 4;
|
||
for (let i = 0; i < rowBytes; i++) {
|
||
imageData.data[i] = data[start + i];
|
||
}
|
||
ctx.putImageData(imageData, 0, row);
|
||
}
|
||
//
|
||
let dataUrl = canvas.toDataURL('image/png');
|
||
// cc.log('iamge-base64:', dataUrl);
|
||
let saveLink: any = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
|
||
saveLink.href = dataUrl;
|
||
saveLink.download = String(Date.now()) + '.png';
|
||
let event = document.createEvent('MouseEvents');
|
||
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||
saveLink.dispatchEvent(event);
|
||
this.scheduleOnce(t => {
|
||
this.captureCamera.enabled = false;
|
||
}, 0.1);
|
||
} else {
|
||
cc.warn('暂时只支持web端保存图片');
|
||
}
|
||
}
|
||
|
||
update (dt) {
|
||
|
||
}
|
||
}
|