兩點之間的線性漸變

我試圖在我的像素柵格上生成線性漸變。我在處理2.0中這樣做 - 這主要是Java，但有一些額外的類和變量。我已經有一個功能做徑向漸變：兩點之間的線性漸變

/* For every pixel */ 
    distance = dist(centerX,centerY, x,y); //calculate distance between position and center of gradient 
    lerpValue = norm(distance, 0, maxRadius) //normalize this value between 0 and the give maximum radius 
    color = lerpColor(startColor, endColor, lerpValue); //calculate Color 
/*end for*/

這比我想象的容易。然後我試着做一個點到另一個點的漸變，我無法弄清楚如何計算這個。當然，水平或垂直漸變是沒有問題的，但是在兩點內線條可以是任何角度。我已經找到了類似問題的答案，但實際上我不明白。有人會向我解釋這種計算是如何可能的 - 用簡單的描述來描述？請解釋你在做什麼，因爲我想了解它，而不僅僅是複製它。如果你寫代碼，請給出變量的好名字。我知道寫單個字符的名字會更快，但我並不總是知道它們究竟是什麼。哦，計算應該是每像素的像素，因爲旋轉線條和繪製它們每X步驟是相當緩慢，我認爲，並可能導致醜陋的結果（錯誤的顏色與抗鋸齒，樓梯沒有）。我希望我不要問得太多，但正如我所說，我真的想了解這是如何工作的，而且如果我不得不猜測例如變量的名稱是什麼意思..

來源

2014-02-24 rcheetah

_「我已經找到類似問題的答案，但實際上我不明白。」_請鏈接問題。它可能會給潛在的答覆者提供靈感:-) – Kevin

https://stackoverflow.com/questions/2869785/point-to-point-linear-gradient?rq=1 – rcheetah

這實際上很簡單，並且類似於你爲水平和垂直漸變所做的。

準確的數學根據您希望漸變出現的方式而有所不同 - 但基本上，您的操作與垂直和水平漸變相同，但將X和Y組合在一起。

您可以縱向測量距離，水平測量距離。我們會稱他們爲v和h。

然後，您將它們合併爲總距離並將其用作您的lerpValue。

例如有寬度和高度具有相同的貢獻

lerpValue = 0.5*v + 0.5*h;

要高度具有的寬度兩倍的貢獻：

lerpValue = 0.33*v + 0.67*h;

要賺，即使你是漸變填充矩形而不是正方形：

double ratio = width/height; 

lerpValue = ratio*v + (1-ratio)*h;

等

來源

2014-02-24 21:36:04

我很抱歉，但有什麼點之間的距離？其實我有三點：其中梯度開始的點的的x/y的點的的x/y，其中梯度結束我在矩計算的像素的 X/Y（在環位置）如果我計算前兩個點之間的距離，我會明顯地得到所有像素上的相同顏色，因爲它們不會改變。如果我用eg第一個像素，我不會使用停止點。對不起，如果這個問題是愚蠢的... – rcheetah

我不知道是否清楚我到底想做什麼，所以在這裏你有一個圖片顯示這一點（當然在Photoshop中完成）。 http://imageshack.com/a/img607/6615/vh4c。png 我有一個startPoint和一個帶有x/y的endPoint，並且嘗試計算每個像素以獲得如圖所示的結果。我希望這有幫助。謝謝：） – rcheetah

兩點之間的線性漸變

回答

相關問題