Представляем новый компонент Angular Image Editor

 <?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <directoryBrowse enabled="true" />
  <httpProtocol>
   <customHeaders>
    <clear />
    <add name="Access-Control-Allow-Origin" value="*" />
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>

Выбор и обрезка

Компонент «Редактор изображений» поддерживает несколько вариантов выбора, включая квадрат, круг и произвольные формы. Он также может обрабатывать различные соотношения сторон. Вы можете обрезать изображение, перетаскивая область выделения и изменяя ее размер. Вы можете выполнить выбор либо с помощью панели инструментов, либо с помощью метода select.

В методе select мы должны указать тип выделения (пользовательский, квадрат или круг) и соотношение сторон (3:2, 4:3, 5:4, 7:5 или 16: 9).

На панели инструментов мы можем выполнить выделение, просто нажав кнопку раскрывающегося списка Обрезать и выбрав форму выделения (пользовательскую, квадрат или круг) и соотношение сторон.

Обрезка

Редактор изображений Angular может обрезать любое изображение на основе пользовательского выбора. Обрезку можно выполнить либо с помощью панели инструментов, либо методом обрезки.

На панели инструментов мы можем выполнить обрезку, нажав кнопку ОК, которая активируется после того, как пользователь выберет часть изображения.

В следующем примере кода мы использовали методы select и crop для кругового выделения и обрезки изображения.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="select()">Select</button>
  <button class="e-btn" (click)="crop()">Crop</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public select = (): void => {
  this.ImageEditorInstance.select('circle');
 }
 public crop = (): void => {
  this.ImageEditorInstance.crop();
 }
}

Преобразование изображения

Компонент Angular Image Editor поддерживает преобразование поворот и отражение. Преобразование вращения позволяет пользователям поворачивать изображение по часовой стрелке или против часовой стрелки на 90, 180, 270 или 360 градусов. Преобразование flip поддерживает горизонтальную и вертикальную ориентацию. Мы можем выполнить оба преобразования либо с помощью панели инструментов, либо с помощью методов поворота и отражения.

На панели инструментов мы можем выполнять действия поворота и отражения, нажав кнопку раскрывающегося списка Преобразовать и выбрав один из вариантов Повернуть влево, Повернуть Вправо, Отразить по горизонтали или Отразить по вертикали.

В следующем примере кода методы rotate и flip используются для выполнения действий поворота и отражения.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="rotate()">Rotate</button>
  <button class="e-btn" (click)="flip()">Flip</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
 
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public rotate = (): void => {
  this.ImageEditorInstance.rotate(90);
 }
 public flip = (): void => {
  this.ImageEditorInstance.flip("Vertical");
 }
}

Аннотации

Компонент Angular Image Editor поддерживает несколько типов аннотаций, включая текст, рисунки от руки и формы, такие как прямоугольники, эллипсы и линии.

Текст

Вы можете вставить текстовую аннотацию и настроить ее, изменив ее цвет, семейство шрифтов, размер шрифта и стили шрифта, такие как полужирный и курсив. Вы можете добавить текстовую аннотацию с помощью панели инструментов или метода drawText.

В методе drawText вы можете вставить текстовую аннотацию, указав текст, семейство шрифтов, размер шрифта и стили шрифта.

На панели инструментов мы можем вставить текстовую аннотацию, просто нажав кнопку раскрывающегося списка Аннотация и выбрав параметр Добавить текст. После вставки текста контекстная панель инструментов будет включена для настройки цвета аннотации, семейства шрифтов, размера шрифта и стилей шрифта, таких как полужирный и курсив.

Формы

Вы можете вставлять и настраивать аннотации фигур, такие как прямоугольники, эллипсы и линии, изменяя цвет их обводки, цвет заливки и ширину обводки. Аннотации фигур можно создавать либо с помощью панели инструментов, либо с помощью методов drawRectangle, drawEllipse и drawLine.

На панели инструментов мы можем вставить аннотации формы, нажав кнопку раскрывающегося списка Аннотация и выбрав Прямоугольник, Эллипс или Линия. параметры. После вставки формы контекстная панель инструментов будет включена для настройки цвета обводки аннотации, цвета заливки и ширины обводки.

В следующем примере кода метод drawText используется для вставки текста, а методы drawRectangle, drawEllipse и drawLine используются для вставки текста. соответствующие формы аннотаций.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="text()">Add Text</button>
  <button class="e-btn" (click)="rectangle()">Rectangle</button>
  <button class="e-btn" (click)="ellipse()">Ellipse</button>
  <button class="e-btn" (click)="line()">Line</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public text = (): void => {
  this.ImageEditorInstance.drawText(50, 50, 'Syncfusion');
 }
 public rectangle = (): void => {
  this.ImageEditorInstance.drawRectangle(50, 300);
 }
 public ellipse = (): void => {
  this.ImageEditorInstance.drawEllipse(1000, 300);
 }
 public line = (): void => {
  this.ImageEditorInstance.drawLine(1000, 150);
 }
}

Рисование от руки

Вы можете легко вставить аннотацию рисунка от руки и настроить ее, изменив цвет и ширину обводки. Аннотацию к рисованию от руки можно сделать либо с помощью панели инструментов, либо с помощью метода freehandDraw.

На панели инструментов вы можете вставить аннотацию, нарисованную от руки, нажав кнопку раскрывающегося списка Аннотация и выбрав параметр Рисование от руки. После включения опции рисования от руки контекстная панель инструментов будет включена для настройки цвета и ширины обводки.

В следующем примере кода метод freehandDraw используется для переключения рисунков от руки.

<div>
 <div style=”padding-bottom: 10px;”>
  <button class=”e-btn” (click)=”freehanddraw()”>Freehand Draw</button>
 </div>
 <div id=”wrapperDiv” style=”width:550px; height:350px;”>
  <ejs-imageeditor (created)=”created()” #ImageEditor [toolbar]=’toolbarItems’></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild(‘ImageEditor’)
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open(“http://localhost:6969/image/bridge.png”);
 }
 public freehanddraw = (): void => {
  this.ImageEditorInstance.freeHandDraw(true);
 }
}

Масштабирование и панорамирование изображения

Редактор изображений Angular позволяет пользователям масштабировать и панорамировать изображение. Масштабирование и панорамирование можно выполнять либо с помощью панели инструментов, либо методом масштабирования и панорамирования.

На панели инструментов мы можем выполнять масштабирование, нажимая кнопки Увеличить и Уменьшить, которые включают параметр Панорамирование на панели инструментов.

В следующем примере кода методы zoomIn, zoomOut и pan используются для увеличения, уменьшения и панорамирования изображения соответственно.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="zoomIn()">Zoom In</button>
  <button class="e-btn" (click)="zoomOut()">Zoom Out</button>
  <button class="e-btn" (click)="pan()">Pan</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public zoomIn = (): void => {
  this.ImageEditorInstance.zoom(0.1);
 }
 public zoomOut = (): void => {
  this.ImageEditorInstance.zoom(-0.1);
 }
 public pan = (): void => {
  this.ImageEditorInstance.pan(true);
 }
}

Настройка панели инструментов

Вы можете настроить встроенную панель инструментов с помощью свойства toolbar. Контекстная панель инструментов включена при вставке аннотаций. Вы также можете настроить панель инструментов с помощью события toolbarUpdating.

В следующем примере кода параметр аннотации включается только с параметрами текста, прямоугольника и эллипса с помощью свойства toolbar, а контекстная панель инструментов для аннотации прямоугольника отображается только цветом обводки за счет исключения цвета заливки. и ширину штриха с помощью события toolbarUpdating.

<div>
 <div id=”wrapperDiv” style=”width:550px; height:350px;”>
  <ejs-imageeditor (toolbarUpdating)=”toolbarUpdating($event)” (created)=”created()” #ImageEditor [toolbar]=’toolbarItems’></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild(‘ImageEditor’)
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [‘Annotate’, ‘Text’, ‘Rectangle’, ‘Ellipse’];
 public created = (): void => {
  this.ImageEditorInstance.open(“http://localhost:6969/image/bridge.png”);
 }
 public toolbarUpdating = (args: ToolbarEventArgs): void => {
  if (args.toolbarType === ‘shapes’) {
   args.toolbarItems = [‘strokeColor’];
  }
 }
}

Шаблон панели инструментов

Кроме того, пользователи могут заменить панель инструментов редактора изображений пользовательским интерфейсом пользователя, используя свойство toolbarTemplate.

См. следующий пример кода.

<div>
 <div id="wrapperDiv" style="width: 550px; height: 350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor>
   <ng-template #toolbarTemplate let-data>
    <div style="padding: 10px; border-bottom: 1px solid darkgray;">
     <button class="e-btn" (click)="text()">Add Text</button>
     <button class="e-btn" (click)="rectangle()">Rectangle</button>
     <button class="e-btn" (click)="line()">Line</button>
    </div>
   </ng-template>
  </ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = ['Annotate', 'Text', 'Rectangle', 'Ellipse'];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public text = (): void => {
  this.ImageEditorInstance.drawText(50, 50, 'Syncfusion');
 }
 public rectangle = (): void => {
  this.ImageEditorInstance.drawRectangle(50, 300);
 }
 public line = (): void => {
  this.ImageEditorInstance.drawLine(1000, 150);
 }
}

Адаптивный и сенсорный пользовательский интерфейс

По умолчанию редактор изображений Angular адаптируется ко всем мобильным устройствам в зависимости от размера экрана. Это сенсорный компонент, поэтому пользователи могут использовать свой палец, ручку или мышь на настольных и мобильных устройствах для редактирования изображения.

Как это использовать

У нас есть набор ресурсов для вас, в том числе наши живые демонстрации Angular Image Editor и документация, в которой объясняются наши функции настройки.

Заключение

Спасибо за прочтение! Мы надеемся, что вам понравилось это краткое введение в дизайн и функции нашего нового компонента Angular Image Editor. Если вы хотите попробовать, загрузите последнюю доступную версию Essential Studio 2022 Volume 3. Испытайте прекрасное редактирование изображений с помощью этого компонента и поделитесь своими ценными отзывами в разделе комментариев ниже.

Вы также можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

• Syncfusion Essential Studio 2022 Volume 3 уже здесь!
• Что нового в 2022 году, том 3: Essential JS 2
• 7 главных особенностей Angular 14
• Управление шаблонами Angular против реактивных форм

Первоначально опубликовано на https://www.syncfusion.com 11 ноября 2022 г.