如何將點添加到畫布圖上的相對位置？

我有一個比特的代碼（涉及「畫布」），其產生在四象限笛卡爾平面的曲線圖。（請參閱下面的註釋中的jsfiddle鏈接）。如何將點添加到畫布圖上的相對位置？

我想創造一些代碼，增加了一個點在飛機上的特定位置。不過，我想點獲得基於在x & y軸，而不是像素間隔繪製。換句話說，我不想猜測並檢查圖上每個座標的位置，然後相應地進行調整。如果我在頁面上向下移動200個像素的圖形，我希望該點同樣向下移動200個像素。

編碼新手，在這裏（如果你不能說已經）。我永遠花了我的時間到這一點，所以我非常感謝任何人願意提供的幫助。

謝謝！

來源

2015-12-20 user3666954

https://jsfiddle.net/huj7csta/2/ – user3666954

的2D畫布背景下提供了一個改造所有的渲染。

您可以ctx.setTransform設置的矩陣，你可以用ctx.transform，ctx.scale，ctx.rotate，ctx.translate

個人我的ctx.setTransform(a,b,c,d,e,f);其中

一個大風扇乘以現有的改造，b是單位長度和以像素爲單位的X軸
的C方向，d是在像素
E中的Y軸的單位長度和方向，f是相對於左上角的原點的位置，並且在像素中。

基本上2個向量定義像素x和y軸的大小和方向，以及定義畫布上原點的位置的座標。座標不受比例或旋轉的影響。

所以，如果你想在X軸點下去，規模是兩個然後 a = 0，b = 2 Y軸是那麼b = -2，c = 0是從X軸90度順時針旋轉。

如果您希望軸保持不變，但隨後 a = scale，b = 0，，d = scale規模scale = 2改變。並有原產地在畫布e = canvas.width/2中心，f = canvas.height/2

現在，如果你畫弧ctx.arc(0,0,100,0,Math.PI*2)你會看到在畫布的中心圓與radius = 100*scale

希望是有道理... 。

來源

2015-12-21 00:24:14 Blindman67

非常感謝你的詳細寫作！非常感激。就像我說的，我是一個新手，所以綜合來說，我可以在腳本末尾添加以下內容：「'ctx.setTransform（0,2，-2,0，canvas.width/2，canvas .high/2）;' 'ctx.arc（0,0,100,0，Math.PI * 2）「'或者我必須先定義每個變量，a - f？（我在這個腳本的最後包含了代碼，盡我所知[link] https://jsfiddle.net/huj7csta/5/） – user3666954

你說得對。請注意，轉換會一直保持活動狀態，直到您更改爲止。默認轉換（單位矩陣）爲'setTransform（1,0,0,1,0,0）'如果您熟悉矩陣，您會注意到只有6個值，而2D轉換需要9，缺少3總是0,0,1。爲了幫助您獲得最佳表現，請訪問https://developer.mozilla.org/en-US/，這是着陸頁。他們不能提供的東西可以在許多參考文獻中找到。 – Blindman67

嗯，出於某種原因，這個觀點並沒有出現在我的JsFiddle上...冒着痛苦的風險，你會介意看看我的JsFiddle代碼的結尾，看看我做錯了什麼嗎？（我在最後的標記之前插入了該點的代碼。） – user3666954

如何將點添加到畫布圖上的相對位置？

回答

相關問題