Как создать реалистичную линию удара кисти? ⇐ IOS

[Anonymous]

Я пытаюсь нарисовать одну горизонтальную линию в Swiftui, которая выглядит как удар кисти - стрижка с одной стороны, а затем выцветает /сужается на другой стороне, аналогично фактическому удару краски. Я также применил линеаргрейент, чтобы исчезнуть цвет в конце. Код работает, но не совсем дает мне реалистичный внешний вид кисти (с легким переносным и нелинейным исчезновением), который я вижу на эталонных изображениях. /> Цель:
Мне нужна одна горизонтальная линия, которая начинается с полной толщины и непрозрачности слева, затем постепенно становится тоньше и прозрачна справа. В идеале у него было бы немного пернатых краев, а не идеальная геометрическая форма. Он также должен быть реализован программно, потому что мне нужно динамически изменить размер. Таким образом, изображение не может быть вариантом здесь. < /P>
Вопрос:
Как я могу создать более реалистичную линию удара кисти, полностью в Swiftui - возможно, используя пользовательскую форму или код пути - так что он выглядит ближе к фактическому удару кисти? Есть ли рекомендуемые подходы, преобразования или градиентные уловки, которые я могу использовать для имитации грубых, органических ребра и исчезания? src = "https://i.sstatic.net/p9giohfg.jpg"/>
edit:
Пример кода с металлическим шейдером.

Код: Выделить всё

#include 
using namespace metal;

float random(float2 st) {
return fract(sin(dot(st.xy, float2(12.9898, 78.233))) * 43758.5453);
}

float noise(float2 st) {
float2 i = floor(st);
float2 f = fract(st);
float a = random(i);
float b = random(i + float2(1.0, 0.0));
float c = random(i + float2(0.0, 1.0));
float d = random(i + float2(1.0, 1.0));
float2 u = f * f * (3.0 - 2.0 * f); // Smoother interpolation
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}

float smoothNoise(float2 st) {
float n = noise(st);
n += noise(st * 2.0) * 0.5;
n += noise(st * 4.0) * 0.25;
return n / (1.0 + 0.5 + 0.25);
}

[[ stitchable ]] half4 brushstrokeShader(float2 position,
float2 startPoint,
float2 endPoint,
float thickness,
float taperLength,
float textureIntensity,
float2 size) {
// Normalize all coordinates to [0, 1]
float2 uv = position / size;
float2 normStart = startPoint / size;
float2 normEnd = endPoint / size;

// Calculate the direction vector and distance from start to end
float2 dir = normEnd - normStart;
float lineLength = length(dir);
if (lineLength < 0.001) return half4(1.0, 0.0, 0.0, 1.0); // Debug: Red if invalid
dir = normalize(dir);

// Project the current position onto the line
float2 toPoint = uv - normStart;
float t = dot(toPoint, dir);
float2 proj = normStart + t * dir;
float dist = length(uv - proj);

// Calculate progress along the line (clamped to [0, 1])
float progress = clamp(t / lineLength, 0.0, 1.0);

// End-specific tapering: Apply fade only at start and end
float endFade = smoothstep(0.0, taperLength / (lineLength * size.x), min(progress, 1.0 - progress));
float effectiveThickness = (thickness / size.x) * endFade;

// Add organic texture, stronger at ends
float noiseValue = smoothNoise(uv * textureIntensity * 20.0 + float2(t * 10.0, 0.0)) * 0.5 + 0.5;
float edgeNoise = smoothNoise(uv * textureIntensity * 30.0 + float2(t * 20.0, 0.0)) * 0.4;
float edgeFalloff = smoothstep(effectiveThickness, effectiveThickness * 0.2, dist); // Stronger feathering

// Enhance end texture and feathering
float endEffect = 1.0 - abs(progress - 0.5) * 2.0; // Peak at center, fade at ends
float alpha = (edgeFalloff + edgeNoise * endEffect) * noiseValue;
alpha = clamp(alpha, 0.0, 1.0);

// Debug: Return green if alpha is very low
if (alpha < 0.01) return half4(0.0, 1.0, 0.0, 1.0);
return half4(0.0, 0.0, 0.0, alpha);  // Black with variable alpha
}
< / Code>
ContentVie: < / p>
import SwiftUI

struct ContentView: View {
@State private var startPoint = CGPoint(x: 50, y: 100)
@State private var endPoint = CGPoint(x: 300, y: 100)
@State private var thickness: CGFloat = 30 // Increased for visibility
@State private var taperLength: CGFloat = 60 // Adjusted for longer fade
@State private var textureIntensity: CGFloat = 0.5 // Increased for more texture

var body: some View {
ZStack {
// Background to ensure we can see the stroke
Color.gray.opacity(0.2) // Lighter background for contrast

// Custom shader for brushstroke
Rectangle()
.fill(
ShaderLibrary.brushstrokeShader(
.float2(startPoint.x, startPoint.y), // startPoint
.float2(endPoint.x, endPoint.y),     // endPoint
.float(thickness),                   // thickness
.float(taperLength),                 // taperLength
.float(textureIntensity),            // textureIntensity
.float2(350, 200) // Fixed size to match the view frame
)
)
.frame(width: 350, height: 200) // Match the size parameter

// Controls to adjust the line
VStack {
Spacer()
Slider(value: $endPoint.x, in: 50...300, step: 1) {
Text("Length")
}
.padding()

Slider(value: $thickness, in: 10...50, step: 1) {
Text("Thickness")
}
.padding()

Slider(value: $taperLength, in: 20...100, step: 1) {
Text("Taper Length")
}
.padding()

Slider(value: $textureIntensity, in: 1.0...5.0, step: 0.1) {
Text("Texture Intensity")
}
.padding()
}
}
.frame(width: 350, height: 200) // Ensure the ZStack has a defined size
}
}

Эффект, к которому я был ближе всего, был с серого фона.

Подробнее здесь: https://stackoverflow.com/questions/795 ... troke-line