Объект Fabric «Rect» размещается за пределами элемента «div» своего элемента «canvas». ⇐ CSS

[Anonymous]

Я работаю с Fabric js, и у меня возникла проблема с объектом «rect». Со следующей структурой моей страницы:

Код: Выделить всё

Объект «rect» размещается за пределами элемента div «div1» (который представляет собой элемент div, содержащий холст «micanvas», к которому предполагается добавить объект «rect»).
Результат выглядит следующим образом:


прямоугольник ниже.
Когда я использую такую ​​простую структуру:

Код: Выделить всё

Прямоугольник действительно появляется в элементе div «div1». Выглядит это так.


Следующая функция работает с javascript:

Код: Выделить всё

function Canvas2(nombrearchivo) {

let di = document.getElementById("div1");

di.style.backgroundImage = "url('/google/archivosdescargados/" + nombrearchivo + "')";
$("#div1").css("background-size", "contain");
$("#div1").css("background-repeat", "no-repeat");

const canvas = new fabric.Canvas(micanvas);

// create a rect object
const deleteIcon =
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='500.275px' height='500.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

var deleteImg = document.createElement('img');
deleteImg.src = deleteIcon;

fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';

const rect = new fabric.Rect({
left: 100,
top: 50,
width: 200,
height: 100,
objectCaching: false,
stroke: 'lightgreen',
strokeWidth: 4
});
rect.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: 16,
cursorStyle: 'pointer',
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 24,
});
canvas.add(rect);
canvas.setActiveObject(rect);

function deleteObject(_eventData, transform) {
const canvas = transform.target.canvas;
canvas.remove(transform.target);
canvas.requestRenderAll();

}

function renderIcon(ctx, left, top, _styleOverride, fabricObject) {
const size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(deleteImg, -size / 2, -size / 2, size, size);
ctx.restore();

}
}

Код стиля CSS выглядит следующим образом:

Код: Выделить всё

  
html, body {
height: 100%; margin: 0; width: 100%;
}

/* html {padding-top: 1%;} */
#div0 {
height: 100%;
width: 100%;
background-color: red;
}
#divDespl {
height: 3%;
width: 100%;
background-color: yellow;
}
#divCont {
display: inline-block;
height: 97%;
width: 100%;
background-color: orange;
}
#divIz {
height: 97%;
width: 3%;
background-color: navajowhite;
float: left;
}
#div1 {
display: block;
justify-content: center;
align-items: center;
height: 97%;
width: 94%;
background-color: blue;
z-index: 1
}
#divDe {
height: 97%;
width: 3%;
background-color: black;
float: right;
display: inline;

}

Интересно, в чем может быть причина того, что при размещении более сложной конструкции выходит прямоугольник. Сначала кажется, что это должно быть связано с атрибутами CSS элементов, но я не могу найти, какие именно или какие именно.
Изображение является фоновым изображением в div «div1» с «размером фона» как «содержать». Не думаю, что это может на это повлиять.

Подробнее здесь: https://stackoverflow.com/questions/792 ... as-element