JavaScript的HTML图形（带顶点）

Question

有没有什么方法可以用HTML创建基本的2D形状，除了矩形和圆形，使用JavaScript？

例如，假设我们有一个<canvas></canvas>（因为任何其他元素不能被修改，我想，还是？的方式）元素，width:100px，height:300px和background:black。 如何将它的右上角（右上顶点）移动到不同的位置以创建不同的形状，然后是矩形？

来源：

point one: x: 0px /y: 0px 
point two: x: 100px/y: 0px 
point three: x: 100px/y: 300px 
point four: x: 0px /y: 300px 

要：

point one: x: 0px /y: 0px 
point two: x: 120px/y: -20px 
point three: x: 100px/y: 300px 
point four: x: 0 /y:300px 

（point two是一个改变）

是否有任何JavaScript的图形库，HTML，将使这是一个简单的任务？沿着drawable.vertices[1].move(20, -20)这条线移动第二个顶点20px在x上和-20px在y上。

Answer 1

你看过pixi.js吗？ （http://www.pixijs.com/）它是一个使用WebGL的二维库，但如果浏览器不支持WebGL，则会回退到画布。如果你想去3D库还考虑three.js所（http://threejs.org/）

专门为画布另一个相当受欢迎的图形库是拉斐尔库（http://raphaeljs.com/）

更新：

初始化一个带拉斐尔的画布，一个偏移量为100px，尺寸为300x300px的元素。请注意，我在这里依赖于JQuery来获取“mycanvas”元素。

var paper = Raphael($("#mycanvas"), 100, 300,300); 

吸引你需要使用路径功能是通过在SVG路径字符串拉斐尔的“纸”对象（如果你有兴趣阅读更多关于SVG路径标准，你可以找到一个任意多边形一些信息在这里：http://www.w3.org/TR/SVG/paths.html#PathData）

paper.path("M150,0L200,100L100,100Z").attr("fill","#F00"); 

末离开路径属性填充多边形红色。

在两行中，我使用SVG路径生成了一个红色三角形。比我想象的更轻巧。

现在基于您的最后一条评论，您希望这是互动的。这不会像你想象的那么简单。

你正在努力实现将要求你什么粗略的方法：

1）保持顶点数组，你要变成一个SVG字符串。

2）您将不得不跟踪画布上的鼠标按下事件。每次找到鼠标停止事件时，您都必须检查它是否位于顶点列表中的顶点上，因此为错误添加一个ε是明智的，以便用户不必精确点击一个像素，而是在靠近顶点的区域。您可以使用装箱方法为您提供某种围绕顶点的box epsilon。创建对鼠标向下的顶点的引用。

3）当鼠标移动事件，同时鼠标按钮也向下，并且有一个活动顶点时，您想根据鼠标坐标修改该顶点的位置。

4）在鼠标上移事件中，根据您在多边形中有多少个顶点，您可以使用paper.clear（）清除纸张，然后通过从您的图像生成新的SVG路径字符串来重绘路径顶点列表并使用paper.path（...）添加新的SVG字符串。

这里是对plnkr一个链接，我创建画出你三角的多边形：http://plnkr.co/edit/AK5zO1ZqBTerMf9AzS88?p=preview

最后奖励更新：

所以我决定在plnkr做到这一点给你，让你可以了解如何操作路径并强制重绘。本质上，JavaScript为三角形绘制两条路径，并在每个三角形顶点的末端绘制蓝色圆点。我在控制路径元素的拖动中注册了两个委托函数，以便它们中的每一个都可以更新它们的X和Y值以及相应的三角形顶点。看看这个plnkr，让我知道是否没有任何意义。

http://plnkr.co/edit/o5QHap7NV1SYIbsS76f5

享受！ :)