Question

我知道这已经在SO上被问过几次了（例如here），但是我似乎无法使它生效。

我正在尝试：

显示图像
在每个画布的顶部放置一个画布
根据下面的图像让用户在顶部画布上绘画
从所有画布中获取数据以存储在本地。

我无法使CSS正常工作，以使画布彼此叠置，并且我尝试了几种方法。

HTML：

<div class="row">
<div class="pb-2 justify-content-center">
    <h2><strong>Drawing test</strong></h2>
    <div class="justify-content-center">
        <form enctype="multipart/form-data" method="post" action="">{% csrf_token %}
            <div class="wrapper">
                <canvas id="dorsal" height="512" width="512"></canvas>
                <canvas id="dorsal-duplicate" height="512" width="512"></canvas>
            </div>
        </form>
    </div>
</div>

CSS

canvas {
position: absolute;
top: 0;
left: 0;
}

.wrapper {
position: relative;
width: 512px;
height: 512px;
}

.wrapper canvas {
position: absolute;
top: 0;
left: 0;
}

JS

var canvas1 = document.getElementById("dorsal"), ctx1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("dorsal-duplicate"), ctx2 = canvas2.getContext("2d");

var background1 = new Image();
var to_draw_on = new Image();

background1.src = "{% static aspects.Dorsal.0 %}";  /* image from Django static folder */

background1.onload = function(){ctx1.drawImage(background1,0,0);}
to_draw_on.onload = function(){ctx2.drawImage(to_draw_on,0,0);}

/* code to draw on the second canvas */

这只会导致第二个画布位于第一个画布下方，因此当我进行绘制时，将无法跟踪对象的轮廓。

Answer 1

静态模板标记的用法是

{% static 'static_file_here.extension' %}

所以基本上是代码background1.src = "{% static aspects.Dorsal.0 %}"; 应该是background1.src = "{% static 'aspects.Dorsal.0' %}";

Answer 2

实际上，我不确定为什么您的版本不起作用（应该原样！），但是这是一个使用您的代码和一些CSS来检查重叠的版本。阅读CSS中的注释。完成后，删除多余的代码，然后再次启用.wrapper canvas { top: 0 }。

如果没有Java脚本，我可能会添加，我不使用Django。

但是，您的JS new Image()似乎没有大小参数，ctx.drawimage仅具有位置（0,0），但没有（高度，宽度）。

因此，高度= 0，宽度= 0不会产生任何重叠...

忘了提及：给canvas和z-index两个，这样您就可以控制哪个位于顶部。

更新

添加了Javascript和第三个canvas以证明代码可以按预期工作。如之前建议的那样，还为每个画布插入z-index。从“ Lorem Picsum”中检索一些随机图片以填充画布。

请注意，我在Javascript中使用了正确的width / height参数...。

var canvas1 = document.getElementById("dorsal")          , ctx1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("dorsal-duplicate"), ctx2 = canvas2.getContext("2d");
var canvas3 = document.getElementById("extra-img")       , ctx3 = canvas3.getContext("2d");

var background1 = new Image(512,256);
var to_draw_on  = new Image(512,256);
var extra_img   = new Image(512,256);

background1.src = "https://picsum.photos/512/512?random=0";
to_draw_on.src  = "https://picsum.photos/512/512?random=1";
extra_img.src   = "https://picsum.photos/512/512?random=2";

background1.onload = function(){ctx1.drawImage(background1,0,0);}
to_draw_on.onload  = function(){ctx2.drawImage(to_draw_on,0,0);}
extra_img.onload   = function(){ctx3.drawImage(extra_img,0,0);}

/* code to draw on the second canvas */

.wrapper {
position: relative;
width : 512px;
height: 512px;
}

.wrapper canvas {
position: absolute;
left: 0;
/* top : 0; /* temporary disabled */

/*ADDED*/
width: 100%; height: 100%; /* fill-parent */
border: 2px dotted black;
}

/*
    To check the overlap:
    - make #dorsal fill the top half of 512px
    - make #dorsal-duplicate fill the bottom half of 512px
*/
#dorsal {
    top : 0;
    height: 50%;
    background-color: green;
    z-index: 1;
}
#dorsal-duplicate {
    background-color: red;
    bottom: 0;
    height: 50%;

    z-index: 2;
}
#extra-img {
    background-color: blue;
    left: 64px; bottom: 128px;
    height: 50%; width: 75%;

    z-index: 3;
}

<div class="wrapper">
    <div class="pb-2 justify-content-center">
        <h2>
            <strong>Drawing test</strong>
        </h2>
        <p>removed width/height values from &lt;canvas&gt;, redundant.
        <div class="justify-content-center">
            <form enctype="multipart/form-data" method="post" action="">{% csrf_token %}
                <div class="wrapper">
                    <canvas id="dorsal"          ></canvas>
                    <canvas id="dorsal-duplicate"></canvas>
                    <canvas id="extra-img"       ></canvas>
                </div>
            </form>
        </div>
    </div>
</div>

将两个画布元素彼此叠加放置

2 个答案: