时间戳

首页 > 解决方案 > 需要使用Javascript在矩形上动态切角

javascript - 需要使用Javascript在矩形上动态切角

问题描述

我有个问题。我正在创建表单，用户可以在其中输入每个角的坐标 x1,x2,y1,y2 以剪切左上角、右上角、左下角、右下角。这些坐标以毫米为单位，在用户输入数据后，他应该看到以下图像：

在此处输入图像描述

我使用 div 呈现的 racktangle 本身

 <div id='detailPlot' style=' position: relative;  width:300px;height:300px;background-color:white;border:1px solid black;   ' ></div>

我可以使用 Javascript 削减这些角落并在那里显示结果吗？

标签： javascripthtmlcss

解决方案

我会使用SVG Path而不是<div>元素。d您可以使用它的属性在定义的坐标之间画线：

<svg id="detailPlot" height="150px" width="150px">  
   <path d="M0 0 L100 0 L150 100 L150 150 L0 150 L0 0" stroke="black" stroke-width="1" fill="none" />
</svg>

使用javascript，您将能够随意更改其d属性：

var pathElement= document.querySelectorAll("path")[0];
pathElement.d = "M0 0 L300 0 L300 300 L0 300 L0 0";    // draw a rectangle

推荐阅读