Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/free-text-annotation">Free Text Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/comments">Comments</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/ink-annotation">Ink Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/annotation/line-angle-constraints">Line Angle Constraint</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/hand-written-signature">Hand Written Signature</a></li>
Expand Down Expand Up @@ -263,6 +264,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/free-text-annotation">Free Text Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/comments">Comments</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/ink-annotation">Ink Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/annotation/line-angle-constraints">Line Angle Constraint</a></li>
</ul>
</li>
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/form-filling">Form Filling</a></li>
Expand Down Expand Up @@ -886,6 +888,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/measurement-annotation">Measurement annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/free-text-annotation">Free Text Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/ink-annotation">Ink Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/line-angle-constraints">Line Angle Constraint</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/comments">Comments</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/annotations/signature-annotation">Handwritten signature</a></li>
</ul>
Expand Down Expand Up @@ -1030,6 +1033,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/measurement-annotation">Measurement annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/free-text-annotation">Free Text Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/ink-annotation">Ink Annotation</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/line-angle-constraints">Line Angle Constrain</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/comments">Comments</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/signature-annotation">Handwritten signature</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/annotations-in-mobile-view">Annotations in Mobile view</a></li>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
---
layout: post
title: Line Angle Constraints ASP.NET Core PDF Viewer Control | Syncfusion
description: Learn how to enable Line Angle Constraints the PDF Viewer component in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Line Angle Constraints
publishingplatform: ##Platform_Name##
documentation: ug
---


# Line Angle Constraints in ASP.NET Core PDF Viewer

The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents.

## Enabling Line Angle Constraints
To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles.

The following code demonstrates how to enable line angle constraints:

{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}

@page "{handler?}"
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

<div style="width:100%;height:600px">
<!-- To configure the server-backed PDF Viewer, include the "serviceUrl='/Index'" attribute -->
<ejs-pdfviewer id="pdfviewer"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"
style="height:641px;">
</ejs-pdfviewer>
</div>

<script type="text/javascript">
window.onload = function () {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.annotationDrawingOptions.enableLineAngleConstraints = true;
viewer.annotationDrawingOptions.restrictLineAngleTo = 90;
};
</script>

{% endhighlight %}
{% endtabs %}

## Configuration Properties

### enableLineAngleConstraints

The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property:

- Lines
- Arrows
- Polygon
- Distance measurements
- Perimeter measurements
- Area measurements
- Volume measurements

**Key Benefits:**

- Automatic angle snapping during the drawing
- Enhanced precision for technical drawings and measurements
- Desktop support: Hold **Shift** while drawing to activate constraints
- Real-time visual feedback showing angle snapping behavior

### restrictLineAngleTo

The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**.

**Angle Snapping Rules:**

- The initial drawing direction is treated as the 0° reference point
- Snapped angles are calculated based on the increment
- If the increment doesn’t divide 360 evenly, angles reset after 360°

**Examples:**

- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°

## Working with Constrained Annotations

### Drawing Behavior

When line angle constraints are enabled:

**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual.
**Angle Snapping:** The line snaps to the nearest allowed angle.
**Visual Feedback:** Snapped angle is shown in real time.
**Completion:** Release to complete the annotation.

### Keyboard Shortcuts

**Desktop Platforms:**

**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false.

### Selector-Based Modifications

When modifying existing line annotations using selectors:

- Constraints apply based on the original line direction.
- The reference angle (0°) is determined by the lines current orientation.
- Only lines and arrows support constraint snapping during modification.
- Adjustments snap to the configured angle increment relative to the original direction.

[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to)

N> You can refer to our [ASP.NET Core PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core PDF Viewer example](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) to know how to render and configure the PDF Viewer.
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
---
layout: post
title: Line Angle Constraints in EJ2 ASP.NET MVC PDF Viewer | Syncfusion
description: Learn how to enable Line Angle Constraints in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Line Angle Constraints
publishingplatform: ##Platform_Name##
documentation: ug
---


# Line Angle Constraints in ASP.NET MVC PDF Viewer

The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents.

## Enabling Line Angle Constraints
To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles.

The following code demonstrates how to enable line angle constraints:

{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}

@using Syncfusion.EJ2
@{
ViewBag.Title = "Home Page";
}

<div>
<!-- Render PDF Viewer -->
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
</div>

<!-- Ensure necessary Syncfusion scripts and styles are included -->
<script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
viewer.annotationDrawingOptions.enableLineAngleConstraints = true;
viewer.annotationDrawingOptions.restrictLineAngleTo = 90;
};
</script>

{% endhighlight %}
{% endtabs %}

## Configuration Properties

### enableLineAngleConstraints

The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property:

- Lines
- Arrows
- Polygon
- Distance measurements
- Perimeter measurements
- Area measurements
- Volume measurements

**Key Benefits:**

- Automatic angle snapping during the drawing
- Enhanced precision for technical drawings and measurements
- Desktop support: Hold **Shift** while drawing to activate constraints
- Real-time visual feedback showing angle snapping behavior

### restrictLineAngleTo

The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**.

**Angle Snapping Rules:**

- The initial drawing direction is treated as the 0° reference point
- Snapped angles are calculated based on the increment
- If the increment doesn’t divide 360 evenly, angles reset after 360°

**Examples:**

- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°

## Working with Constrained Annotations

### Drawing Behavior

When line angle constraints are enabled:

**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual.
**Angle Snapping:** The line snaps to the nearest allowed angle.
**Visual Feedback:** Snapped angle is shown in real time.
**Completion:** Release to complete the annotation.

### Keyboard Shortcuts

**Desktop Platforms:**

**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false.

### Selector-Based Modifications

When modifying existing line annotations using selectors:

- Constraints apply based on the original line direction.
- The reference angle (0°) is determined by the lines current orientation.
- Only lines and arrows support constraint snapping during modification.
- Adjustments snap to the configured angle increment relative to the original direction.

[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)

N> You can refer to our [ASP.NET Core PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-mvc-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core PDF Viewer example](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples) to know how to render and configure the PDF Viewer.
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
---
layout: post
title: Line Angle Constraint in JavaScript PdfViewer | Syncfusion
description: Learn here all about Line Angle Constraints in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Line Angle Constraints
publishingplatform: ##Platform_Name##
documentation: ug
domainurl: ##DomainURL##
---

# Line Angle Constraints in JavaScript PDF Viewer

The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents.

## Enabling Line Angle Constraints
To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles.

The following code demonstrates how to enable line angle constraints:

```js

var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib",
annotationDrawingOptions : {enableLineAngleConstraints : true, restrictLineAngleTo: 90}
});

ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
pdfviewer.appendTo('#PdfViewer');

```

## Configuration Properties

### enableLineAngleConstraints

The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property:

- Lines
- Arrows
- Polygon
- Distance measurements
- Perimeter measurements
- Area measurements
- Volume measurements

**Key Benefits:**

- Automatic angle snapping during the drawing
- Enhanced precision for technical drawings and measurements
- Desktop support: Hold **Shift** while drawing to activate constraints
- Real-time visual feedback showing angle snapping behavior

### restrictLineAngleTo

The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**.

**Angle Snapping Rules:**

- The initial drawing direction is treated as the 0° reference point
- Snapped angles are calculated based on the increment
- If the increment doesn’t divide 360 evenly, angles reset after 360°

**Examples:**

- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°

## Working with Constrained Annotations

### Drawing Behavior

When line angle constraints are enabled:

**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual.
**Angle Snapping:** The line snaps to the nearest allowed angle.
**Visual Feedback:** Snapped angle is shown in real time.
**Completion:** Release to complete the annotation.

### Keyboard Shortcuts

**Desktop Platforms:**

**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false.

### Selector-Based Modifications

When modifying existing line annotations using selectors:

- Constraints apply based on the original line direction.
- The reference angle (0°) is determined by the lines current orientation.
- Only lines and arrows support constraint snapping during modification.
- Adjustments snap to the configured angle increment relative to the original direction.

[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)

N> You can refer to our [JavaScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript PDF Viewer example](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples) to know how to render and configure the PDF Viewer.
Loading