zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-09 09:27:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

try to implement stroke text with gradient but failed

Browse Source 
try to implement stroke text with gradient but failed
This commit is contained in:
Horcrux
2016-04-23 11:53:48 +08:00
parent 2eda0e8ce2
commit d990eaa472
3 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Example/android/settings.gradle
+1 -1
View File
@@ -3,4 +3,4 @@ rootProject.name = 'ArtSvgExample'
include ':app' include ':app'
include ':react-native-svg' include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-art-svg/android') project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
Example/examples/Text.js
+5 -4
View File
@@ -7,7 +7,8 @@ import Svg, {
LinearGradient, LinearGradient,
Stop, Stop,
Defs, Defs,
ClipPath ClipPath,
Rect
} from 'react-native-svg'; } from 'react-native-svg';
class TextExample extends Component{ class TextExample extends Component{
@@ -96,11 +97,11 @@ class TextStroke extends Component{
> >
<Defs> <Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="100" y2="0"> <LinearGradient id="grad" x1="0" y1="0" x2="100" y2="0">
<Stop offset="100%" stopColor="rgb(255,255,0)" stopOpacity="0" /> <Stop offset="100%" stopColor="#fff" stopOpacity="0" />
<Stop offset="0%" stopColor="red" stopOpacity="1" /> <Stop offset="0%" stopColor="#000" stopOpacity="1" />
</LinearGradient> </LinearGradient>
</Defs> </Defs>
<Rect x="0" y="0" width="200" height="60" fill="blue" />
<Text <Text
stroke="url(#grad)" stroke="url(#grad)"
strokeWidth="4" strokeWidth="4"
ios/RNSVGText.m
+35 -4
View File
@@ -78,9 +78,8 @@ static void RNSVGFreeTextFrame(RNSVGTextFrame frame)
} }
} }
} }
if (self.stroke) { if (self.stroke) {
[self.stroke applyStrokeColor:context];
CGContextSetLineWidth(context, self.strokeWidth); CGContextSetLineWidth(context, self.strokeWidth);
CGContextSetLineCap(context, self.strokeLinecap); CGContextSetLineCap(context, self.strokeLinecap);
CGContextSetLineJoin(context, self.strokeLinejoin); CGContextSetLineJoin(context, self.strokeLinejoin);
@@ -88,8 +87,40 @@ static void RNSVGFreeTextFrame(RNSVGTextFrame frame)
if (dash.count) { if (dash.count) {
CGContextSetLineDash(context, 0, dash.array, dash.count); CGContextSetLineDash(context, 0, dash.array, dash.count);
} }
if (mode == kCGTextFill) {
mode = kCGTextFillStroke; if (![self.stroke applyStrokeColor:context]) {
// TODO: stroke text with pattern
// CGContextSetTextDrawingMode(context, kCGTextStrokeClip);
// CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
// CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]);
// CGRect rect = CGContextGetClipBoundingBox(context);
//
// CGContextScaleCTM(context, 1.0, -1.0);
// for (int i = 0; i < frame.count; i++) {
// [self renderLineTo:context atIndex:i];
// [self.stroke paint:context];
// }
// CGContextScaleCTM(context, 1.0, -1.0);
// //[self.stroke paint:context];
//
// CGImageRef image = CGBitmapContextCreateImage(context);
//
// CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(image), CGImageGetHeight(image), CGImageGetBitsPerComponent(image), CGImageGetBitsPerPixel(image), CGImageGetBytesPerRow(image), CGImageGetDataProvider(image), CGImageGetDecode(image), CGImageGetShouldInterpolate(image));
// //CFRelease(image);
//
// CGContextSaveGState(context);
// //CGContextClearRect(context, rect);
// //CGContextClipToMask(context, rect, mask);
// [self.stroke paint:context];
// CFRelease(mask);
// //CGContextRestoreGState(context);
//
// return;
} else {
if (mode == kCGTextFill) {
mode = kCGTextFillStroke;
}
} }
} }