JavaScript <canvas>рисовать масштабированное изображение - PullRequest
Новая
       5

JavaScript <canvas>рисовать масштабированное изображение

1 голос
/ 05 января 2012

Удивительный плагин Illustrator Ai-> canvas экспортирует произвольные сложные изображения Illustrator в код Javascript, который опирается на <canvas>. Например, это код зеленого квадрата 150x150 

function draw(ctx) {

  // layer4/Path
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(150.0, 150.0);
  ctx.lineTo(0.0, 150.0);
  ctx.lineTo(0.0, 0.0);
  ctx.lineTo(150.0, 0.0);
  ctx.lineTo(150.0, 150.0);
  ctx.closePath();
  ctx.fillStyle = "rgb(0, 255, 0)";
  ctx.fill();
  ctx.restore();
}

Это глупый пример, потому что лучше рисовать квадрат с помощью прямоугольника, но в любом случае для сложных изображений это бесценно. Проблема в масштабировании .

Как я могу преобразовать вывод функции общего рисования с помощью Ai-> canvas, чтобы принять масштабный коэффициент? Этот квадратный пример довольно прост, но я бы хотел, чтобы что-то более общее было применено к функции JavaScript, рисуемой на холсте (с дугами, кругами, кривыми Безье ...). Спасибо

1 Ответ

3 голосов
/ 05 января 2012

Один из вариантов - использовать функцию scale холста, например: 

ctx.scale(xFactor, yFactor);

Подробнее здесь

...