Commit d8fe8927 authored by 李维's avatar 李维

画图板功能开发完毕

parent b700d735
......@@ -104,55 +104,108 @@ export default class DrawingBoard extends cc.Component {
openPalette = false;
// 初始化按钮
initButtons() {
const pencilDataArr = [
{ 'resName': 'color_red', 'color': '#ff1500' },
{ 'resName': 'color_orange', 'color': '#ff8e13' },
{ 'resName': 'color_yellow', 'color': '#ffd900' },
{ 'resName': 'color_green', 'color': '#3cd31b' },
{ 'resName': 'color_blue', 'color': '#00bbf9' },
{ 'resName': 'color_purple', 'color': '#a282ea' },
{ 'resName': 'color_pink', 'color': '#ff84b3' },
{ 'resName': 'color_brown', 'color': '#a45e10' },
{ 'resName': 'color_black', 'color': '#000000' }
];
const eraserBtn = cc.find("ToolBox/Eraser", this.node)
const eraserIconNormal = cc.find("normal", eraserBtn)
const eraserIconActive = cc.find("active", eraserBtn)
eraserBtn.on("click", ()=>{
// 切换橡皮模式
this.eraserMode = !this.eraserMode;
if(this.eraserMode) {
eraserIconNormal.active = false;
eraserIconActive.active = true;
} else {
eraserIconNormal.active = true;
eraserIconActive.active = false;
}
// 点击橡皮 关闭颜色盘
this.openPalette = false;
btnColors.active = false;
bgPalette.active = false;
})
const painterBtn = cc.find("ToolBox/Painter", this.node)
painterBtn.on("click", ()=>{
eraserBtn.active = true;
painterBtn.active = false;
closeBtn.active = true;
paletteBtn.active = true;
this.editMode = true;
eraserBtn.active = true; // 显示橡皮按钮
painterBtn.active = false; // 隐藏画笔按钮
closeBtn.active = true; // 显示关闭按钮
paletteBtn.active = true; // 显示画板按钮
this.editMode = true; // 开启编辑模式
this.eraserMode = false; // 关闭橡皮模式
eraserIconNormal.active = true; // 橡皮显示切换为正常
eraserIconActive.active = false; // 隐藏橡皮高亮
// 关闭颜色盘
this.openPalette = false;
btnColors.active = false;
bgPalette.active = false;
// 设置调色板初始颜色
this.penColor = pencilDataArr[4].color;
activeColor.children.forEach(acNode => {
if(acNode.name == pencilDataArr[4].resName) {
acNode.active = true;
} else {
acNode.active = false;
}
});
this.node.emit("onPaintingStart");
})
const closeBtn = cc.find("ToolBox/Close", this.node)
closeBtn.on("click", ()=>{
eraserBtn.active = false;
painterBtn.active = true;
closeBtn.active = false;
paletteBtn.active = false;
this.editMode = false;
eraserBtn.active = false; // 隐藏橡皮按钮
painterBtn.active = true; // 显示画笔按钮
closeBtn.active = false; // 隐藏关闭按钮
paletteBtn.active = false; // 隐藏画板按钮
this.editMode = false; // 关闭编辑模式
this.eraserMode = false; // 关闭橡皮模式
eraserIconNormal.active = true; // 橡皮显示切换为正常
eraserIconActive.active = false; // 隐藏橡皮高亮
this.node.emit("onPaintingEnd");
})
const paletteBtn = cc.find("ToolBox/Palette", this.node)
const btnColors = cc.find("ToolBox/Palette/btnColors", this.node)
const bgPalette = cc.find("ToolBox/Palette/bgPalette", this.node)
paletteBtn.on("click", ()=>{
this.openPalette = !this.openPalette;
btnColors.active = this.openPalette;
bgPalette.active = this.openPalette;
this.eraserMode = false; // 关闭橡皮模式
eraserIconNormal.active = true; // 橡皮显示切换为正常
eraserIconActive.active = false; // 隐藏橡皮高亮
})
const pencilDataArr = [
{ 'resName': 'color_red', 'color': '#f85137' },
{ 'resName': 'color_orange', 'color': '#ff9a51' },
{ 'resName': 'color_yellow', 'color': '#ffda4f' },
{ 'resName': 'color_green', 'color': '#87cc59' },
{ 'resName': 'color_blue', 'color': '#64b7ee' },
{ 'resName': 'color_purple', 'color': '#9987dd' },
{ 'resName': 'color_pink', 'color': '#ee92b1' },
{ 'resName': 'color_brown', 'color': '#926332' },
{ 'resName': 'color_black', 'color': '#000000' }
];
const activeColor = cc.find("ToolBox/Palette/active_color", this.node)
pencilDataArr.forEach(btnColor => {
const colorBtn = cc.find(btnColor.resName, btnColors)
colorBtn.on("click", ()=>{
this.penColor = btnColor.color;
this.openPalette = !this.openPalette;
btnColors.active = this.openPalette;
// 点击颜色 关闭颜色盘
this.openPalette = false;
btnColors.active = false;
bgPalette.active = false;
activeColor.children.forEach(acNode => {
if(acNode.name == colorBtn.name) {
acNode.active = true;
} else {
acNode.active = false;
}
});
})
})
......
{
"ver": "2.3.5",
"uuid": "8f2f2c95-04b2-4b25-8aee-be293c26e59f",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 61,
"height": 66,
"platformSettings": {},
"subMetas": {
"bg_color": {
"ver": "1.0.4",
"uuid": "6363ad5c-a18c-4a90-bede-4c8f5572904a",
"rawTextureUuid": "8f2f2c95-04b2-4b25-8aee-be293c26e59f",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 61,
"height": 66,
"rawWidth": 61,
"rawHeight": 66,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "f2111752-15f4-49ee-b907-b135c65a437a",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 290,
"height": 291,
"platformSettings": {},
"subMetas": {
"bg_palette": {
"ver": "1.0.4",
"uuid": "6680cfee-b17c-49db-aab4-61b3e5eff868",
"rawTextureUuid": "f2111752-15f4-49ee-b907-b135c65a437a",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": 0,
"trimX": 11,
"trimY": 11,
"width": 269,
"height": 269,
"rawWidth": 290,
"rawHeight": 291,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
......@@ -4,7 +4,7 @@
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 200,
......
{
"ver": "2.3.5",
"uuid": "f74aadf0-9b46-4fa4-856a-3cd5d4a633fa",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 61,
"height": 66,
"platformSettings": {},
"subMetas": {
"icon_brush": {
"ver": "1.0.4",
"uuid": "e24fd2d0-5c35-4575-a145-32f8f20d223e",
"rawTextureUuid": "f74aadf0-9b46-4fa4-856a-3cd5d4a633fa",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 61,
"height": 66,
"rawWidth": 61,
"rawHeight": 66,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "9feef59e-ec51-4898-802e-653620224642",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_1": {
"ver": "1.0.4",
"uuid": "730ca7d9-e353-4e21-a9b2-2a9ca36aae70",
"rawTextureUuid": "9feef59e-ec51-4898-802e-653620224642",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "9ebb4caf-4564-47ef-a2db-50b00b9a6dd6",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_2": {
"ver": "1.0.4",
"uuid": "854a4246-27ee-43b5-89c6-ec1394065e41",
"rawTextureUuid": "9ebb4caf-4564-47ef-a2db-50b00b9a6dd6",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "179a31da-8c2d-414d-a684-ab73981b1efb",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_3": {
"ver": "1.0.4",
"uuid": "3199e025-4c33-44d2-9cb2-f32ceec0957f",
"rawTextureUuid": "179a31da-8c2d-414d-a684-ab73981b1efb",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "9bdb3ba9-1a17-4801-a3c1-1670a2d02408",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_4": {
"ver": "1.0.4",
"uuid": "7c4a50a4-a165-4de3-b6a3-47ef2f8d3e09",
"rawTextureUuid": "9bdb3ba9-1a17-4801-a3c1-1670a2d02408",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "9ecc83d9-afa3-42d9-9381-dba0d9e183a0",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_5": {
"ver": "1.0.4",
"uuid": "e68bd8df-9d78-4294-b46a-fc8b964636f5",
"rawTextureUuid": "9ecc83d9-afa3-42d9-9381-dba0d9e183a0",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "1a007c73-c47d-4445-9d77-a4330284690c",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_6": {
"ver": "1.0.4",
"uuid": "0b21f47b-3d52-48df-9413-12438592bc06",
"rawTextureUuid": "1a007c73-c47d-4445-9d77-a4330284690c",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "325ce27a-9813-4d84-ad0f-bb6e98d60368",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_7": {
"ver": "1.0.4",
"uuid": "2320bc8d-10a6-41a2-9c9f-c765a8f75c28",
"rawTextureUuid": "325ce27a-9813-4d84-ad0f-bb6e98d60368",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "aa137204-422c-4896-86ad-37cc584d669f",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_8": {
"ver": "1.0.4",
"uuid": "04b61875-e989-48e2-aa9e-a55ac886d7f7",
"rawTextureUuid": "aa137204-422c-4896-86ad-37cc584d669f",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "b39d9fee-8cbc-4a6b-b17e-d3e63e8bac8e",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 33,
"height": 33,
"platformSettings": {},
"subMetas": {
"icon_color_9": {
"ver": "1.0.4",
"uuid": "fe8c50e3-717f-4d40-8c13-626e35ee931f",
"rawTextureUuid": "b39d9fee-8cbc-4a6b-b17e-d3e63e8bac8e",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 33,
"height": 33,
"rawWidth": 33,
"rawHeight": 33,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "570076e7-4877-4bb8-bc21-e92937c7ee28",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 61,
"height": 66,
"platformSettings": {},
"subMetas": {
"icon_eraser": {
"ver": "1.0.4",
"uuid": "5e0de5ef-cdbf-4ac4-9356-65ff86150954",
"rawTextureUuid": "570076e7-4877-4bb8-bc21-e92937c7ee28",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 61,
"height": 66,
"rawWidth": 61,
"rawHeight": 66,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "dd5d5faf-b62e-49f5-b6a1-41f5129e299f",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 61,
"height": 66,
"platformSettings": {},
"subMetas": {
"icon_eraser_active": {
"ver": "1.0.4",
"uuid": "fbe17d45-94f9-44db-902b-fa7547a39bb9",
"rawTextureUuid": "dd5d5faf-b62e-49f5-b6a1-41f5129e299f",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 61,
"height": 66,
"rawWidth": 61,
"rawHeight": 66,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "17dd9df6-d8a6-4580-8c26-e581ad0eb9c7",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": true,
"genMipmaps": false,
"packable": true,
"width": 61,
"height": 66,
"platformSettings": {},
"subMetas": {
"icon_ok": {
"ver": "1.0.4",
"uuid": "6ea705f8-2da6-4402-a0f6-8700207af371",
"rawTextureUuid": "17dd9df6-d8a6-4580-8c26-e581ad0eb9c7",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 61,
"height": 66,
"rawWidth": 61,
"rawHeight": 66,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
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