From 9491ab92877d48e5497f0078b75967cdb423ea05 Mon Sep 17 00:00:00 2001 From: oc Date: Tue, 9 Jul 2019 16:08:44 +0800 Subject: [PATCH] drawTextBox next --- editor-mobile.html | 1 + editor.html | 1 + index.html | 1 + libs/control.js | 23 +++++------------------ libs/ui.js | 15 +++++++++++++-- main.js | 3 ++- styles.css | 34 ++++++++++++++++++++++++++++++---- 7 files changed, 53 insertions(+), 25 deletions(-) diff --git a/editor-mobile.html b/editor-mobile.html index d6ccc0ae..b8d2e0eb 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -515,6 +515,7 @@ 此浏览器不支持HTML5 +
diff --git a/libs/control.js b/libs/control.js index 294a2adf..a4aa24e4 100644 --- a/libs/control.js +++ b/libs/control.js @@ -19,7 +19,6 @@ control.prototype._init = function () { this.registerAnimationFrame("totalTime", false, this._animationFrame_totalTime); this.registerAnimationFrame("autoSave", true, this._animationFrame_autoSave); this.registerAnimationFrame("globalAnimate", true, this._animationFrame_globalAnimate); - //this.registerAnimationFrame("selector", false, this._animationFrame_selector); this.registerAnimationFrame("animate", true, this._animationFrame_animate); this.registerAnimationFrame("heroMoving", true, this._animationFrame_heroMoving); this.registerAnimationFrame("weather", true, this._animationFrame_weather); @@ -151,23 +150,6 @@ control.prototype._animationFrame_globalAnimate = function (timestamp) { core.animateFrame.globalTime = timestamp; } -control.prototype._animationFrame_selector = function (timestamp) { - if (timestamp - core.animateFrame.selectorTime <= 20) return; - var opacity = null; - if (core.dymCanvas._selector) opacity = parseFloat(core.dymCanvas._selector.canvas.style.opacity); - else if (core.dymCanvas._uievent_selector) opacity = parseFloat(core.dymCanvas._uievent_selector.canvas.style.opacity); - if (!core.isset(opacity)) return; - if (core.animateFrame.selectorUp) - opacity += 0.02; - else - opacity -= 0.02; - if (opacity > 0.95 || opacity < 0.55) - core.animateFrame.selectorUp = !core.animateFrame.selectorUp; - core.setOpacity("_selector", opacity); - core.setOpacity("_uievent_selector", opacity); - core.animateFrame.selectorTime = timestamp; -} - control.prototype._animationFrame_animate = function (timestamp) { if (timestamp - core.animateFrame.animateTime < 50 || !core.status.animateObjs || core.status.animateObjs.length == 0) return; core.clearMap('animate'); @@ -2648,6 +2630,11 @@ control.prototype._resize_canvas = function (obj) { canvas.style.left = parseFloat(canvas.getAttribute("_left")) * core.domStyle.scale + "px"; canvas.style.top = parseFloat(canvas.getAttribute("_top")) * core.domStyle.scale + "px"; } + // resize next + main.dom.next.style.width = main.dom.next.style.height = 5 * core.domStyle.scale + "px"; + main.dom.next.style.borderBottomWidth = main.dom.next.style.borderRightWidth = 4 * core.domStyle.scale + "px"; + + } control.prototype._resize_statusBar = function (obj) { diff --git a/libs/ui.js b/libs/ui.js index 7391eea5..46738a4f 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -452,6 +452,7 @@ ui.prototype.closePanel = function () { ui.prototype.clearUI = function () { core.status.boxAnimateObjs = []; if (core.dymCanvas._selector) core.deleteCanvas("_selector"); + main.dom.next.style.display = 'none'; core.clearMap('ui'); core.setAlpha('ui', 1); } @@ -1117,10 +1118,20 @@ ui.prototype.drawTextBox = function(content, showAll) { var content_top = this._drawTextBox_drawTitleAndIcon(titleInfo, hPos, vPos, alpha); // Step 5: 绘制正文 - return this.drawTextContent('ui', content, { + var config = this.drawTextContent('ui', content, { left: hPos.content_left, top: content_top, maxWidth: hPos.validWidth, lineHeight: vPos.lineHeight, time: (showAll || textAttribute.time<=0 || core.status.event.id!='action')?0:textAttribute.time }); + + // Step 6: 绘制光标 + main.dom.next.style.display = 'block'; + main.dom.next.style.borderRightColor = main.dom.next.style.borderBottomColor = core.arrayToRGB(textAttribute.text); + main.dom.next.style.top = (vPos.bottom - 20) * core.domStyle.scale + "px"; + var left = (hPos.left + hPos.right) / 2; + if (pInfo.position == 'up' && pInfo.px != null && Math.abs(pInfo.px * 32 + 16 - left) < 50) + left = hPos.right - 64; + main.dom.next.style.left = left * core.domStyle.scale + "px"; + return config; } ui.prototype._drawTextBox_drawImages = function (content) { @@ -1168,7 +1179,7 @@ ui.prototype._drawTextBox_getHorizontalPosition = function (content, titleInfo, ui.prototype._drawTextBox_getVerticalPosition = function (content, titleInfo, posInfo, validWidth) { var textAttribute = core.status.textAttribute || core.initStatus.textAttribute; var lineHeight = textAttribute.textfont + 6; - var height = 30 + this.getTextContentHeight(content, { + var height = 45 + this.getTextContentHeight(content, { lineHeight: lineHeight, maxWidth: validWidth }); if (titleInfo.title) height += textAttribute.titlefont + 5; diff --git a/main.js b/main.js index 32948c93..1434550c 100644 --- a/main.js +++ b/main.js @@ -74,7 +74,8 @@ function main() { 'inputMessage': document.getElementById('inputMessage'), 'inputBox': document.getElementById('inputBox'), 'inputYes': document.getElementById('inputYes'), - 'inputNo': document.getElementById('inputNo') + 'inputNo': document.getElementById('inputNo'), + 'next': document.getElementById('next') }; this.mode = 'play'; this.loadList = [ diff --git a/styles.css b/styles.css index 19d546ed..3a428992 100644 --- a/styles.css +++ b/styles.css @@ -160,8 +160,7 @@ } .onChoiceAnimate { - animation: 2s ease-in-out 0s infinite normal none running; - animation-name: onChoice; + animation: onChoice 2s ease-in-out 0s infinite normal none running; } #floorMsgGroup { @@ -382,8 +381,7 @@ p#name { } #_selector, #_uievent_selector { - animation: 2s ease-in-out 0s infinite normal none running; - animation-name: selector; + animation: selector 2s ease-in-out 0s infinite normal none running; } @-webkit-keyframes selector { @@ -398,3 +396,31 @@ p#name { 100% { opacity: 0.95; } } +#next { + width: 5px; + height: 5px; + display: none; + position: absolute; + transform: rotate(45deg); + border-bottom-width: 4px; + border-bottom-style: solid; + border-right-width: 4px; + border-right-style: solid; + -webkit-animation: next .5s ease-in-out alternate infinite; + animation: next .5s ease-in-out alternate infinite; + left: 0; + top: 0; + opacity: 0.7; + z-index: 169; +} + +@-webkit-keyframes next { + 100% { + transform: rotate(45deg) translate(-3px, -3px); + } +} +@keyframes next { + 100% { + transform: rotate(45deg) translate(-3px, -3px); + } +} \ No newline at end of file