不同比例的圖案線

Question

我正在用不同的畫布創建圖案的線條。

我正在翻譯和縮放上下文矩陣，並創建另一個模式，以實現每條線將從模式的開始正好開始。 （因爲我們知道模式是從上下文的開始部分重複創建的，而不是依賴於繪圖）

我已經成功地做到了這一點，如下面對大多數情況所示。

每行代表一個比例。並在不同的Y值上繪製很多行。 每條線都應沿X軸重複出現紅色圓圈。它適用於很多尺度。

問題是在規模1.6。第三排線。正如我們所看到的，由於Y值越來越大，這一行中的線條並沒有很好地模式化，並且開始並不正確。

我認爲這是一些浮點問題..但我找不到問題。

var ctx = demo.getContext('2d'), 
 
    pattern, 
 
    offset = 0; 
 

 
/// create main pattern 
 
ctx.fillStyle = 'red'; 
 
ctx.beginPath(); 
 
ctx.arc(8, 8, 7, 0, Math.PI * 2); 
 
ctx.fill(); 
 

 
runScale(1, 0); 
 
runScale(1.5, 120); 
 
runScale(1.6, 240); 
 
runScale(2, 360); 
 
runScale(3, 480); 
 

 
function runScale(scale, firstPntX) { 
 

 

 
    var newCanvasSize = { 
 
    width: demo.width * scale, 
 
    height: demo.height * scale 
 
    }; 
 

 
    demo2.width = Math.round(newCanvasSize.width); 
 
    demo2.height = Math.round(newCanvasSize.height); 
 

 
    var firstPnt = { 
 
    x: firstPntX 
 
    }; 
 

 
    var offsetPnt = { 
 
    x: 0, 
 
    y: (newCanvasSize.height/2) 
 
    }; 
 

 
    var ctx2 = demo2.getContext('2d'); 
 
    var pt = ctx2.createPattern(demo, 'repeat'); 
 

 

 
    ctx = demo3.getContext('2d'); 
 

 
    for (var i = 20; i < 1000; i += (demo2.height + 10)) { 
 
    drawLines(i); 
 
    } 
 

 
    function drawLines(y) { 
 
    firstPnt.y = y; 
 

 
    demo2.width = demo2.width; 
 
    ctx2.fillStyle = pt; 
 

 
    var offsets = [firstPnt.x, y - demo2.height/2]; 
 
    ctx2.translate(offsets[0], offsets[1]); 
 
    ctx2.scale(scale, scale); 
 

 
    ctx2.fillRect(-offsets[0]/scale, -offsets[1]/scale, demo2.width/scale, demo2.height/scale); 
 

 
    ctx.lineWidth = newCanvasSize.height; 
 
    pattern = ctx.createPattern(demo2, 'repeat'); 
 

 
    ctx.beginPath(); 
 
    ctx.moveTo(firstPnt.x, firstPnt.y); 
 
    ctx.lineTo(firstPnt.x + 100, firstPnt.y); 
 
    ctx.strokeStyle = 'lightgreen'; 
 
    ctx.stroke(); 
 
    ctx.strokeStyle = pattern; 
 
    ctx.stroke(); 
 
    } 
 
}

canvas { 
 
    border: 1px solid #000 
 
}

<canvas id="demo" width=16 height=16></canvas> 
 
<canvas id="demo2"></canvas> 
 
<canvas id="demo3" width=600 height=400></canvas>

Answer 1

整天疲於應付這個問題後，我終於決定在這裏發表這個問題。

而現在，一個小時後，我發現我自己的解決方案..

我決定不把它刪除了該論壇的緣故。

解決方案是簡單地更改偏移量。

改變這一行

var offsets = [firstPnt.x, y - demo2.height/2]; 

這一行

var offsets = [firstPnt.x % demo2.width,firstPnt.y % demo2.height - demo2.height/2]; 

var ctx = demo.getContext('2d'), 
 
    pattern, 
 
    offset = 0; 
 

 
/// create main pattern 
 
ctx.fillStyle = 'red'; 
 
ctx.beginPath(); 
 
ctx.arc(8, 8, 7, 0, Math.PI * 2); 
 
ctx.fill(); 
 

 
runScale(1, 0); 
 
runScale(1.5, 120); 
 
runScale(1.6, 240); 
 
runScale(2, 360); 
 
runScale(3, 480); 
 

 
function runScale(scale, firstPntX) { 
 

 

 
    var newCanvasSize = { 
 
    width: demo.width * scale, 
 
    height: demo.height * scale 
 
    }; 
 

 
    demo2.width = Math.round(newCanvasSize.width); 
 
    demo2.height = Math.round(newCanvasSize.height); 
 

 
    var firstPnt = { 
 
    x: firstPntX 
 
    }; 
 

 
    var offsetPnt = { 
 
    x: 0, 
 
    y: (newCanvasSize.height/2) 
 
    }; 
 

 
    var ctx2 = demo2.getContext('2d'); 
 
    var pt = ctx2.createPattern(demo, 'repeat'); 
 

 

 
    ctx = demo3.getContext('2d'); 
 

 
    for (var i = 20; i < 1000; i += (demo2.height + 10)) { 
 
    drawLines(i); 
 
    } 
 

 
    function drawLines(y) { 
 
    firstPnt.y = y; 
 

 
    demo2.width = demo2.width; 
 
    ctx2.fillStyle = pt; 
 

 
    var offsets = [firstPnt.x % demo2.width, firstPnt.y % demo2.height - demo2.height/2]; 
 
    ctx2.translate(offsets[0], offsets[1]); 
 
    ctx2.scale(scale, scale); 
 

 
    ctx2.fillRect(-offsets[0]/scale, -offsets[1]/scale, demo2.width/scale, demo2.height/scale); 
 

 
    ctx.lineWidth = newCanvasSize.height; 
 
    pattern = ctx.createPattern(demo2, 'repeat'); 
 

 
    ctx.beginPath(); 
 
    ctx.moveTo(firstPnt.x, firstPnt.y); 
 
    ctx.lineTo(firstPnt.x + 100, firstPnt.y); 
 
    ctx.strokeStyle = 'lightgreen'; 
 
    ctx.stroke(); 
 
    ctx.strokeStyle = pattern; 
 
    ctx.stroke(); 
 
    } 
 
}

canvas { 
 
    border: 1px solid #000 
 
}

<canvas id="demo" width=16 height=16></canvas> 
 
<canvas id="demo2"></canvas> 
 
<canvas id="demo3" width=600 height=400></canvas>

感謝您閱讀：d