拖动素材快速追加
This commit is contained in:
ckcz123
parent
fda4949403
commit
a6235117b2
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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(["<option value='", image, "'>", image, '</option>\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);
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -76,6 +76,7 @@
|
||||
<input id="quickAppendConfirm" type="button" value="快速追加"/>
|
||||
<span style="font-size: 13px"> 自动注册</span><input id="appendRegister" type="checkbox" checked/>
|
||||
</p>
|
||||
<p><small>从V2.7.1开始，你可以直接将素材图片拖到对应的素材区，将自动追加并注册。同时，4x4的道具素材已支持快速追加一次16个。</small></p>
|
||||
<p>
|
||||
色相:<input id='changeColorInput' type="range" min="0" max="12" step="1" value="0" list="huelists" style="width: 60%;margin-left: 3%;vertical-align: middle">
|
||||
<datalist id="huelists" style="display: none">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user