在笛卡尔坐标系中绘制矩形

Question

我想在JavaScript中绘制以下图表。基本上，目标是在笛卡尔坐标系中绘制一些矩形。每个矩形可由4个点表示，其坐标为。

有谁知道如何绘制它？有没有图书馆这样做？理想情况下，我希望我可以调整一些示例代码，而不是从头开始绘制所有内容。

Answer 1

您有两个主要选择：

• SVG - 与HTML非常相似的矢量图形（您有具有属性的元素等）。你也可以使用CSS来设置SVG样式。
• canvas - 这基本上是一个可以用JS绘制的位图。
• （HTML） - 请注意，您也可以使用简单的HTML + CSS。

以下是关于这两个的一些教程：

• http://svgtutorial.com/manipulating-svg-with-javascript/
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

有许多第三方库可以帮助解决这个问题：

• https://d3js.org/
• http://dmitrybaranovskiy.github.io/raphael/
• http://fabricjs.com/
• http://paperjs.org/

以下是canvas的简单示例：

＆＃13;

＆＃13;

@foreach($inventories as $inventory)
    @foreach($inventory->items as $item)
        {{ $item->name }} or {{ $item->id }}
    @endforeach
@endforeach

＆＃13;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.strokeRect(0, 0, 400, 200);
ctx.strokeRect(0, 200 - 20, 20, 20);
ctx.strokeRect(30, 200 - 70, 20, 70);

＆＃13;

＆＃13;

＆＃13;