холст html5 предотвращает масштабирование ширины линии

Question

Если я нарисую прямоугольник, скажем, linewidth = 2, а затем масштабирую его, чтобы удвоить размер прямоугольника, я получу прямоугольник, у которого его граница вдвое больше начальной ширины линии.

Есть ли способ сохранить ширину линии до воспринимаемого размера 2 или первоначального размера.

Короче говоря, я хочу просто масштабировать размер прямоугольника, но визуально сохранить ширину линии размером 2.

Я пытался установить ширину линии до и после команды scale (2,2), но ширина границы также увеличивается.

Один из вариантов - разделить ширину линии на масштабный коэффициент, и это будет работать, если масштабные коэффициенты x и y одинаковы.

У меня нет возможности масштабировать ширину и высоту прямоугольника, и мне нужно использовать команду масштабирования, поскольку у меня есть другие объекты внутри прямоугольника, которые нуждаются в масштабировании.

Answer 1

Вы можете определить путь с преобразованием и обводить его без него. Таким образом, ширина линии не будет преобразована.

Пример:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save(); //save context without transformation
ctx.scale(2, 0.5); //make transformation
ctx.beginPath(); //define path
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.restore(); //restore context without transformation
ctx.stroke(); //stroke path

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Answer 2

Ширина строки должна быть уменьшена заранее.

ctx.lineWidth = 2 / Math.max(scaleX, scaleY);
ctx.scale(scaleX, scaleY);
ctx.fillRect(50, 50, 50, 50);

Answer 3

Хорошо, у вас есть несколько вариантов:

Вы можете сделать свое собственное масштабирование координат и размеров, например,

ctx.strokeRect( scaleX * x, scaleY * y, scaleX * width, scaleY * height) ;

И вам нужно применить масштабирование ко всемдругие объекты тоже.

В качестве альтернативы вы можете применить масштабирование, но не полагаться на lineWidth для рисования границы прямоугольника.Простым способом было бы нарисовать прямоугольник, заполнив правильную область и затем удалив внутреннюю часть, за вычетом границы, например:

var scaleX = 1.5, scaleY = 2;
var lineWidth = 2;

ctx.scale(scaleX, scaleY);

ctx.fillStyle = "#000";
ctx.fillRect(100, 50, 100, 
ctx.clearRect(100+lineWidth/scaleX, 50+lineWidth/scaleY, 100-(2*lineWidth)/scaleX, 60-(2*lineWidth)/scaleY);