Слои JS Fabric с одним слоем с элементами управления

102
11

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

Я попытался установить canvas.controlsAboveOverlay = true; но это не имеет никакого эффекта.

http://jsfiddle.net/53p2ym7c/1/

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

спросил(а) 2019-04-18T10:05:00+03:00 1 год, 2 месяца назад
1
Решение
122

Вы можете использовать фоновое и оверлейное изображение для нижнего и верхнего слоя соответственно.

DEMO

var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';

var canvas = new fabric.Canvas('c', {
preserveObjectStacking: true,
height: 1500,
width: 1000,
});
canvas.controlsAboveOverlay = true
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: "rgba(102,153,255,0.5)",
cornerSize: 12,
padding: 5
});

fabric.Image.fromURL("http://tfgasjstaging.wpengine.com/wp-content/uploads/2019/04/test.png", (img) => {
var img1 = img.scale(1).set({
left: 0,
top: 0,
selectable: false,
hasControls: false
});
img1.scaleToWidth(canvas.getWidth());
canvas.centerObject(img1);
canvas.setBackgroundImage(img1, function() {
canvas.renderAll()
});
fabric.Image.fromURL(img01URL, (img) => {
var img2 = img.scale(1).set({
left: 0,
top: 0,
selectable: true,
hasControls: true
}).scaleToHeight(300);

img2.applyFilters();
canvas.add(img2);
canvas.centerObject(img2);
img2.setCoords();
canvas.setActiveObject(img2);

fabric.Image.fromURL("http://tfgasjstaging.wpengine.com/wp-content/uploads/2019/04/mask.png", (img) => {
var img3 = img.scale(1).set({
left: 0,
top: 0,
selectable: false,
hasControls: false
})
img3.applyFilters();
canvas.centerObject(img3);
canvas.setOverlayImage(img3, function() {
canvas.renderAll()
});
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

ответил(а) 2019-04-18T13:04:00+03:00 1 год, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема