How to provide EndStyle by drawing Arrow?

Technical Support WebViewer
, , ,
1

WebViewer Version: 10.7.2

for creating different types of annotations we are using some code


documentViewer
	.getTool(instanceRef.current!.Core.Tools.ToolNames.ARROW)
	.setStyles((_currentStyle: Object) => ({
		Start: new instanceRef.current!.Core.Math.Point(0, 0),
		End: new instanceRef.current!.Core.Math.Point(0, 0),
		Opacity: highlight[0].Opacity,
		StrokeColor: new Annotations.Color(rgbBorder!.r, rgbBorder!.g, rgbBorder!.b),
		StrokeThickness: AppConstants.Annotations.Properties.Line.StrokeThickness,
		
		// EndStyle: Annotations.LineEndType.OPEN_ARROW
		// LineEndStyle: Annotations.LineEndType.OPEN_ARROW
	}));

in getTool() method we provide toolname and basic styles.
Right now I want create line and arrow annotions.

The problem is with Arrow annotation. I need somehow to provide endStyle = OPEN_ARROW.
I was tested with different ToolName and was trying to provide EndStyle in setStyles().

So, my question is: how can I set EndStyle in ArrowCreateTool

image
image1309×754 107 KB

2

Hi mturenko87,

I will take a look at the issue presented and will contact you once I have more information.

3

I have found the solution.
Thanks

4

Hi mturenko87,

Apologies for the delay. We are glad you were able to resolve the issue.

5

what was the solution?

6

Hi there,

You should be able to customize the end style of line annotations via setEndStyle:
https://docs.apryse.com/api/web/Core.Annotations.LineAnnotation.html#setEndStyle

Best regards,
Kevin Kim

7

Thank you, was able to solve this for end styles via Tool.setStyles function. But I can not make it work for dashed lines.

How do I need to pass dashed info to Tools.setStyle?

I have this atm:

currentTool.setStyles(oldStyles => {
            console.log('OLD STYLES: ', oldStyles);
            const newStyles = oldStyles;
            newStyles.dashes = selections.lineStyle;
            newStyles.StrokeStyle = selections.lineStyle;
            newStyles.EndLineStyle = selections.lineEnd;
            newStyles.StartLineStyle = selections.lineStart;
            return newStyles;
        });

also tried newStyles.Styles but also not working.

8

Hi there,

You will need to pass it as part of the StrokeStyle like this:

const lineTool = documentViewer.getTool('AnnotationCreateLine');
lineTool.setStyles(currentStyle => ({
    StrokeThickness: 5,
    StrokeColor: new Annotations.Color(255, 0, 0, 1),
    StrokeStyle: 'dash,2,2'
}));

The UI also has these options from the style popup:
image

Best regards,
Kevin Kim

9

Kevin,

That did the trick, it is working now.

Can I ask the same thing but for cloudy border.
I set style to ‘cloudy’ and intensity to either 1 or 2, but it does not work.

regards,
David

10

Hi there,

The cloudy border style does not exist for line annotations.
For rectangle annotations, you can see the cloudy border in the UI tool popup:

image
image1546×1440 208 KB

Freetext and callout annotations also have the cloudy border options:

To set this programatically, you will need to use setBorderStyle:

annotation.setBorderStyle('cloudy') // where annotation supports having cloudy borders

Best regards,
Kevin Kim

11

Kevin,

I’m creating polygons with cloudy style and my code to change styles on existing annotations is working already.

I need to set up the Tool class with cloudy style applied so that when user is drawing annotation preview is working. Atm my code does show cloudy preview but always with large cloudy style (intensity 2), never with small (intensity 1). How do I properly pass intensity to the Tool so that preview works?

How ever if I change properties on existing annot I can set both small and large cloudy styles (intensity 1 and 2).

regards

12

Hi there,

The intensity of the cloudy border would correlate to the stroke thickness:

image
image1418×1278 89.2 KB

Alternatively, you can use the polygonCloudCreateTool instead:
https://docs.apryse.com/api/web/Core.Tools.PolygonCloudCreateTool.html#main

Best regards,
Kevin Kim