Question

我创建了一个应用程序，在其中用户可以通过应用程序生成用于创建组织域电子邮件的请求，而无需在纸上手动填写表格。用户可以填写表格，然后将表格发送给人事部门，然后在获得人事部门批准后，将表格发送给IT部门，并在IT经理批准后，由IT人员创建电子邮件。我想授予用户查看和检查其请求状态的权利，无论它是在人力资源批准流程中还是在IT批准流程中。他所需要做的就是通过ID进行搜索，我将在提交表单时提供ID。我附上了我真正希望您看到的图片。说明：当用户搜索并跟踪他的请求时，我想通过flag显示状态。我的意思是，如果正在进行HR处理，则该标志将显示在HR上。同样适用于IT。我在数据库中检查所有批准。就像我有人力资源审批，IT审批一样。在我的桌子上。我在这里需要的我不知道任何可以提供这种视觉效果的Api或JS库。我怎样才能做到这一点。我正在使用.net mvc Sql和实体框架作为我的核心技术。我使用svg线在x轴上创建了该线，但它不能满足我的要求，代码出了什么问题。还是有其他好的创建方法？

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg" version="1.1">


 <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

如果有人指导您提供代码段，我将不胜感激。

我也尝试过这种方法，但是它也不起作用

            <div style="width:auto ; margin-left:5%" class="col-md-2">

                IT
            </div>
            <div style="width:auto ; margin-left:5%" class="col-md-2">
                HR
                <div>
                    <img src="~/Content/148878.png" />
                </div>
            </div>
            <div style="width:auto ; margin-left:5%" class="col-md-2">
                VP
            </div>
            <div style="width:auto ; margin-left:5%" class="col-md-2">
                FH
            </div>
            <div style="width:auto; margin-left:5% " class="col-md-2">
                SR
            </div>
            <div style="width:auto ; margin-left:5%" class="col-md-2">
                FH
            </div>

</div>

Answer 1

您是否考虑过使用画布？ HTML Canvas可以通过JS轻松控制，并且可以轻松加载图像。您还可以加载图像和文本，因此可以轻松加载行的图像，标题的文本（尽管也可以是图像），并在需要的位置加载标志的图像。只需很少的代码，也不需要画布的经验。一些Google搜索可以告诉您所有您需要了解的内容。您可以在https://www.w3schools.com/graphics/default.asp

的画布教程中找到很多与此相关的教程。

如果您对本教程没有回答有关使用画布的任何问题，则很可能在堆栈溢出时在这里有答案。

我附上了摘要。片段中的画布似乎有点模糊，但是您不应在实际网页上遇到此问题。我还留下了一些可能对摘要有帮助的评论。如果您决定使用画布，我仍然敦促您访问链接到的画布教程。这非常有帮助，只需几分钟即可在本教程中更好地学习摘要中编写的所有内容。

window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        
        // Draw your title. You may use text or load an image.
        ctx.font = "15px Arial";
        let text = "Email Request Process Live Tracking";
        ctx.fillStyle = "#0000ff";
        ctx.fillText(text,canvas.width/2 - ctx.measureText(text).width/2,20);
        
        /* Draw the progress bar. You would probably want to use an image here
        but I do not have the image, so I am drawing a gray rectangle 
        as a placeholder. */
        ctx.fillStyle = "#a2a2a2";
        let startX = 40;
        let startY = canvas.height - 50;
        let width = canvas.width - 80;
        let height = 10;
        ctx.fillRect(startX, startY, width, height);
        
        /* Place the flag somewhere along the progress bar. I am keeping track
        of the coordinates for specific positions on the bar in a JSON object
        so that you only have to change the variable "progress" to change the
        position. Try it out. For this you will probably want to use an image.*/
        var progress = "it";
        let locations = {
          function: {x: startX, y: startY},
          hr: {x: startX + width/5, y: startY},
          it: {x: startX + 2 * (width/5), y: startY},
          processed: {x: startX + 3 * (width/5), y: startY},
          actionPerformed: {x: startX + 4 * (width/5), y: startY},
          handedoverClosed: {x: startX + width, y: startY}
        };
        let img = new Image;
        /* I got this image off of google images. In reality, you'll probably
        want to upload your own flag image and use that instead.*/
        img.src = "https://static.goshopping.dk/products/300/kay-bojesen-flag-til-garder-39021-6382-1.jpg";
        let x = locations[progress].x
        let y = locations[progress].y
        ctx.drawImage(img, locations[progress].x, locations[progress].y - 40, 20, 40)
        
}

#myCanvas {
  border:1px solid #d3d3d3;
  width:100%;
  height:100%;
}

#invis {
  display:none
}

<canvas id="myCanvas"></canvas>
<!–– Normally you would not have to load this image in, but I code snippet fails to load the image in the canvas without it for whatever reason. Because it is uneccessary and should not be displayed, I've set its display to none to stop it from being rendered.-->
<img src="https://static.goshopping.dk/products/300/kay-bojesen-flag-til-garder-39021-6382-1.jpg" id="invis">

如何用svg或使用html div画线

1 个答案: