From 90179a9eb0fbec4abff23a94a1ee94e96cbd8afb Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Thu, 29 Nov 2018 21:13:28 +0800 Subject: [PATCH] arrayToRGBA & drawTextBox --- docs/api.md | 4 ++++ libs/control.js | 8 +++----- libs/core.js | 6 ++++++ libs/events.js | 6 +----- libs/ui.js | 48 ++++++++++++++++++++++++-------------------- libs/utils.js | 12 ++++++++--- project/functions.js | 3 +-- 7 files changed, 50 insertions(+), 37 deletions(-) diff --git a/docs/api.md b/docs/api.md index c7efe632..d20171f5 100644 --- a/docs/api.md +++ b/docs/api.md @@ -508,6 +508,10 @@ core.utils.arrayToRGB(color) 将形如[255,0,0]之类的数组转成#FF0000这样的RGB形式。 +core.utils.arrayToRGBA(color) +将形如[255,0,0,1]之类的数组转成rgba(255,0,0,1)这样的RGBA形式。 + + core.utils.encodeRoute(list) 压缩加密路线。可以使用core.encodeRoute(core.status.route)来压缩当前路线。 diff --git a/libs/control.js b/libs/control.js index 780ab91a..fe268433 100644 --- a/libs/control.js +++ b/libs/control.js @@ -1482,8 +1482,7 @@ control.prototype.setFg = function(color, time, callback) { if (time==0) { // 直接变色 core.clearMap('curtain'); - core.setAlpha('curtain', color[3]); - core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGB(color)); + core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGBA(color)); core.status.curtainColor = color; if (core.isset(callback)) callback(); return; @@ -1494,13 +1493,12 @@ control.prototype.setFg = function(color, time, callback) { var changeAnimate = setInterval(function() { step++; - var nowAlpha = fromColor[3]+(color[3]-fromColor[3])*step/25; + var nowA = fromColor[3]+(color[3]-fromColor[3])*step/25; var nowR = parseInt(fromColor[0]+(color[0]-fromColor[0])*step/25); var nowG = parseInt(fromColor[1]+(color[1]-fromColor[1])*step/25); var nowB = parseInt(fromColor[2]+(color[2]-fromColor[2])*step/25); core.clearMap('curtain'); - core.setAlpha('curtain', nowAlpha); - core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGB([nowR,nowG,nowB])); + core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGBA([nowR,nowG,nowB,nowA])); if (step>=25) { clearInterval(changeAnimate); diff --git a/libs/core.js b/libs/core.js index b11c72f6..1e405150 100644 --- a/libs/core.js +++ b/libs/core.js @@ -1026,6 +1026,12 @@ core.prototype.arrayToRGB = function (color) { return core.utils.arrayToRGB(color); } +////// 数组转RGBA ////// +core.prototype.arrayToRGBA = function (color) { + return core.utils.arrayToRGBA(color); +} + + ////// 作弊 ////// core.prototype.debug = function() { core.control.debug(); diff --git a/libs/events.js b/libs/events.js index b276b103..f6dfcc5f 100644 --- a/libs/events.js +++ b/libs/events.js @@ -1371,11 +1371,7 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback if (core.isset(color)) { // 直接变色 core.clearMap('curtain'); - if (core.isset(color[3])) - core.setAlpha('curtain', color[3]); - else - core.setAlpha('curtain', 1); - core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGB(color)); + core.fillRect('curtain',0,0,416,core.arrayToRGBA(color)); core.status.curtainColor = color; } else { diff --git a/libs/ui.js b/libs/ui.js index 4b10fe6b..4ea229c5 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -410,14 +410,11 @@ ui.prototype.drawTextBox = function(content, showAll) { content = info.content; var id=info.id, name=info.name, image=info.image, icon=info.icon, iconHeight=info.iconHeight, animate=info.animate; - // 获得位置信息 - + // 获得颜色的盒子等信息 var textAttribute = core.status.textAttribute || core.initStatus.textAttribute; - var titlefont = textAttribute.titlefont || 22; var textfont = textAttribute.textfont || 16; var offset = textAttribute.offset || 0; - var background = core.status.textAttribute.background; var isWindowSkin = false; if (typeof background == 'string') { @@ -425,7 +422,15 @@ ui.prototype.drawTextBox = function(content, showAll) { if (core.isset(background) && background.width==192 && background.height==128) isWindowSkin = true; else background = core.initStatus.textAttribute.background; } + if (!isWindowSkin) background = core.arrayToRGBA(background); + background = core.material.images.images["winskin.png"]; + + var titleColor = core.arrayToRGBA(textAttribute.title); + var textColor = core.arrayToRGBA(textAttribute.text); + var borderColor = main.borderColor||"#FFFFFF"; + + // 获得位置信息 var position = textAttribute.position, px=null, py=null, ydelta=iconHeight-32; if (content.indexOf("\b[")==0 || content.indexOf("\\b[")==0) { var index = content.indexOf("]"); @@ -442,6 +447,9 @@ ui.prototype.drawTextBox = function(content, showAll) { px = core.status.event.data.x; py = core.status.event.data.y; } + else { + px = null; py=null; + } if (ss.length>=2) { if (ss[1]=='hero') { @@ -463,7 +471,7 @@ ui.prototype.drawTextBox = function(content, showAll) { core.status.boxAnimateObjs = []; core.clearMap('ui'); - var left=7, right=416-2*left, width = right-left; + var left=7, right=416-left, width = right-left; var content_left = left + 25; if (id=='hero' || core.isset(icon)) content_left=left+63; @@ -475,8 +483,7 @@ ui.prototype.drawTextBox = function(content, showAll) { var height = 20 + (textfont+5)*(core.splitLines("ui", realContent, validWidth, font).length+1) + (id=='hero'?core.material.icons.hero.height-10:core.isset(name)?iconHeight-10:0); - - var xoffset = 6, yoffset = 22; + var xoffset = 6, yoffset = 16; var top; if (position=='center') { @@ -495,16 +502,13 @@ ui.prototype.drawTextBox = function(content, showAll) { top = 32 * py + 32 + yoffset; } - var width = right - left; - core.setAlpha('ui', 0.85); - this.drawWindowSkin(left,top,width,height,position,px*32,py*32); + this.drawWindowSkin(background,'ui',left,top,width,height,position,px==null?null:px*32,py==null?null:py*32); core.setAlpha('ui', 1); // var left = 97, top = 64, right = 416 - 2 * left, bottom = 416 - 2 * top; //core.setAlpha('ui', 0.85); - var borderColor = main.borderColor||"#FFFFFF"; // core.setFillStyle('ui', core.arrayToRGB(textAttribute.background)); // core.setStrokeStyle('ui', borderColor); @@ -552,9 +556,8 @@ ui.prototype.drawTextBox = function(content, showAll) { if (core.isset(id)) { content_top = top+57; - core.setAlpha('ui', textAttribute.title[3]); - core.setFillStyle('ui', core.arrayToRGB(textAttribute.title)); - core.setStrokeStyle('ui', core.arrayToRGB(textAttribute.title)); + core.setFillStyle('ui', core.arrayToRGBA(textAttribute.title)); + core.setStrokeStyle('ui', core.arrayToRGBA(textAttribute.title)); if (id == 'hero') { var heroHeight=core.material.icons.hero.height; @@ -583,10 +586,9 @@ ui.prototype.drawTextBox = function(content, showAll) { } } - var defaultColor = core.arrayToRGB(textAttribute.text); + var defaultColor = core.arrayToRGBA(textAttribute.text); var offsetx = content_left, offsety = content_top; core.setFont('ui', font); - core.setAlpha('ui', textAttribute.text[3]); core.setFillStyle('ui', defaultColor); var index = 0, currcolor = defaultColor, changed = false; @@ -663,7 +665,10 @@ ui.prototype.drawChoices = function(content, choices) { if (core.isset(background) && background.width==192 && background.height==128) isWindowSkin = true; else background = core.initStatus.textAttribute.background; } + if (!isWindowSkin) background = core.arrayToRGBA(background); var borderColor = main.borderColor || "#FFFFFF"; + var textColor = core.arrayToRGBA(core.status.textAttribute.text); + var titleColor = core.arrayToRGBA(core.status.textAttribute.title); core.status.event.ui = {"text": content, "choices": choices}; @@ -714,8 +719,7 @@ ui.prototype.drawChoices = function(content, choices) { this.drawWindowSkin(background,'ui',left,top,width,height); } else { - core.setAlpha('ui', background[3]); - core.fillRect('ui', left, top, width, height, core.arrayToRGB(background)); + core.fillRect('ui', left, top, width, height, background); core.strokeRect('ui', left - 1, top - 1, width + 1, height + 1, borderColor, 2); } core.setAlpha('ui', 1); @@ -738,14 +742,14 @@ ui.prototype.drawChoices = function(content, choices) { if (id == 'hero') { var heroHeight = core.material.icons.hero.height; core.strokeRect('ui', left + 15 - 1, top + 30 - 1, 34, heroHeight+2, '#DDDDDD', 2); - core.fillText('ui', name, title_offset, top + 27, '#FFD700', 'bold 19px Verdana'); + core.fillText('ui', name, title_offset, top + 27, titleColor, 'bold 19px Verdana'); core.clearMap('ui', left + 15, top + 30, 32, heroHeight); core.fillRect('ui', left + 15, top + 30, 32, heroHeight, core.material.groundPattern); var heroIcon = core.material.icons.hero['down']; core.canvas.ui.drawImage(core.material.images.hero, heroIcon.stop * 32, heroIcon.loc *heroHeight, 32, heroHeight, left+15, top+30, 32, heroHeight); } else { - core.fillText('ui', name, title_offset, top + 27, '#FFD700', 'bold 19px Verdana'); + core.fillText('ui', name, title_offset, top + 27, titleColor, 'bold 19px Verdana'); if (core.isset(icon)) { core.strokeRect('ui', left + 15 - 1, top + 30 - 1, 34, iconHeight + 2, '#DDDDDD', 2); core.status.boxAnimateObjs = []; @@ -762,7 +766,7 @@ ui.prototype.drawChoices = function(content, choices) { core.canvas.ui.textAlign = "left"; for (var i=0;i255) nowR=255; if (nowB>255) nowB=255; if (nowG>255) nowG=255; + var nowR = this.clamp(parseInt(color[0]),0,255), nowG = this.clamp(parseInt(color[1]),0,255), + nowB = this.clamp(parseInt(color[2]),0,255); return "#"+((1<<24)+(nowR<<16)+(nowG<<8)+nowB).toString(16).slice(1); } +utils.prototype.arrayToRGBA = function (color) { + if (!this.isset(color[3])) color[3]=1; + var nowR = this.clamp(parseInt(color[0]),0,255), nowG = this.clamp(parseInt(color[1]),0,255), + nowB = this.clamp(parseInt(color[2]),0,255), nowA = this.clamp(parseFloat(color[3]),0,1); + return "rgba("+nowR+","+nowG+","+nowB+","+nowA+")"; +} + ////// 加密路线 ////// utils.prototype.encodeRoute = function (route) { var ans=""; diff --git a/project/functions.js b/project/functions.js index 12e8fc2b..b133eb60 100644 --- a/project/functions.js +++ b/project/functions.js @@ -1125,8 +1125,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = // 绘制色调层，默认不透明度 if (!core.isset(color)) color = 0.9; if (typeof color == "number") color = [0,0,0,color]; - core.fillRect('curtain', 0, 0, 416, 416, - 'rgba('+color[0]+','+color[1]+','+color[2]+','+core.clamp(color[3],0,1)+')'); + core.fillRect('curtain', 0, 0, 416, 416, core.arrayToRGBA(color)); // 绘制每个灯光效果 if (!core.isset(lights) || lights.length==0) return;