You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.5 KiB
HTML
75 lines
2.5 KiB
HTML
<!dhtml lib>
|
|
|
|
<script>
|
|
import {
|
|
attachStageResizer,
|
|
addImageWithPreview,
|
|
// если нужно, можно импортировать fit/cover отдельно
|
|
} from "./@shared/konva-utils.js";
|
|
</script>
|
|
|
|
<konva-editor>
|
|
<script>
|
|
this.stage = null;
|
|
this.layer = null;
|
|
this._resizeObserver = null;
|
|
this._cancelImage = null;
|
|
|
|
mounted() {
|
|
const width = this.root.clientWidth || 500;
|
|
const height = this.root.clientHeight || 400;
|
|
|
|
this.stage = new Konva.Stage({
|
|
container: this.root,
|
|
width,
|
|
height,
|
|
});
|
|
|
|
this.layer = new Konva.Layer();
|
|
this.stage.add(this.layer);
|
|
|
|
// передаём колбэк, чтобы при ресайзе пересчитывать cover для всех изображений
|
|
this._resizeObserver = attachStageResizer(this.root, this.stage, () => {
|
|
// пересчитать cover для всех изображений на слое (если они уже в cover)
|
|
this.layer.find('Image').each(img => {
|
|
// можно использовать updateImageToCover или просто coverImageToStage
|
|
// импортируй updateImageToCover, если хочешь без анимации
|
|
// coverImageToStage(img, this.stage);
|
|
// здесь — без анимации, чтобы не запускать много tween'ов при ресайзе
|
|
const imgNode = img;
|
|
const sw = this.stage.width();
|
|
const sh = this.stage.height();
|
|
const iw = imgNode.image().naturalWidth;
|
|
const ih = imgNode.image().naturalHeight;
|
|
const scale = Math.max(sw / iw, sh / ih);
|
|
imgNode.width(iw);
|
|
imgNode.height(ih);
|
|
imgNode.scale({ x: scale, y: scale });
|
|
imgNode.x((sw - iw * scale) / 2);
|
|
imgNode.y((sh - ih * scale) / 2);
|
|
});
|
|
this.layer.batchDraw();
|
|
});
|
|
|
|
// добавить картинку: сначала реальный размер, через 500ms — cover
|
|
this._cancelImage = addImageWithPreview(this.stage, this.layer, '1.jpg', 500, {
|
|
crossOrigin: 'Anonymous',
|
|
initialPosition: 'top-left',
|
|
coverDuration: 0.25
|
|
});
|
|
}
|
|
|
|
unmounted() {
|
|
// отменяем таймер/анимацию, если есть
|
|
this._cancelImage?.();
|
|
|
|
this._resizeObserver?.disconnect();
|
|
this._resizeObserver = null;
|
|
|
|
this.stage?.destroy();
|
|
this.stage = null;
|
|
this.layer = null;
|
|
}
|
|
</script>
|
|
</konva-editor>
|