Холст html5 предотвращает масштабирование ширины линии
Если я нарисую прямоугольник с именем linewidth = 2, а затем масштабирую его, чтобы удвоить размер прямоугольника, я получаю прямоугольник с двойной границей ширины линии.
Есть ли способ сохранить ширину линии до предполагаемого размера 2 или оригинального размера.
Короче говоря, я хочу просто масштабировать размер прямоугольника, но визуально сохранить ширину линии размером 2.
Я попытался установить ширину линии до и после команды scale (2,2), но ширина границы также увеличивается.
Один из вариантов заключается в том, чтобы разделить ширину линии на коэффициент масштабирования, и это будет работать, если масштабные коэффициенты x и y совпадают.
У меня нет возможности масштабировать ширину и высоту прямоугольника, и мне нужно использовать команду scale, поскольку у меня есть другие объекты в прямоугольнике, которые нуждаются в масштабировании.
Ответы
Ответ 1
Вы можете определить путь с преобразованием и обвести его без него. Таким образом, ширина линии не будет преобразована.
Пример:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
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
</script>
</body>
</html>
Ответ 2
Линейный ширину следует предварительно сократить.
ctx.lineWidth = 2 / Math.max(scaleX, scaleY);
ctx.scale(scaleX, scaleY);
ctx.fillRect(50, 50, 50, 50);
Ответ 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);