Использование преобразования приведет промежутки между чертежами, которые можно было бы считать, чтобы быть состыкованы. Это вызвано тем, что координаты чертежей используют плавающие точки, а не целые числа, а математика преобразования вызывает различия в выравнивании.
Возможно, ваше самое простое исправление состоит в том, чтобы слегка увеличить всю сцену на очень маленький размер, который скроет различия выравнивания. Даже + 2% обычно дают желаемый результат.
Вот ваш код переработан масштабироваться до 102% от первоначального размера.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'), \t
\t cellSize = 50,
\t pic = new Image(),
\t map =
\t [
\t \t [{x:5,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
\t \t [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
\t \t [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
\t \t [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
\t \t [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
\t \t [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
\t \t [{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
\t \t [{x:4,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1}]
\t ];
var scaleFix=1.02;
canvas.width = 16 * cellSize;
canvas.height = 16 * cellSize;
ctx.setTransform(1.00, -0.5, 1.00, 0.5, 0, 200);
pic.src = 'http://promodesign.kei.pl/cb/test/sprite.svg';
pic.onload = function() {
\t for (var j = 0 ; j < 8; j ++)
\t \t for (var i = 0; i < 8; i ++)
\t \t ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 50, 50, j*cellSize, i*cellSize, 50*scaleFix, 50*scaleFix);
\t var pic2 = new Image(); pic2.src = 'http://promodesign.kei.pl/cb/test/man.png';
\t pic2.onload = function() {
\t \t ctx.setTransform(1, 0, 0, 1, 0, 60);
\t \t ctx.drawImage(pic2, 150*scaleFix, 75*scaleFix);
\t }
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<h4>Content scaled to 102% to hide transformational gaps.</h4>
<canvas id="canvas" width=300 height=300></canvas>
[OOPS! Исправлено это Firefox. Я скоро вернусь с исправлением для исправления: -O]
Хорошо ... давайте попробуем это снова. Та же идея: увеличение до 102%, но на этот раз конвертировать .svg в .png для выгоды FireFox. Вы можете выполнять преобразование «на лету», рисуя svg на холст и используя этот холст в качестве источника изображения вместо pic (да, вы можете drawImage одно холст на другой холст). Вы также можете сделать преобразование в .svg и доставить .png вместо .svg.
Пример: Преобразование SVG в PNG на лету на стороне клиента:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'),
cellSize = 50,
pic = new Image(),
map =
[
[{x:5,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
[{x:3,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1}],
[{x:4,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1},{x:2,y:1}]
];
var scaleFix=1.02;
canvas.width = 16 * cellSize;
canvas.height = 16 * cellSize;
ctx.setTransform(1.00, -0.5, 1.00, 0.5, 0, 200);
var pic2=new Image();
pic2.onload=start;
pic2.src='http://promodesign.kei.pl/cb/test/man.png';
var pic;
var img=new Image();
img.onload=start;
img.src='http://promodesign.kei.pl/cb/test/sprite.svg';
var imgCount=2;
function start(){
if(--imgCount>0){return;}
pic=document.createElement('canvas');
pic.width=img.width;
pic.height=img.height;
pic.getContext('2d').drawImage(img,0,0);
drawScene();
document.body.appendChild(pic);
}
function drawScene(){
for (var j = 0 ; j < 8; j ++)
for (var i = 0; i < 8; i ++){{
ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 50, 50, j*cellSize, i*cellSize, 50*scaleFix, 50*scaleFix);
}}
ctx.setTransform(1, 0, 0, 1, 0, 60);
ctx.drawImage(pic2, 150*scaleFix, 75*scaleFix);
}
.
Почему бы не использовать фазер или что-то. –
Не уверен, как ответить. Просто хочу попробовать его на ванили. –
Даже не беспокойтесь, отвечая на вопросы «почему бы вам не использовать X». Действительно странная проблема, которую вы там чувствуете, кажется, что отрицательный перекос - это «пропускание» этих линий сетки. – Shomz