Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.08.2019, 14:00
Интересующийся
Отправить личное сообщение для shtangen Посмотреть профиль Найти все сообщения от shtangen
 
Регистрация: 21.08.2019
Сообщений: 11

Jшибка увеличения фото в angular-cropperjs, с помощью mat-slider
Здравствуйте, вот моя проблема.
У меня есть mat-slider на который я пытаюсь добавить функцию cropper.zoom, из библиотеки angular-cropperjs, чтобы по передвижению ползунка менять масштаб фото.
Пока смог добиться результата приближения и отдаления с помощью нажатия на кнопоки.
Во время перетягивания ползунка введет себя некорректно.

//cropper
@ViewChild('cropperObj', { static: false }) public cropperObj: CropperComponent;
//slider
	autoTicks = false;
	disabled = false;
	invert = false;
	showTicks = false;
	thumbLabel = false;
	vertical = false;
	max = 1;
	min = -1;
	step = 0.01;
	value = 0;

        // зум +
	zommUp() {
		this.cropperObj.cropper.zoom(0.1);
	}

        // зум -
	zoomDown() {
		this.cropperObj.cropper.zoom(-0.1);
	}

        // слайдер
        onInputChange(event: MatSliderChange) {
		this.cropperObj.cropper.zoom(+"0.0" + event.value);
		console.log(this.value, event.value);
	}

<mat-slider
	class="m-1"
	(input)="onInputChange($event)"
	[invert]="invert"
	[max]="max"
	[min]="min"
	[step]="step"
	[thumbLabel]="thumbLabel"
	[tickInterval]="tickInterval"
	[value]="value"
	[vertical]="vertical">
</mat-slider>
<button mat-icon-button class="dialog-b" mat-raised-button (click)="zommUp()"><i class="fas fa-plus"></i>
</button>
<button mat-icon-button class="dialog-b" mat-raised-button (click)="zoomDown()"><i class="fas fa-minus"></i>
</button>

Последний раз редактировалось shtangen, 21.08.2019 в 15:36.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
SSO авторизация с кроссдоменными запросами Windows server + Node.js + Angular sniffysko Angular.js 0 28.03.2019 11:42
user adaptive slider s24344 Элементы интерфейса 1 18.02.2016 11:21
user adaptive slider s24344 Элементы интерфейса 0 18.02.2016 11:14
custom adaptive slider s24344 Элементы интерфейса 0 18.02.2016 10:01
Angular task workflow mardoksp Angular.js 0 15.02.2016 20:34