Сообщение от j0hnik
|
|
уверен что можно оптимизировать.
|
Нe получится: Файл большой и бинарный…
Вот, кстати, что я делаю…
<html>
<head>
<meta http-equiv=refresh content='3000' />
<script>
CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) {
if(typeof stroke == "undefined")
stroke = true;
if(typeof radius === "undefined")
radius = 5;
if(typeof radius === "number")
radius = {tl: radius, tr: radius, br: radius, bl: radius};
else {
var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
for(var side in defaultRadius) {
radius[side] = radius[side] || defaultRadius[side];
}
}
this.beginPath();
this.moveTo(x + radius.tl, y);
this.lineTo(x + width - radius.tr, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
this.lineTo(x + width, y + height - radius.br);
this.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
this.lineTo(x + radius.bl, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
this.lineTo(x, y + radius.tl);
this.quadraticCurveTo(x, y, x + radius.tl, y);
this.closePath();
if(fill)
this.fill();
if(stroke)
this.stroke();
}
//////////////////////////////////////////////////////////////////////////////
var aButtons= [
"~ `Ё ! 11 ¡ @\" 2 2 #№ 3 3 $;£4 ¤ % 5 € ^ :6 ¼ &? 7 ½ * 8₽¾ ( 9 ‘ ) 0 ’ _ …- ¥ + ÷= × |\\¦\\/¬",
"Q Й W Ц E У R К® Tѐ Е Y Н U Г I Ш O Щ P З { [Х« } ]Ъ»",
"A Ф S Ы D В F А G П H Р J О K Л L Д : °;Ж¶ \" ¨'Э´",
"Z Я X Ч C С© V М Bѝ И N Т M Ь < ,Б > .Ю ?. /,¿"
];
//////////////////////////////////////////////////////////////////////////////
var hButton = null;
var hCanvas = null;
var hCtx = null;
function DrawButton(mark, x, y) {
var size = 124.7;
var thick = 12.5;
var border = 3.5;
var radius = 3.05;
var back = 1.75;
var h, l, m, r, v, w;
hCtx.fillStyle = "rgb(90, 90, 90)";
hCtx.beginPath();
hCtx.moveTo(x + size - back, y + back);
hCtx.lineTo(x + back, y + back);
hCtx.lineTo(x + back, y + size - back);
hCtx.closePath();
hCtx.fill();
hCtx.fillStyle = "rgb(31, 31, 31)";
hCtx.beginPath();
hCtx.moveTo(x + size - back, y + back);
hCtx.lineTo(x + size - back, y + size - back);
hCtx.lineTo(x + back, y + size - back);
hCtx.closePath();
hCtx.fill();
hCtx.fillStyle = "rgb(68, 68, 68)";
hCtx.strokeStyle = "rgb(7, 7, 7)";
hCtx.lineWidth = border;
hCtx.roundRect(x, y, size, size, radius * radius, false, true);
hCtx.roundRect(x + thick, y + thick, size - 2 * thick, size - 2 * thick, radius, true, false);
if(typeof mark == "string") {
hCtx.font = "46px helvetica";
h = parseInt(hCtx.font, 10);
hCtx.fillStyle = "white";
hCtx.fillText(mark, x + (size - hCtx.measureText(mark).width) / 2, y + (size / 2 + h / 2));
} else {
v = border + thick;
w = (size - border - thick);
m = x + size / 2;
l = m - w / 3.69;
r = m + w / 2.9;
hCtx.fillStyle = "white";
hCtx.font = "46px helvetica";
h = parseInt(hCtx.font, 10);
s = mark[3]; hCtx.fillText(s, l - hCtx.measureText(s).width / 2, y + size / 2 + h / 1.125);
hCtx.font = "40px helvetica";
h = parseInt(hCtx.font, 10);
s = mark[0]; hCtx.fillText(s, l - hCtx.measureText(s).width / 2, y + size / 2 - h / 4);
hCtx.fillStyle = "red";
s = mark[1]; hCtx.fillText(s, m - hCtx.measureText(s).width / 2, y + size / 2 - h / 4);
s = mark[4]; hCtx.fillText(s, m - hCtx.measureText(s).width / 2, y + size / 2 + h / 1);
hCtx.font = "24px helvetica";
hCtx.fillStyle = "dodgerblue";
s = mark[5]; hCtx.fillText(s, r - hCtx.measureText(s).width / 2, y + size / 2 + h / 1);
h = parseInt(hCtx.font, 10);
s = mark[2]; hCtx.fillText(s, r - hCtx.measureText(s).width / 2, y + v + h - h / 4);
}
}
function main() {
hCanvas = document.getElementById("Draft");
hCtx = hCanvas.getContext("2d");
DrawButton("Esc", 56.5, 119);
DrawButton("F1", 340, 118);
var x = 56.5, y = 310.5;
aButtons[0].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
x = 252, y = 444;
aButtons[1].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
x = 315, y = 577.5;
aButtons[2].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
x = 386, y = 711;
aButtons[3].split(/\t/)
.forEach(function(c) {
DrawButton(c.split(""), x, y);
x += 133.35;
});
}
</script>
<olink rel="stylesheet" href="body.css">
<style>
body
{
background-image:url('http://pluspng.com/img-png/keypad-png-hd-file-bijoy-keyboard-png-3171.png');/*('keyboard-0.png');/*('keyboard_my.svg');*/
background-repeat:no-repeat;
background-position-left:99px;
background-color :black;
padding :0px 0px 0px 0px;
}
</style>
</head>
<body onload='setTimeout(main, 5000)'>
<canvas id=Draft width=2048 height=960></canvas>
</body>
Чтобы руками в графическом редакторе не перемаркировывать, написал скрипт…
Тем более, что в исходном изображении заметны свои
косяки местами.
Сейчас проблема в отрисовке клавиши «Enter» сто́ит. Она и нарисована как-то криво…
P.S.: Вообще-то, хочу разработать собственную раскладку…
А чтобы
Keyboard Layout Creator вслепую не маяться, хочу визуальную интерактивную модель построить алгоритмом, чтобы эстетически оценить её…