沿路徑使用漸變

我正在嘗試使用Android Path類創建'發光效果'。但是，漸變不會彎曲以適應路徑。相反，它只是簡單地顯示在「上方」，並被剪裁到路徑的中風。使用方形路徑，下面的圖像顯示了我的意思是：沿路徑使用漸變

Path-gradient fail

相反，應該看起來更像是這樣的：

enter image description here

換句話說，梯度遵循的路徑，特別是根據CornerPathEffect中設置的半徑包裹角落。

這裏是代碼的相關部分：

paint = new Paint(); 
paint.setStyle(Style.STROKE); 
paint.setStrokeWidth(20); 
paint.setAntiAlias(true); 
LinearGradient gradient = new LinearGradient(30, 0, 50, 0, 
    new int[] {0x00000000, 0xFF0000FF, 0x00000000}, null, Shader.TileMode.MIRROR); 
paint.setShader(gradient); 
PathEffect cornerEffect = new CornerPathEffect(10); 
paint.setPathEffect(cornerEffect); 
canvas.drawPath(boxPath, paint);

任何想法？

另一種方法是在定義筆畫寬度時獲得「軟邊刷」效果。我已經嘗試過BlurMaskFilters，但是它們給出了統一的模糊效果，而不是從不透明到透明的過渡。有誰知道這是可能的嗎？

來源

2011-06-24 Steve Haley

原來這樣做有一個愚蠢的顯而易見的方法。只需重新使用相同的路徑，並調整每個繪圖遍的筆觸寬度和alpha。示例代碼：

float numberOfPasses = 20; 
float maxWidth = 15; 
for (float i = 0; i <= numberOfPasses; i++){ 
    int alpha = (int) (i/numberOfPasses * 255f); 
    float width = maxWidth * (1 - i/numberOfPasses); 

    paint.setARGB(alpha, 0, 0, 255); 
    paint.setStrokeWidth(width); 
    canvas.drawPath(path, paint); 
}

查看下面的結果示例。使用此方法繪製左側路徑，用於比較的右側路徑使用maxWidth和255 alpha繪製在單個筆劃中。

Example of drawing result

這主要工作。有兩個問題：

漸變不如它可能光滑。這是因爲每次通過都會導致alpha的建立速度過快，在最終的中風之前達到255。嘗試一下int alpha = (int) (i/numberOfPasses * 125f);（注意改爲125f而不是255f）會有所幫助。
該路徑看起來像是在角落的內部「切割」。可能應用CornerPathEffect的一些結果。

來源

2011-07-19 10:56:15

嘿史蒂夫 - 上週我發現了同樣的想法，事實上，當我的頭腦在漫長的駕駛中感到無聊時，我現在因爲不記得在這裏提到它而踢自己了！不過，我很高興你已經嘗試過並發現它能夠工作，並且瞭解你遇到的問題很有趣。感謝您分享您的代碼。我會在我的SVG解析器中添加類似的東西，我可能會定義自己的自定義名稱空間XML標記以在特定路徑上觸發此功能。輝煌的工作 - +1！ – Trevor

該alpha應該是'255/numberOfPasses'，不乘以'i' – njzk2

如果我理解正確的話，你想要做的是讓漸變有效地形成筆畫的「筆刷」。

這是究竟是我最近也在努力實現的，但據我所知，API並沒有提供任何直接的方法來做到這一點。我最近爲Android Canvas轉換器類創建了一個SVG，因此我最近也在Inkscape中做了很多工作。所以，當我仔細研究它時，我想知道Inkscape是否可以做到這一點。但是，即使在Inkscape中，這也是一件非常不重要的事情。後被用下面的下載鏈接教程沿路徑的過程中，進行一些搜索我碰到一個梯度的這一形象終於來了，一起：

http://www.flickr.com/photos/[email protected]/3312087295/

我親自嘗試在做的時候就是創造出一些半圓形，其中的路徑是一種霓虹輝光，而不是平坦的顏色。就Android API和SVG標準而言，似乎唯一的方法就是創建一個在圓上完美居中的徑向漸變，並在恰當的位置放置一系列色塊。做起來相當棘手，我當然不知道你會如何做到像廣場那樣的形狀。

對不起，這是一個'我做不到'，而不是一個有用的答案！隨着我渴望瞭解一種「軟筆刷」效果的解決方案，我會對此感興趣。

來源

2011-07-07 19:17:23 Trevor

嗯，很高興知道我不是唯一一個努力尋找一個解決這個：P的我能想到的唯一剩下的解決方案就是寫一個數學公式的野獸，它給出了一條路徑，創造了一條與之相鄰的路徑。然後用不同的減少不透明度的「塗料」手動繪製幾次。這聽起來像一個巨大的閃光，但我認爲我在某個地方看到，Android團隊使用類似的方法來處理Android Market的圖形。 –

結果發現有一種愚蠢的做法 - 如果你仍然對此感興趣，請參閱下面的答案。另外，我偶然發現了我在之前的評論中提到的關於Android團隊如何在Android電子市場中大肆宣傳的文章：http://www.pushing-pixels.org/2010/12/15/meet-the-green- goblin-part-3.html –

如何使用軟刷位圖進行繪圖？使用像Photoshop這樣的圖像編輯軟件製作一個不透明度隨着徑向向外減小的軟圓刷。另存爲drawable，將其加載到位圖中並沿着路徑均勻地繪製它。用白色的筆刷製作位圖。這樣，您可以簡單地使用PorterDuffColorFilter將給定的顏色（這裏是藍色）與您的位圖相乘。

brush1=BitmapFactory.decodeResource(getResources(), R.drawable.brush_custom_one); 
//This contains radially decreasing opacity brush 
porter_paint.setColorFilter(new PorterDuffColorFilter(paint.getColor(), Mode.MULTIPLY)); 
for (int i=1;i<matrix.size();i++) { 
//matrix contains evenly spaced points along path 
Point point = matrix.get(matrix.get(i)); 
canvas.drawBitmap(brush1, point.x,point.y, porter_paint);}

使用的刷（它的存在）： Brush used 最終的結果是： Final result

來源

2013-08-23 19:51:51 codeslayer1

這是另一個可能相當不錯的解決方案。下次我需要做這樣的事情時，我會研究它。（這個線程是2歲） –

沿路徑使用漸變

回答

相關問題