html5畫布防止線寬縮放

如果我繪製一個說linewidth = 2的矩形，然後將其縮放爲矩形大小的兩倍，我會得到一個矩形，其邊框是初始線寬的兩倍。html5畫布防止線寬縮放

有沒有一種方法可以將線寬保持爲可感知的尺寸2或原始尺寸。

總之，我只想縮放矩形的大小，但保持線寬視覺大小的2

我試過前後的規模（2,2）命令設置線寬，但邊框的寬度也增加。

一種選擇是將線寬除以比例因子，如果x和y比例因子相同，這將起作用。

我沒有選擇縮放矩形的寬度和高度，我需要使用縮放命令，因爲我需要縮放矩形內的其他對象。

來源

2010-09-25 Nilesh

好吧，你有兩個選擇：

你可以做你自己的座標和維度，例如縮放

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);

來源

2010-09-26 13:19:10 andrewmu

的OP似乎經歷完全相反...本'lineWidth' _is_受着縮放？ – MrWhite 2010-09-26 14:16:54

好悲傷！這是我的一些非常不好的閱讀理解！並測試自己，是的，它受到影響。 – andrewmu 2010-09-27 09:03:00

我改變了我的答案 - 謝謝你指出我的錯誤。 – andrewmu 2010-09-27 09:19:59

線寬應事先縮小。

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

來源

2012-06-02 16:01:30 naka

，但這並不妨礙線寬縮放，只能確保線寬不超過一個值。 – Calmarius 2014-02-06 12:18:32

您可以使用轉換定義路徑，並在沒有轉換的情況下對其進行描邊。這種方式線寬將不會被轉換。

實施例：

<!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>

來源

2014-08-22 13:00:05

你測試過哪些瀏覽器？在Chrome 38上它似乎不起作用。 – b0fh 2014-11-16 21:40:29

太棒了！適用於我的Chrome 44，FF 39，IE 9+ – 2015-07-31 12:13:59

這很好用。但是，如果在還原之前存在剪輯（）區域，則該區域將丟失，並且如果剪輯區域在描邊之前添加，則會剪切剪輯路徑。還有其他解決方案嗎？ – PeterT 2017-03-22 01:00:11

html5畫布防止線寬縮放

回答

相關問題