From a6235117b2d0b7448bf00215f385a43dda59e0f7 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Tue, 9 Jun 2020 20:27:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8B=96=E5=8A=A8=E7=B4=A0=E6=9D=90=E5=BF=AB?= =?UTF-8?q?=E9=80=9F=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/editor.js | 45 +++++++-- _server/editor_datapanel.js | 181 ++++++++++++++++++++---------------- _server/editor_listen.js | 6 +- editor.html | 1 + 4 files changed, 143 insertions(+), 90 deletions(-) diff --git a/_server/editor.js b/_server/editor.js index 1a1b100b..d29d276e 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -573,9 +573,42 @@ editor.prototype.drawInitData = function (icons) { var iconImages = document.getElementById('iconImages'); iconImages.style.width = (iconImages.width = fullWidth) / ratio + 'px'; iconImages.style.height = (iconImages.height = fullHeight) / ratio + 'px'; - var drawImage = function (image, x, y) { + document.body.ondrop = function (e) { + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + return false; + } + document.body.ondragover = function (e) { + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + return false; + } + var drawImage = function (image, x, y, cls) { image.style.left = x + 'px'; image.style.top = y + 'px'; + image.ondrop = (function (cls) { return function (e) { + e.stopPropagation(); + e.preventDefault(); + if (!cls) return false; + var files = e.dataTransfer.files; + if (files.length >= 1) { + var file = files[0]; + if (file.type == 'image/png') { + editor.uifunctions.dragImageToAppend(file, cls); + } else { + printe('只支持png图片的快速追加！'); + } + } + return false; + }; })(cls); + image.ondragover = function(e) { + e.stopPropagation(); + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + return false; + } iconImages.appendChild(image); } @@ -600,12 +633,12 @@ editor.prototype.drawInitData = function (icons) { var subimgs = core.splitImage(images[img], 32, editor.uivalues.foldPerCol * 32); var frames = images[img].width / 32; for (var i = 0; i < subimgs.length; i+=frames) { - drawImage(subimgs[i], nowx, i==0?2*32:0); + drawImage(subimgs[i], nowx, i==0?2*32:0, img); nowx += 32; } } else { - drawImage(images[img], nowx, 32*2); + drawImage(images[img], nowx, 32*2, img); nowx += images[img].width; } continue; @@ -615,7 +648,7 @@ editor.prototype.drawInitData = function (icons) { var tempx = editor.uivalues.folded ? 32 : 96; for (var im in autotiles) { var subimgs = core.splitImage(autotiles[im], tempx, autotiles[im].height); - drawImage(subimgs[0], nowx, nowy); + drawImage(subimgs[0], nowx, nowy, img); nowy += autotiles[im].height; } nowx += tempx; @@ -627,12 +660,12 @@ editor.prototype.drawInitData = function (icons) { var subimgs = core.splitImage(images[img], 32, editor.uivalues.foldPerCol * per_height); var frames = images[img].width / 32; for (var i = 0; i < subimgs.length; i+=frames) { - drawImage(subimgs[i], nowx, 0); + drawImage(subimgs[i], nowx, 0, img); nowx += 32; } } else { - drawImage(images[img], nowx, 0); + drawImage(images[img], nowx, 0, img); nowx += images[img].width; } } diff --git a/_server/editor_datapanel.js b/_server/editor_datapanel.js index b30ba3e0..b84cc250 100644 --- a/_server/editor_datapanel.js +++ b/_server/editor_datapanel.js @@ -628,17 +628,16 @@ editor_datapanel_wrapper = function (editor) { - editor.uifunctions.fixCtx_func = function () { + editor.uifunctions.appendPic_func = function () { + // --- fix ctx [editor.dom.appendSourceCtx, editor.dom.appendSpriteCtx].forEach(function (ctx) { ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false; }) - } - - editor.uifunctions.selectAppend_func = function () { + // --- selectAppend var selectAppend_str = []; ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"].forEach(function (image) { selectAppend_str.push(["\n'].join('')); @@ -681,10 +680,8 @@ editor_datapanel_wrapper = function (editor) { editor.dom.appendSpriteCtx.drawImage(img, 0, 0); } editor.dom.selectAppend.onchange(); - } - - editor.uifunctions.selectFileBtn_func = function () { + // --- selectFileBtn var autoAdjust = function (image, callback) { var changed = false; @@ -769,74 +766,75 @@ editor_datapanel_wrapper = function (editor) { } } - editor.dom.selectFileBtn.onclick = function () { - var loadImage = function (content, callback) { - var image = new Image(); - try { - image.onload = function () { - callback(image); - } - image.src = content; - } - catch (e) { - printe(e); + var loadImage = function (content, callback) { + var image = new Image(); + try { + image.onload = function () { + callback(image); } + image.src = content; + } + catch (e) { + printe(e); } - core.readFile(function (content) { - loadImage(content, function (image) { - autoAdjust(image, function (image) { - editor_mode.appendPic.img = image; - editor_mode.appendPic.width = image.width; - editor_mode.appendPic.height = image.height; - - if (editor.dom.selectAppend.value == 'autotile') { - for (var ii = 0; ii < 3; ii++) { - var newsprite = editor.dom.appendPicCanvas.children[ii]; - newsprite.style.width = (newsprite.width = image.width) / editor.uivalues.ratio + 'px'; - newsprite.style.height = (newsprite.height = image.height) / editor.uivalues.ratio + 'px'; - } - editor.dom.appendSpriteCtx.clearRect(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); - editor.dom.appendSpriteCtx.drawImage(image, 0, 0); - } - else { - var ysize = editor.dom.selectAppend.value.endsWith('48') ? 48 : 32; - for (var ii = 0; ii < 3; ii++) { - var newsprite = editor.dom.appendPicCanvas.children[ii]; - newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / editor.uivalues.ratio + 'px'; - newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / editor.uivalues.ratio + 'px'; - } - } - - //画灰白相间的格子 - var bgc = editor.dom.appendBgCtx; - var colorA = ["#f8f8f8", "#cccccc"]; - var colorIndex; - var sratio = 4; - for (var ii = 0; ii < image.width / 32 * sratio; ii++) { - colorIndex = 1 - ii % 2; - for (var jj = 0; jj < image.height / 32 * sratio; jj++) { - bgc.fillStyle = colorA[colorIndex]; - colorIndex = 1 - colorIndex; - bgc.fillRect(ii * 32 / sratio, jj * 32 / sratio, 32 / sratio, 32 / sratio); - } - } - - //把导入的图片画出 - editor.dom.appendSourceCtx.drawImage(image, 0, 0); - editor_mode.appendPic.sourceImageData = editor.dom.appendSourceCtx.getImageData(0, 0, image.width, image.height); - - //重置临时变量 - editor.dom.selectAppend.onchange(); - }); - }); - }, null, 'image/*', 'img'); - - return; } - } + var afterReadFile = function (content, callback) { + loadImage(content, function (image) { + autoAdjust(image, function (image) { + editor_mode.appendPic.img = image; + editor_mode.appendPic.width = image.width; + editor_mode.appendPic.height = image.height; - editor.uifunctions.changeColorInput_func = function () { + if (editor.dom.selectAppend.value == 'autotile') { + for (var ii = 0; ii < 3; ii++) { + var newsprite = editor.dom.appendPicCanvas.children[ii]; + newsprite.style.width = (newsprite.width = image.width) / editor.uivalues.ratio + 'px'; + newsprite.style.height = (newsprite.height = image.height) / editor.uivalues.ratio + 'px'; + } + editor.dom.appendSpriteCtx.clearRect(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); + editor.dom.appendSpriteCtx.drawImage(image, 0, 0); + } + else { + var ysize = editor.dom.selectAppend.value.endsWith('48') ? 48 : 32; + for (var ii = 0; ii < 3; ii++) { + var newsprite = editor.dom.appendPicCanvas.children[ii]; + newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / editor.uivalues.ratio + 'px'; + newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / editor.uivalues.ratio + 'px'; + } + } + + //画灰白相间的格子 + var bgc = editor.dom.appendBgCtx; + var colorA = ["#f8f8f8", "#cccccc"]; + var colorIndex; + var sratio = 4; + for (var ii = 0; ii < image.width / 32 * sratio; ii++) { + colorIndex = 1 - ii % 2; + for (var jj = 0; jj < image.height / 32 * sratio; jj++) { + bgc.fillStyle = colorA[colorIndex]; + colorIndex = 1 - colorIndex; + bgc.fillRect(ii * 32 / sratio, jj * 32 / sratio, 32 / sratio, 32 / sratio); + } + } + + //把导入的图片画出 + editor.dom.appendSourceCtx.drawImage(image, 0, 0); + editor_mode.appendPic.sourceImageData = editor.dom.appendSourceCtx.getImageData(0, 0, image.width, image.height); + + //重置临时变量 + editor.dom.selectAppend.onchange(); + + if (callback) callback(); + }); + }); + } + + editor.dom.selectFileBtn.onclick = function () { + core.readFile(afterReadFile, null, 'image/*', 'img'); + } + + // --- changeColorInput var changeColorInput = document.getElementById('changeColorInput') changeColorInput.oninput = function () { var delta = (~~changeColorInput.value) * 30; @@ -862,12 +860,8 @@ editor_datapanel_wrapper = function (editor) { editor.dom.appendSourceCtx.clearRect(0, 0, imgData.width, imgData.height); editor.dom.appendSourceCtx.putImageData(nimgData, 0, 0); } - } - - - editor.uifunctions.picClick_func = function () { - + // --- picClick var eToLoc = function (e) { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft var scrollTop = document.documentElement.scrollTop || document.body.scrollTop @@ -900,12 +894,9 @@ editor_datapanel_wrapper = function (editor) { 'height:', pos.ysize - 6, 'px;' ].join(''); } - } - - editor.uifunctions.appendConfirm_func = function () { + // appendConfirm var appendRegister = document.getElementById('appendRegister'); - var appendConfirm = document.getElementById('appendConfirm'); appendConfirm.onclick = function () { @@ -997,16 +988,21 @@ editor_datapanel_wrapper = function (editor) { var quickAppendConfirm = document.getElementById('quickAppendConfirm'); quickAppendConfirm.onclick = function () { var value = editor.dom.selectAppend.value; - if (value != 'enemys' && value != 'enemy48' && value != 'npcs' && value != 'npc48') + if (value != 'items' && value != 'enemys' && value != 'enemy48' && value != 'npcs' && value != 'npc48') return printe("只有怪物或NPC才能快速导入！"); var ysize = value.endsWith('48') ? 48 : 32; if (editor.dom.appendSourceCtx.canvas.width != 128 || editor.dom.appendSourceCtx.canvas.height != 4 * ysize) return printe("只有 4*4 的素材图片才可以快速导入！"); var dt = editor.dom.appendSpriteCtx.getImageData(0, 0, editor.dom.appendSprite.width, editor.dom.appendSprite.height); - editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (editor.dom.appendSprite.height + 3 * ysize)) + "px"; + var appendSize = value == 'items' ? 15 : 3; + editor.dom.appendSprite.style.height = (editor.dom.appendSprite.height = (editor.dom.appendSprite.height + appendSize * ysize)) + "px"; editor.dom.appendSpriteCtx.putImageData(dt, 0, 0); - if (editor.dom.appendSprite.width == 64) { // 两帧 + if (editor.dom.appendSprite.width == 32) { // 1帧：道具 + for (var i = 0; i < 16; ++i) { + editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 32 * (i % 4), 32 * parseInt(i / 4), 32, 32, 0, editor.dom.appendSprite.height - (16 - i) * ysize, 32, 32); + } + } else if (editor.dom.appendSprite.width == 64) { // 两帧 editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 32, 0, 64, 4 * ysize, 0, editor.dom.appendSprite.height - 4 * ysize, 64, 4 * ysize); } else { // 四帧 editor.dom.appendSpriteCtx.drawImage(editor.dom.appendSourceCtx.canvas, 0, 0, 128, 4 * ysize, 0, editor.dom.appendSprite.height - 4 * ysize, 128, 4 * ysize); @@ -1039,6 +1035,27 @@ editor_datapanel_wrapper = function (editor) { }); } + + editor.uifunctions.dragImageToAppend = function (file, cls) { + editor.mode.change('appendpic'); + editor.dom.selectAppend.value = cls; + editor.dom.selectAppend.onchange(); + + var reader = new FileReader(); + reader.onload = function () { + afterReadFile(reader.result, function() { + if (cls == 'terrains') return; + if (confirm('你确定要快速追加么？')) { + if (cls == 'autotile') { + appendConfirm.onclick(); + } else { + quickAppendConfirm.onclick(); + } + } + }); + } + reader.readAsDataURL(file); + } } /////////////////////////////////////////////////////////////////////// diff --git a/_server/editor_listen.js b/_server/editor_listen.js index 0707ec28..3eb74545 100644 --- a/_server/editor_listen.js +++ b/_server/editor_listen.js @@ -162,13 +162,15 @@ editor_listen_wrapper = function (editor) { editor.uifunctions.changeFloorId_func() editor.uifunctions.changeFloorSize_func() - editor.uifunctions.fixCtx_func() - + // editor.uifunctions.fixCtx_func() + editor.uifunctions.appendPic_func(); + /* editor.uifunctions.selectAppend_func() editor.uifunctions.selectFileBtn_func() editor.uifunctions.changeColorInput_func() editor.uifunctions.picClick_func() editor.uifunctions.appendConfirm_func() + */ editor.dom.editModeSelect.onchange = editor.mode.editModeSelect_onchange diff --git a/editor.html b/editor.html index 77b345f7..d088f2ca 100644 --- a/editor.html +++ b/editor.html @@ -76,6 +76,7 @@   自动注册

+

从V2.7.1开始，你可以直接将素材图片拖到对应的素材区，将自动追加并注册。同时，4x4的道具素材已支持快速追加一次16个。

色相: