Fabric“矩形”对象放置在其“canvas”元素的“div”元素之外

问题描述 投票：0回答：1

我正在使用 Fabric js，但我遇到了“矩形”对象的问题。我的页面结构如下：

<div id="div0">
    <div id="divDespl"></div>
    <div id="divCont">
        <div id="divIz"></div>
        <div id="div1" >
            <canvas id="micanvas"></canvas>
        </div>
    </div>
</div>

“rect”对象放置在“div1”div 的外部（该 div 包含应将“rect”对象添加到的“micanvas”画布）。

结果如下所示：

image

下面是矩形。

当我使用这样的简单结构时：

<div id="div1" >
    <canvas id="micanvas"></canvas>
</div>

矩形确实出现在 div“div1”中。看起来像这样。

image

使用 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样式代码如下：

  <style type="text/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;
             
         }

         </style>

我想知道为什么在放置更复杂的结构时会出现矩形。乍一看似乎肯定是元素的 CSS 属性造成的，但我找不到是哪一个或哪一个。

图像作为div“div1”中的背景图像，“background-size”为“contain”。我认为这不会影响它。

javascript css fabric
1个回答
0
投票

总结：您尝试使太多 

<div>
的高度为 100%（和 97%）。因此，并非所有东西都垂直适合，导致其中一块织物的画布向下移动。

简单的修复方法是删除 divIz 

<div>
。

更长的解释：fabric.js 使用 

<canvas>
创建第二个 
position relative
。这是相对于页面上的正常位置而言的。 divIz 上 97% 的高度 
<div>
将正常位置移至页面下方。

要查看原始代码中发生的情况，请在 

border
元素周围应用 css 
canvas
，您将在页面底部看到第二个 
canvas
。您还可以使用浏览器的调试环境并检查 
canvas
元素以查看有两个元素以及结构已应用于它们的位置。

Canvas2("")

function Canvas2(nombrearchivo) {
       
        let di = document.getElementById("div1");
       
        // EDIT For demo
        // di.style.backgroundImage = "url('/google/archivosdescargados/" + nombrearchivo + "')";
        di.style.backgroundImage = "url('https://placebear.com/800/300.jpg')";
        
        $("#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();

        }
}
/* EDIT Debug */
canvas {
  outline: solid 4px cyan;
}

 
         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;
             
         }
<script src="https://cdn.jsdelivr.net/npm/fabric@latest/dist/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="div0">
    <div id="divDespl"></div>
    <div id="divCont">
<!--        <div id="divIz"></div>
  -->
        <div id="div1" >
            <canvas id="micanvas"></canvas>
        </div>
    </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.