:x, :y, :o 翻转图片绘制
This commit is contained in:
parent
7b54f0d3d3
commit
b2b60b133e
@ -1498,23 +1498,26 @@ return code;
|
||||
*/;
|
||||
|
||||
showImage_s
|
||||
: '显示图片' '图片编号' Int '图片' EvalString BGNL?
|
||||
: '显示图片' '图片编号' Int '图片' EvalString '翻转' Reverse_List BGNL?
|
||||
'绘制的起点像素' 'x' PosString 'y' PosString '不透明度' Number '时间' Int '不等待执行完毕' Bool Newline
|
||||
|
||||
|
||||
/* showImage_s
|
||||
tooltip : showImage:显示图片
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=showImage%ef%bc%9a%e6%98%be%e7%a4%ba%e5%9b%be%e7%89%87
|
||||
default : [1,"bg.jpg","0","0",1,0,false]
|
||||
default : [1,"bg.jpg","null","0","0",1,0,false]
|
||||
colour : this.printColor
|
||||
if(Int_0<=0 || Int_0>50) throw new Error('图片编号在1~50之间');
|
||||
if (Reverse_List_0 && Reverse_List_0 != 'null') {
|
||||
Reverse_List_0 = ', "reverse": "' + Reverse_List_0 + '"';
|
||||
} else Reverse_List_0 = '';
|
||||
var async = Bool_0?', "async": true':'';
|
||||
var code = '{"type": "showImage", "code": '+Int_0+', "image": "'+EvalString_0+'", "loc": ['+PosString_0+','+PosString_1+'], "opacity": '+Number_0+', "time": '+Int_1+async+'},\n';
|
||||
var code = '{"type": "showImage", "code": '+Int_0+', "image": "'+EvalString_0+'"'+Reverse_List_0+', "loc": ['+PosString_0+','+PosString_1+'], "opacity": '+Number_0+', "time": '+Int_1+async+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
showImage_1_s
|
||||
: '显示图片' '图片编号' Int '图片' EvalString BGNL?
|
||||
: '显示图片' '图片编号' Int '图片' EvalString '翻转' Reverse_List BGNL?
|
||||
'裁剪的起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? '不透明度' Number BGNL?
|
||||
'绘制的起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? '时间' Int '不等待执行完毕' Bool Newline
|
||||
|
||||
@ -1522,11 +1525,14 @@ showImage_1_s
|
||||
/* showImage_1_s
|
||||
tooltip : showImage_1:显示图片
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=showImage%ef%bc%9a%e6%98%be%e7%a4%ba%e5%9b%be%e7%89%87
|
||||
default : [1,"bg.jpg","0","0","","",1,"0","0","","",0,false]
|
||||
default : [1,"bg.jpg","null","0","0","","",1,"0","0","","",0,false]
|
||||
colour : this.printColor
|
||||
if(Int_0<=0 || Int_0>50) throw new Error('图片编号在1~50之间');
|
||||
if (Reverse_List_0 && Reverse_List_0 != 'null') {
|
||||
Reverse_List_0 = ', "reverse": "' + Reverse_List_0 + '"';
|
||||
} else Reverse_List_0 = '';
|
||||
var async = Bool_0?', "async": true':'';
|
||||
var code = '{"type": "showImage", "code": '+Int_0+', "image": "'+EvalString_0+'", '+
|
||||
var code = '{"type": "showImage", "code": '+Int_0+', "image": "'+EvalString_0+'"'+Reverse_List_0+', '+
|
||||
'"sloc": ['+PosString_0+','+PosString_1+','+PosString_2+','+PosString_3+'], '+
|
||||
'"loc": ['+PosString_4+','+PosString_5+','+PosString_6+','+PosString_7+'], '+
|
||||
'"opacity": '+Number_0+', "time": '+Int_1+async+'},\n';
|
||||
@ -2506,22 +2512,25 @@ return code;
|
||||
|
||||
|
||||
drawImage_s
|
||||
: '绘制图片' EvalString '起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? Newline
|
||||
: '绘制图片' EvalString '翻转' Reverse_List '起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? Newline
|
||||
|
||||
|
||||
/* drawImage_s
|
||||
tooltip : drawImage:绘制图片
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawImage%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9b%be%e7%89%87
|
||||
default : ["bg.jpg","0","0","",""]
|
||||
default : ["bg.jpg","null","0","0","",""]
|
||||
colour : this.subColor
|
||||
if (Reverse_List_0 && Reverse_List_0 != 'null') {
|
||||
Reverse_List_0 = ', "reverse": "' + Reverse_List_0 + '"';
|
||||
} else Reverse_List_0 = '';
|
||||
PosString_2 = PosString_2 ? (', "w": '+PosString_2) : '';
|
||||
PosString_3 = PosString_3 ? (', "h": '+PosString_3) : '';
|
||||
var code = '{"type": "drawImage", "image": "'+EvalString_0+'", "x": '+PosString_0+', "y": '+PosString_1+PosString_2+PosString_3+'},\n';
|
||||
var code = '{"type": "drawImage", "image": "'+EvalString_0+'"'+Reverse_List_0+', "x": '+PosString_0+', "y": '+PosString_1+PosString_2+PosString_3+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawImage_1_s
|
||||
: '绘制图片' EvalString '裁剪的起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString BGNL?
|
||||
: '绘制图片' EvalString '翻转' Reverse_List '裁剪的起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString BGNL?
|
||||
'绘制的起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString Newline
|
||||
|
||||
|
||||
@ -2530,7 +2539,10 @@ tooltip : drawImage:绘制图片
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawImage%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9b%be%e7%89%87
|
||||
default : ["bg.jpg","0","0","32","32","0","0","32","32"]
|
||||
colour : this.subColor
|
||||
var code = '{"type": "drawImage", "image": "'+EvalString_0+'"'+
|
||||
if (Reverse_List_0 && Reverse_List_0 != 'null') {
|
||||
Reverse_List_0 = ', "reverse": "' + Reverse_List_0 + '"';
|
||||
} else Reverse_List_0 = '';
|
||||
var code = '{"type": "drawImage", "image": "'+EvalString_0+'"'+Reverse_List_0+
|
||||
', "x": '+PosString_0+', "y": '+PosString_1+', "w": '+PosString_2+', "h": '+PosString_3+
|
||||
', "x1": '+PosString_4+', "y1": '+PosString_5+', "w1": '+PosString_6+', "h1": '+PosString_7+'},\n';
|
||||
return code;
|
||||
@ -2866,6 +2878,10 @@ TextBaseline_List
|
||||
: '不改变'|'顶部'|'悬挂'|'居中'|'标准值'|'ideographic'|'底部'
|
||||
/*TextBaseline_List ['null','top','hanging','middle','alphabetic','ideographic','bottom']*/;
|
||||
|
||||
Reverse_List
|
||||
: '不改变'|'左右翻转'|'上下翻转'|'中心翻转'
|
||||
/*Reverse_List ['null',':x',':y',':o']*/;
|
||||
|
||||
ShopUse_List
|
||||
: '金币' | '经验'
|
||||
/*ShopUse_List ['money','exp']*/;
|
||||
|
||||
@ -63,9 +63,9 @@ ActionParser.prototype.parse = function (obj,type) {
|
||||
var buildEquip = function (obj) {
|
||||
obj = obj || {};
|
||||
var text_choices = null;
|
||||
var knownKeys = MotaActionBlocks.equipKnown.json.args0[0].options.map(function (one) {return one[1];})
|
||||
var knownEquipListKeys = MotaActionBlocks.equipKnown.json.args0[0].options.map(function (one) {return one[1];})
|
||||
Object.keys(obj).sort().forEach(function (key) {
|
||||
var one = knownKeys.indexOf(key) >= 0 ? 'equipKnown' : 'equipUnknown';
|
||||
var one = knownEquipListKeys.indexOf(key) >= 0 ? 'equipKnown' : 'equipUnknown';
|
||||
text_choices = MotaActionBlocks[one].xmlText([
|
||||
key, obj.key, text_choices
|
||||
]);
|
||||
@ -385,13 +385,13 @@ ActionParser.prototype.parseAction = function() {
|
||||
data.loc=data.loc||['','']
|
||||
if (data.sloc) {
|
||||
this.next = MotaActionBlocks['showImage_1_s'].xmlText([
|
||||
data.code,data.image||data.name,data.sloc[0],data.sloc[1],data.sloc[2],data.sloc[3],data.opacity,
|
||||
data.code,data.image||data.name,data.reverse,data.sloc[0],data.sloc[1],data.sloc[2],data.sloc[3],data.opacity,
|
||||
data.loc[0],data.loc[1],data.loc[2],data.loc[3],data.time||0,data.async||false,this.next
|
||||
]);
|
||||
}
|
||||
else {
|
||||
this.next = MotaActionBlocks['showImage_s'].xmlText([
|
||||
data.code,data.image||data.name,data.loc[0],data.loc[1],data.opacity,data.time||0,data.async||false,this.next]);
|
||||
data.code,data.image||data.name,data.reverse,data.loc[0],data.loc[1],data.opacity,data.time||0,data.async||false,this.next]);
|
||||
}
|
||||
break;
|
||||
case "hideImage": // 清除图片
|
||||
@ -837,12 +837,12 @@ ActionParser.prototype.parseAction = function() {
|
||||
case "drawImage": // 绘制图片
|
||||
if (data.x1 != null && data.y1 != null && data.w1 != null && data.h1 != null) {
|
||||
this.next = MotaActionBlocks['drawImage_1_s'].xmlText([
|
||||
data.image, data.x, data.y, data.w, data.h, data.x1, data.y1, data.w1, data.h1, this.next
|
||||
data.image, data.reverse, data.x, data.y, data.w, data.h, data.x1, data.y1, data.w1, data.h1, this.next
|
||||
]);
|
||||
}
|
||||
else {
|
||||
this.next = MotaActionBlocks['drawImage_s'].xmlText([
|
||||
data.image, data.x, data.y, data.w, data.h, this.next
|
||||
data.image, data.reverse, data.x, data.y, data.w, data.h, this.next
|
||||
]);
|
||||
}
|
||||
break;
|
||||
|
||||
@ -393,7 +393,7 @@ var comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
|
||||
"canFlyTo": {
|
||||
"_leaf": true,
|
||||
"_type": "checkbox",
|
||||
"_docs": "可飞",
|
||||
"_docs": "可楼传",
|
||||
"_data": "该楼能否被楼传器飞到(不能的话在该楼也不允许使用楼传器)"
|
||||
},
|
||||
"canUseQuickShop": {
|
||||
|
||||
@ -260,7 +260,7 @@ control.prototype._animationFrame_weather_fog = function () {
|
||||
var w = core.__PIXELS__, h = core.__PIXELS__;
|
||||
core.setAlpha('weather', 0.5);
|
||||
core.animateFrame.weather.nodes.forEach(function (p) {
|
||||
ctx.drawImage(core.animateFrame.weather.fog, p.x - ox, p.y - oy, w, h);
|
||||
core.drawImage(ctx, core.animateFrame.weather.fog, p.x - ox, p.y - oy, w, h);
|
||||
p.x += p.xs;
|
||||
p.y += p.ys;
|
||||
if (p.x > core.bigmap.width*32 - w/2) {
|
||||
@ -2515,10 +2515,10 @@ control.prototype.updateHeroIcon = function (name) {
|
||||
var ratio = Math.min(w / h, 1), width = 32 * ratio, left = 16 - width/2;
|
||||
|
||||
var canvas = document.createElement("canvas");
|
||||
var context = canvas.getContext("2d");
|
||||
var ctx = canvas.getContext("2d");
|
||||
canvas.width = 32;
|
||||
canvas.height = 32;
|
||||
context.drawImage(image, 0, 0, w, h, left, 0, width, 32);
|
||||
core.drawImage(ctx, image, 0, 0, w, h, left, 0, width, 32);
|
||||
|
||||
core.statusBar.image.name.src = canvas.toDataURL("image/png");
|
||||
}
|
||||
|
||||
@ -1455,7 +1455,7 @@ events.prototype._action_changePos = function (data, x, y, prefix) {
|
||||
events.prototype._action_showImage = function (data, x, y, prefix) {
|
||||
if (core.isReplaying()) data.time = 0;
|
||||
this.__action_doAsyncFunc(data.async || data.time == 0, core.showImage,
|
||||
data.code, data.image, data.sloc, data.loc, data.opacity, data.time);
|
||||
data.code, data.image + (data.reverse || ''), data.sloc, data.loc, data.opacity, data.time);
|
||||
}
|
||||
|
||||
events.prototype._precompile_showImage = function (data) {
|
||||
@ -2651,7 +2651,12 @@ events.prototype.closeDoor = function (x, y, id, callback) {
|
||||
|
||||
////// 显示图片 //////
|
||||
events.prototype.showImage = function (code, image, sloc, loc, opacityVal, time, callback) {
|
||||
var imageName = null;
|
||||
if (typeof image == 'string') {
|
||||
imageName = image;
|
||||
if (image.endsWith(':x') || image.endsWith(':y') || image.endsWith(':o')) {
|
||||
image = image.substring(0, image.length - 2);
|
||||
}
|
||||
image = core.getMappedName(image);
|
||||
image = core.material.images.images[image];
|
||||
}
|
||||
@ -2673,7 +2678,7 @@ events.prototype.showImage = function (code, image, sloc, loc, opacityVal, time,
|
||||
time = time || 0;
|
||||
var name = "image" + zIndex;
|
||||
var ctx = core.createCanvas(name, x, y, w, h, zIndex);
|
||||
ctx.drawImage(image, sx, sy, sw, sh, 0, 0, w, h);
|
||||
core.drawImage(ctx, imageName == null ? image : imageName, sx, sy, sw, sh, 0, 0, w, h);
|
||||
if (time == 0) {
|
||||
core.setOpacity(name, opacityVal);
|
||||
if (callback) callback();
|
||||
|
||||
37
libs/maps.js
37
libs/maps.js
@ -815,7 +815,7 @@ maps.prototype._drawBg_drawBackground = function (floorId, ctx) {
|
||||
if (groundInfo != null) {
|
||||
for (var i = 0; i < width; i++) {
|
||||
for (var j = 0; j < height; j++) {
|
||||
ctx.drawImage(groundInfo.image, 32 * groundInfo.posX, groundInfo.height * groundInfo.posY, 32, 32, i * 32, j * 32, 32, 32);
|
||||
core.drawImage(ctx, groundInfo.image, 32 * groundInfo.posX, groundInfo.height * groundInfo.posY, 32, 32, i * 32, j * 32, 32, 32);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -899,6 +899,9 @@ maps.prototype._drawFloorImages = function (floorId, ctx, name, images, currStat
|
||||
images.forEach(function (t) {
|
||||
if (typeof t == 'string') t = [0, 0, t];
|
||||
var dx = parseInt(t[0]), dy = parseInt(t[1]), imageName = t[2], frame = core.clamp(parseInt(t[4]), 1, 8);
|
||||
if (imageName.endsWith(':x') || imageName.endsWith(':y') || imageName.endsWith(':o')) {
|
||||
imageName = imageName.substring(0, imageName.length - 2);
|
||||
}
|
||||
imageName = core.getMappedName(imageName);
|
||||
var image = core.material.images.images[imageName];
|
||||
if (redraw && frame == 1) return; // 不重绘
|
||||
@ -911,7 +914,7 @@ maps.prototype._drawFloorImages = function (floorId, ctx, name, images, currStat
|
||||
this._drawFloorImages_gif(image, dx, dy);
|
||||
return;
|
||||
}
|
||||
core.maps._drawFloorImage(ctx, name, t[3], image, offsetX, width, dx, dy, redraw);
|
||||
core.maps._drawFloorImage(ctx, name, t[3], t[2], image, offsetX, width, dx, dy, redraw);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -941,11 +944,11 @@ maps.prototype._drawFloorImages_gif = function (image, dx, dy) {
|
||||
return;
|
||||
}
|
||||
|
||||
maps.prototype._drawFloorImage = function (ctx, name, type, image, offsetX, width, dx, dy, redraw) {
|
||||
maps.prototype._drawFloorImage = function (ctx, name, type, imageName, image, offsetX, width, dx, dy, redraw) {
|
||||
var height = image.height;
|
||||
var _draw = function () {
|
||||
if (redraw) core.clearMap(ctx, dx, dy, width, height);
|
||||
core.drawImage(ctx, image, offsetX, 0, width, height, dx, dy, width, height);
|
||||
core.drawImage(ctx, imageName, offsetX, 0, width, height, dx, dy, width, height);
|
||||
}
|
||||
if (!type) {
|
||||
if (name != 'bg') return;
|
||||
@ -958,11 +961,11 @@ maps.prototype._drawFloorImage = function (ctx, name, type, image, offsetX, widt
|
||||
if (type == 2) {
|
||||
if (name == 'bg') {
|
||||
if (redraw) core.clearMap(ctx, dx, dy + height - 32, width, 32);
|
||||
core.drawImage('bg', image, offsetX, height - 32, width, 32, dx, dy + height - 32, width, 32);
|
||||
core.drawImage('bg', imageName, offsetX, height - 32, width, 32, dx, dy + height - 32, width, 32);
|
||||
}
|
||||
else if (name == 'fg') {
|
||||
if (redraw) core.clearMap(ctx, dx, dy, width, height - 32);
|
||||
core.drawImage('fg', image, offsetX, 0, width, height - 32, dx, dy, width, height - 32);
|
||||
core.drawImage('fg', imageName, offsetX, 0, width, height - 32, dx, dy, width, height - 32);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@ -1035,7 +1038,7 @@ maps.prototype._drawAutotile_render = function(canvas, x, y, size, autotile, sta
|
||||
];
|
||||
var data = indexData[index];
|
||||
if(index>=16){ // 拐角直接绘制
|
||||
canvas.drawImage(autotile, data[0][0], data[0][1], data[0][2], data[0][3], data[0][4], data[0][5], size/2, size/2);
|
||||
core.drawImage(canvas, autotile, data[0][0], data[0][1], data[0][2], data[0][3], data[0][4], data[0][5], size/2, size/2);
|
||||
}else{ // 非拐角要根据是否已经绘制进行切分后绘制
|
||||
this._drawAutotile_renderCut(canvas, autotile, x, y, size, data, done);
|
||||
}
|
||||
@ -1076,7 +1079,7 @@ maps.prototype._drawAutotile_renderCut = function(canvas, autotile, x, y, size,
|
||||
}
|
||||
for(var i = 0; i<4; i++){
|
||||
var dt = drawData[i];if(!dt)continue;
|
||||
canvas.drawImage(autotile, dt[0], dt[1], 16, 16, x + (i % 2) * size / 2, y + parseInt(i / 2) * size / 2, size/2, size/2);
|
||||
core.drawImage(canvas, autotile, dt[0], dt[1], 16, 16, x + (i % 2) * size / 2, y + parseInt(i / 2) * size / 2, size/2, size/2);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1086,7 +1089,7 @@ maps.prototype._drawAutotile_drawBlockByIndex = function (ctx, dx, dy, autotileI
|
||||
var sx = 16 * ((index - 1) % 6), sy = 16 * (~~((index - 1) / 6));
|
||||
status = status || 0;
|
||||
status %= parseInt(autotileImg.width / 96);
|
||||
ctx.drawImage(autotileImg, sx + 96 * status, sy, 16, 16, dx, dy, size / 2, size / 2);
|
||||
core.drawImage(ctx, autotileImg, sx + 96 * status, sy, 16, 16, dx, dy, size / 2, size / 2);
|
||||
}
|
||||
|
||||
maps.prototype._drawAutotile_getAutotileAroundId = function (currId, x, y, mapArr) {
|
||||
@ -1157,16 +1160,16 @@ maps.prototype._makeAutotileEdges = function () {
|
||||
var n = core.maps.getNumberById(t);
|
||||
core.material.autotileEdges[n] = [n];
|
||||
|
||||
ctx.clearRect(0, 0, 32, 32);
|
||||
ctx.drawImage(core.material.images.autotile[t], 0, 0, 32, 32, 0, 0, 32, 32);
|
||||
core.clearMap(ctx, 0, 0, 32, 32);
|
||||
core.drawImage(ctx, core.material.images.autotile[t], 0, 0, 32, 32, 0, 0, 32, 32);
|
||||
var data = canvas.toDataURL("image/png");
|
||||
|
||||
autotileIds.forEach(function (t2) {
|
||||
if (t == t2) return;
|
||||
var n2 = core.maps.getNumberById(t2);
|
||||
|
||||
ctx.clearRect(0, 0, 32, 32);
|
||||
ctx.drawImage(core.material.images.autotile[t2], 32, 0, 32, 32, 0, 0, 32, 32);
|
||||
core.clearMap(ctx, 0, 0, 32, 32);
|
||||
core.drawImage(ctx, core.material.images.autotile[t2], 32, 0, 32, 32, 0, 0, 32, 32);
|
||||
if (data == canvas.toDataURL("image/png")) {
|
||||
core.material.autotileEdges[n].push(n2);
|
||||
}
|
||||
@ -1229,7 +1232,7 @@ maps.prototype._drawThumbnail_realDrawTempCanvas = function (floorId, blocks, op
|
||||
options.heroIcon = core.getMappedName(options.heroIcon);
|
||||
var icon = core.material.icons.hero[options.heroLoc.direction];
|
||||
var height = core.material.images.images[options.heroIcon].height / 4;
|
||||
tempCanvas.drawImage(core.material.images.images[options.heroIcon], icon.stop * 32, icon.loc * height, 32, height,
|
||||
core.drawImage(tempCanvas, core.material.images.images[options.heroIcon], icon.stop * 32, icon.loc * height, 32, height,
|
||||
32 * options.heroLoc.x, 32 * options.heroLoc.y + 32 - height, 32, height);
|
||||
}
|
||||
// 缩略图:前景
|
||||
@ -1259,21 +1262,21 @@ maps.prototype._drawThumbnail_drawToTarget = function (floorId, toDraw) {
|
||||
var side = (size - realWidth) / 2;
|
||||
core.fillRect(ctx, x, y, side, realHeight, '#000000');
|
||||
core.fillRect(ctx, x + size - side, y, side, realHeight);
|
||||
ctx.drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, x + side, y, realWidth, realHeight);
|
||||
core.drawImage(ctx, tempCanvas.canvas, 0, 0, tempWidth, tempHeight, x + side, y, realWidth, realHeight);
|
||||
}
|
||||
else {
|
||||
var realWidth = size, realHeight = realWidth * tempHeight / tempWidth;
|
||||
var side = (size - realHeight) / 2;
|
||||
core.fillRect(ctx, x, y, realWidth, side, '#000000');
|
||||
core.fillRect(ctx, x, y + size - side, realWidth, side);
|
||||
ctx.drawImage(tempCanvas.canvas, 0, 0, tempWidth, tempHeight, x, y + side, realWidth, realHeight);
|
||||
core.drawImage(ctx, tempCanvas.canvas, 0, 0, tempWidth, tempHeight, x, y + side, realWidth, realHeight);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// 只绘制可见窗口
|
||||
var offsetX = core.clamp(centerX - core.__HALF_SIZE__, 0, width - core.__SIZE__),
|
||||
offsetY = core.clamp(centerY - core.__HALF_SIZE__, 0, height - core.__SIZE__);
|
||||
ctx.drawImage(tempCanvas.canvas, offsetX * 32, offsetY * 32, core.__PIXELS__, core.__PIXELS__, x, y, size, size);
|
||||
core.drawImage(ctx, tempCanvas.canvas, offsetX * 32, offsetY * 32, core.__PIXELS__, core.__PIXELS__, x, y, size, size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
116
libs/ui.js
116
libs/ui.js
@ -507,32 +507,61 @@ ui.prototype.splitLines = function (name, text, maxWidth, font) {
|
||||
|
||||
////// 绘制一张图片 //////
|
||||
ui.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) {
|
||||
// 检测文件名以 :x, :y, :o 结尾,表示左右翻转,上下翻转和中心翻转
|
||||
var ctx = this.getContextByName(name);
|
||||
if (!ctx) return;
|
||||
var reverse = null;
|
||||
if (typeof image == 'string') {
|
||||
if (image.endsWith(':x') || image.endsWith(':y') || image.endsWith(':o')) {
|
||||
reverse = image.charAt(image.length - 1);
|
||||
image = image.substring(0, image.length - 2);
|
||||
}
|
||||
image = core.getMappedName(image);
|
||||
image = core.material.images.images[image];
|
||||
if (!image) return;
|
||||
if (!image || !(image instanceof Image)) return;
|
||||
}
|
||||
|
||||
var scale = {
|
||||
'x': [-1, 1],
|
||||
'y': [1, -1],
|
||||
'o': [-1, -1]
|
||||
};
|
||||
|
||||
// 只能接受2, 4, 8个参数
|
||||
if (x != null && y != null) {
|
||||
if (w != null && h != null) {
|
||||
if (x1 != null && y1 != null && w1 != null && h1 != null) {
|
||||
if (w == null || h == null) {
|
||||
// 两个参数变成四个参数
|
||||
w = image.width;
|
||||
h = image.height;
|
||||
}
|
||||
if (x1 != null && y1 != null && w1 != null && h1 != null) {
|
||||
if (reverse == null) {
|
||||
ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1);
|
||||
return;
|
||||
} else {
|
||||
ctx.save();
|
||||
ctx.translate(x1 + w1 / 2, y1 + h1 / 2);
|
||||
ctx.scale(scale[reverse][0], scale[reverse][1]);
|
||||
ctx.drawImage(image, x, y, w, h, -w1 / 2, -h1 / 2, w1, h1);
|
||||
ctx.restore();
|
||||
}
|
||||
ctx.drawImage(image, x, y, w, h);
|
||||
return;
|
||||
}
|
||||
ctx.drawImage(image, x, y);
|
||||
if (reverse == null) {
|
||||
ctx.drawImage(image, x, y, w, h);
|
||||
} else {
|
||||
ctx.save();
|
||||
ctx.translate(x + w / 2, y + h / 2);
|
||||
ctx.scale(scale[reverse][0], scale[reverse][1]);
|
||||
ctx.drawImage(image, -w / 2, -h / 2, w, h);
|
||||
ctx.restore();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
ui.prototype._uievent_drawImage = function (data) {
|
||||
this._createUIEvent();
|
||||
this.drawImage('uievent', data.image, core.calValue(data.x), core.calValue(data.y), core.calValue(data.w), core.calValue(data.h),
|
||||
this.drawImage('uievent', data.image + (data.reverse || ''), core.calValue(data.x), core.calValue(data.y), core.calValue(data.w), core.calValue(data.h),
|
||||
core.calValue(data.x1), core.calValue(data.y1), core.calValue(data.w1), core.calValue(data.h1));
|
||||
}
|
||||
|
||||
@ -547,7 +576,7 @@ ui.prototype.drawIcon = function (name, id, x, y, w, h, frame) {
|
||||
info = {image: core.statusBar.icons[id], posX: 0, posY: 0, height: 32};
|
||||
else return;
|
||||
}
|
||||
ctx.drawImage(info.image, 32 * (info.posX + frame), info.height * info.posY, 32, info.height, x, y, w || 32, h || info.height);
|
||||
core.drawImage(ctx, info.image, 32 * (info.posX + frame), info.height * info.posY, 32, info.height, x, y, w || 32, h || info.height);
|
||||
}
|
||||
|
||||
ui.prototype._uievent_drawIcon = function (data) {
|
||||
@ -792,64 +821,53 @@ ui.prototype._clearUIEventSelector = function (codes) {
|
||||
ui.prototype._drawSelector = function (ctx, background, w, h, left, top) {
|
||||
left = left || 0;
|
||||
top = top || 0;
|
||||
ctx = this.getContextByName(ctx);
|
||||
if (!ctx) return;
|
||||
if (typeof background == 'string')
|
||||
background = core.material.images.images[background];
|
||||
if (!(background instanceof Image)) return;
|
||||
// back
|
||||
ctx.drawImage(background, 130, 66, 28, 28, left+2, top+2, w-4, h-4);
|
||||
core.drawImage(ctx, background, 130, 66, 28, 28, left+2, top+2, w-4, h-4);
|
||||
// corner
|
||||
ctx.drawImage(background, 128, 64, 2, 2, left, top, 2, 2);
|
||||
ctx.drawImage(background, 158, 64, 2, 2, left+w-2, top, 2, 2);
|
||||
ctx.drawImage(background, 128, 94, 2, 2, left, top+h-2, 2, 2);
|
||||
ctx.drawImage(background, 158, 94, 2, 2, left+w-2, top+h-2, 2, 2);
|
||||
core.drawImage(ctx, background, 128, 64, 2, 2, left, top, 2, 2);
|
||||
core.drawImage(ctx, background, 158, 64, 2, 2, left+w-2, top, 2, 2);
|
||||
core.drawImage(ctx, background, 128, 94, 2, 2, left, top+h-2, 2, 2);
|
||||
core.drawImage(ctx, background, 158, 94, 2, 2, left+w-2, top+h-2, 2, 2);
|
||||
// border
|
||||
ctx.drawImage(background, 130, 64, 28, 2, left+2, top, w-4, 2);
|
||||
ctx.drawImage(background, 130, 94, 28, 2, left+2, top+h-2, w-4, 2);
|
||||
ctx.drawImage(background, 128, 66, 2, 28, left, top+2, 2,h-4);
|
||||
ctx.drawImage(background, 158, 66, 2, 28, left+w-2, top+2, 2,h-4);
|
||||
core.drawImage(ctx, background, 130, 64, 28, 2, left+2, top, w-4, 2);
|
||||
core.drawImage(ctx, background, 130, 94, 28, 2, left+2, top+h-2, w-4, 2);
|
||||
core.drawImage(ctx, background, 128, 66, 2, 28, left, top+2, 2,h-4);
|
||||
core.drawImage(ctx, background, 158, 66, 2, 28, left+w-2, top+2, 2,h-4);
|
||||
}
|
||||
|
||||
////// 绘制 WindowSkin
|
||||
ui.prototype.drawWindowSkin = function(background, ctx, x, y, w, h, direction, px, py) {
|
||||
background = background || core.status.textAttribute.background;
|
||||
if (typeof background == 'string') {
|
||||
background = core.getMappedName(background);
|
||||
background = core.material.images.images[background];
|
||||
}
|
||||
// 仿RM窗口皮肤 ↓
|
||||
var dstImage = core.getContextByName(ctx);
|
||||
if (!dstImage) return;
|
||||
// 绘制背景
|
||||
dstImage.drawImage(background, 0, 0, 128, 128, x+2, y+2, w-4, h-4);
|
||||
core.drawImage(ctx, background, 0, 0, 128, 128, x+2, y+2, w-4, h-4);
|
||||
// 绘制边框
|
||||
// 上方
|
||||
dstImage.drawImage(background, 128, 0, 16, 16, x, y, 16, 16);
|
||||
core.drawImage(ctx, background, 128, 0, 16, 16, x, y, 16, 16);
|
||||
for (var dx = 0; dx < w - 64; dx += 32) {
|
||||
dstImage.drawImage(background, 144, 0, 32, 16,x+dx+16, y, 32, 16);
|
||||
dstImage.drawImage(background, 144,48, 32, 16,x+dx+16, y+h-16, 32, 16);
|
||||
core.drawImage(ctx, background, 144, 0, 32, 16,x+dx+16, y, 32, 16);
|
||||
core.drawImage(ctx, background, 144,48, 32, 16,x+dx+16, y+h-16, 32, 16);
|
||||
}
|
||||
dstImage.drawImage(background, 144, 0,w-dx-32, 16,x+dx+16, y,w-dx-32, 16);
|
||||
dstImage.drawImage(background, 144,48,w-dx-32, 16,x+dx+16, y+h-16,w-dx-32, 16);
|
||||
dstImage.drawImage(background, 176, 0, 16, 16, x+w-16, y, 16, 16);
|
||||
core.drawImage(ctx, background, 144, 0,w-dx-32, 16,x+dx+16, y,w-dx-32, 16);
|
||||
core.drawImage(ctx, background, 144,48,w-dx-32, 16,x+dx+16, y+h-16,w-dx-32, 16);
|
||||
core.drawImage(ctx, background, 176, 0, 16, 16, x+w-16, y, 16, 16);
|
||||
// 左右
|
||||
for (var dy = 0; dy < h - 64; dy += 32) {
|
||||
dstImage.drawImage(background, 128,16, 16, 32, x,y+dy+16, 16, 32);
|
||||
dstImage.drawImage(background, 176,16, 16, 32, x+w-16,y+dy+16, 16, 32);
|
||||
core.drawImage(ctx, background, 128,16, 16, 32, x,y+dy+16, 16, 32);
|
||||
core.drawImage(ctx, background, 176,16, 16, 32, x+w-16,y+dy+16, 16, 32);
|
||||
}
|
||||
dstImage.drawImage(background, 128,16, 16,h-dy-32, x,y+dy+16, 16,h-dy-32);
|
||||
dstImage.drawImage(background, 176,16, 16,h-dy-32, x+w-16,y+dy+16, 16,h-dy-32);
|
||||
core.drawImage(ctx, background, 128,16, 16,h-dy-32, x,y+dy+16, 16,h-dy-32);
|
||||
core.drawImage(ctx, background, 176,16, 16,h-dy-32, x+w-16,y+dy+16, 16,h-dy-32);
|
||||
// 下方
|
||||
dstImage.drawImage(background, 128,48, 16, 16, x, y+h-16, 16, 16);
|
||||
dstImage.drawImage(background, 176,48, 16, 16, x+w-16, y+h-16, 16, 16);
|
||||
core.drawImage(ctx, background, 128,48, 16, 16, x, y+h-16, 16, 16);
|
||||
core.drawImage(ctx, background, 176,48, 16, 16, x+w-16, y+h-16, 16, 16);
|
||||
|
||||
// arrow
|
||||
if(px != null && py != null){
|
||||
if(direction == 'up'){
|
||||
dstImage.drawImage(background,128,96,32,32,px,y+h-3,32,32);
|
||||
core.drawImage(ctx, background,128,96,32,32,px,y+h-3,32,32);
|
||||
}else if(direction == 'down') {
|
||||
dstImage.drawImage(background,160,96,32,32,px,y-29,32,32);
|
||||
core.drawImage(ctx, background,160,96,32,32,px,y-29,32,32);
|
||||
}
|
||||
}
|
||||
// 仿RM窗口皮肤 ↑
|
||||
@ -1045,7 +1063,7 @@ ui.prototype._drawTextContent_draw = function (ctx, tempCtx, content, config) {
|
||||
if (config.index >= config.blocks.length) return false;
|
||||
var block = config.blocks[config.index++];
|
||||
if (block != null) {
|
||||
ctx.drawImage(tempCtx.canvas, block.left, block.top, block.width, block.height,
|
||||
core.drawImage(ctx, tempCtx.canvas, block.left, block.top, block.width, block.height,
|
||||
config.left + block.left + block.marginLeft, config.top + block.top + block.marginTop,
|
||||
block.width, block.height);
|
||||
}
|
||||
@ -1283,18 +1301,14 @@ ui.prototype.drawTextBox = function(content, showAll) {
|
||||
ui.prototype._drawTextBox_drawImages = function (content) {
|
||||
return content.replace(/(\f|\\f)\[(.*?)]/g, function (text, sympol, str) {
|
||||
var ss = str.split(",");
|
||||
if (ss.length!=3 && ss.length!=5 && ss.length!=9) return "";
|
||||
ss[0] = core.getMappedName(ss[0]);
|
||||
var img = core.material.images.images[ss[0]];
|
||||
if (!img) return "";
|
||||
// 绘制
|
||||
if (ss.length==3)
|
||||
core.drawImage('ui', img, parseFloat(ss[1]), parseFloat(ss[2]));
|
||||
core.drawImage('ui', ss[0], parseFloat(ss[1]), parseFloat(ss[2]));
|
||||
else if (ss.length==5)
|
||||
core.drawImage('ui', img, 0, 0, img.width, img.height, parseFloat(ss[1]), parseFloat(ss[2]), parseFloat(ss[3]), parseFloat(ss[4]));
|
||||
core.drawImage('ui', ss[0], parseFloat(ss[1]), parseFloat(ss[2]), parseFloat(ss[3]), parseFloat(ss[4]));
|
||||
else if (ss.length==9 || ss.length==10) {
|
||||
if (ss.length==10) core.setAlpha('ui', parseFloat(ss[9]));
|
||||
core.drawImage('ui', img, parseFloat(ss[1]), parseFloat(ss[2]), parseFloat(ss[3]), parseFloat(ss[4]), parseFloat(ss[5]), parseFloat(ss[6]), parseFloat(ss[7]), parseFloat(ss[8]));
|
||||
core.drawImage('ui', ss[0], parseFloat(ss[1]), parseFloat(ss[2]), parseFloat(ss[3]), parseFloat(ss[4]), parseFloat(ss[5]), parseFloat(ss[6]), parseFloat(ss[7]), parseFloat(ss[8]));
|
||||
core.setAlpha('ui', 1);
|
||||
}
|
||||
return "";
|
||||
|
||||
@ -352,13 +352,13 @@ utils.prototype.splitImage = function (image, width, height) {
|
||||
width = width || 32;
|
||||
height = height || width;
|
||||
var canvas = document.createElement("canvas");
|
||||
var context = canvas.getContext("2d");
|
||||
var ctx = canvas.getContext("2d");
|
||||
var ans = [];
|
||||
for (var j = 0; j < image.height; j += height) {
|
||||
for (var i = 0; i < image.width; i += width) {
|
||||
var w = Math.min(width, image.width - i), h = Math.min(height, image.height - j);
|
||||
canvas.width = w; canvas.height = h;
|
||||
context.drawImage(image, i, j, w, h, 0, 0, w, h);
|
||||
core.drawImage(ctx, image, i, j, w, h, 0, 0, w, h);
|
||||
var img = new Image();
|
||||
img.src = canvas.toDataURL("image/png");
|
||||
ans.push(img);
|
||||
|
||||
@ -1360,7 +1360,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
|
||||
// 绘制下一个数据
|
||||
var name = toDraw[index];
|
||||
// 图片大小25x25
|
||||
ctx.drawImage(core.statusBar.icons[name], leftOffset, topOffset, 25, 25);
|
||||
core.drawImage(ctx, core.statusBar.icons[name], leftOffset, topOffset, 25, 25);
|
||||
// 文字内容
|
||||
var text = (core.statusBar[name] || {}).innerText || " ";
|
||||
// 斜体判定:如果不是纯数字和字母,斜体会非常难看,需要取消
|
||||
|
||||
@ -59,11 +59,11 @@
|
||||
(已完成!) 右边框输入完后解析按钮高亮
|
||||
(已完成!) 32x48的门
|
||||
(已完成!) 难度分歧的图块(颜色,含SL界面)
|
||||
装备同时加属性和比例
|
||||
(已完成!) 装备同时加属性和比例
|
||||
(已完成!) removeMap和resumeMap
|
||||
右键图块选择复制/粘贴事件
|
||||
showImage, drawImage等加上对称选项
|
||||
|
||||
(已完成!) showImage, drawImage,立绘等加上对称选项
|
||||
更多的图块blockly化
|
||||
|
||||
-------------
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user