DrawPath feature not working on ReactNative

[akaipham]

AbstractContentContext::GraphicOptions pathStrokeOptions(
AbstractContentContext::eStroke,
AbstractContentContext::eRGB,
AbstractContentContext::ColorValueForName("DarkMagenta"),
4);

DoubleAndDoublePairList pathPoints;

// draw path
pathPoints.push_back(DoubleAndDoublePair(100,200));
pathPoints.push_back(DoubleAndDoublePair(100,201));
pathPoints.push_back(DoubleAndDoublePair(100,202));
context->DrawPath(pathPoints,pathStrokeOptions);

I've followed above snippet as https://github.com/galkahana/PDF-Writer/blob/master/PDFWriterTestPlayground/HighLevelContentContext.cpp#L64. But it didn't display any path. I tried with DrawCircle, DrawSquare and all worked well except DrawPath.

[galkahana]

Not sure any of this is supposed to work on react native. Hummus is a nodejs module. React native is not. In any case, its not supported.

[akaipham]

Thanks, I got it. Because the rest API like DrawCircle, DrawSquare, .. worked so I assumed that DrawPath would work as well. Is it possible to support those API for RN ?

[TheGS]

Aside... I had to look up the implementation of AbstractContentContext::DrawPath() to see what it does. Renaming it to DrawPolygon() would probably make its intent more easily understood at the call site

[akaipham]

I see the declared points are not polygon at all, so what do you mean by drawPolygon?

[galkahana]

Ok sorry . I see this is opened on pdfwriter. How are you running native code on RN, btw? This makrs my previous note irrelevant

[galkahana]

the path described in the code is really small. it's like 2 dots 100,200 -> 100,201 -> 100,202.

this is why you see nothing. how about trying the example path? or tell us what you are looking to do.

[b.t.w again would love notes on how you make this work on RN...i'm sure my readers would like to know. for instance, how do you create a file, how do you make the call available via the native code. notes for android, notes for ios. if you got the time it would be of great value]

[TheGS]

You're right that the AbstractContentContext::GraphicsOptions::close is false by default. Calling AbstractContentContext::DrawPath() without setting it to true will draw a polyline instead of a polygon. Sorry for the confusion.

[akaipham]

My aim to draw a polyline so I didn't set AbstractContentContext::GraphicsOptions::close to true like what you state above.

[akaipham]

@galkahana This is work so far to call those methods via the native code:

DoubleAndDoublePairList pathPoints   = getDoubleAndDoublePairList(lineAction, @"points");
unsigned hexColor = hexIntFromString(lineAction[@"color"]);

AbstractContentContext::GraphicOptions pathStrokeOptions(
        AbstractContentContext::eStroke,
	AbstractContentContext::eRGB,
	AbstractContentContext::ColorValueForName("DarkMagenta"),
	10
);
context->DrawPath(pathPoints, options);

in file /react-native-pdf-lib/ios/PDFPageFactory.mm

[akaipham]

Edited: It worked, seems like something went wrong with Xcode compiler. Thanks for your help.

[TheGS]

What happens when you try to draw your polyline with RG() [setrgbcolor for stroking operations], m() [moveto], l() [lineto], and S() [stroke] directly? What happens when you try to draw the same points as a polygon with RG() [setrgbcolor for stroking operations], m() [moveto], l() [lineto], and s() [closepath and stroke] directly? That should be the difference when you change the value of AbstractContentContext::GraphicsOptions::close, so maybe there is a problem in AbstractContentContext::FinishPath() or something that it calls?

[galkahana]

RE RN on native, aha got it [for IOS]. thanks. you'll need something for Android, i assume, in addition. would appreciate notes on that too once you get there.

[akaipham]

@TheGS (sorry I can't tag you), I tried drawPath with AbstractContentContext::GraphicsOptions::close set to false (by default) and it drawn a line as what I expected. @galkahana of course, your project really interesting. Thanks !