JavaScript HTML图形（带顶点）(JavaScript HTML graphics (with vertices))

JavaScript HTML图形（带顶点）(JavaScript HTML graphics (with vertices))

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

例如，假设我们有一个<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是改变了一个）

是否有任何HTML图形库可以使这个任务变得简单？ 沿drawable.vertices[1].move(20, -20)行的东西移动第二个顶点20px在x和-20 px在y上。

Is there any way to create basic 2D shapes in HTML besides rectangles and circles, using JavaScript?

For example, let's say we have a <canvas></canvas> (because any other element can't be modified the way I'm trying, or?) element, with width:100px, height:300px and background:black. How can I move it's top-right corner (top right vertex) to a different position to create a different shape then a rectangle?

From:

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

To:

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 is the one changed)

Is there any JavaScript graphics library for HTML that would make this a simple task? Something along the line of drawable.vertices[1].move(20, -20) to move the second vertex 20px on x and -20 px on y.

最满意答案

你看过pixi.js了吗？ （ http://www.pixijs.com/ ）它是一个利用WebGL的2d库，但如果浏览器不支持WebGL则会回到画布上。 如果你想去3d库，也可以看看Three.js（ http://threejs.org/ ）

专门用于画布的另一个相当流行的图形库是Raphael库（ http://raphaeljs.com/ ）

更新 ：

使用Raphael在偏移量为100px且尺寸为300x300px的元素中初始化画布。 请注意，我在这里依赖JQuery来获取“mycanvas”元素。

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

要绘制任意多边形，您需要使用传递svg路径字符串的Raphael“paper”对象上的路径函数（如果您有兴趣阅读有关SVG路径标准的更多内容，可以在此处找到一些信息： http：/ /www.w3.org/TR/SVG/paths.html#PathData ）

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

路径末端的属性用红色填充多边形。

在两行中，我使用SVG路径生成了一个红色三角形。 比我认为你不会得到更轻量级。

现在根据您的上一条评论，您希望这是一个互动的。 这不会像你想象的那么简单。

您想要实现的目标的粗略方法将要求您：

1）保留要转换为SVG字符串的顶点数组。

2）您将不得不在画布上跟踪鼠标按下事件。 每当你发现鼠标按下事件时，你将不得不检查它是否在顶点列表的顶点上，最好为错误添加epsilon，这样用户就不必完全点击一个像素，而是在靠近顶点的区域。 你可以使用一个拳击方法给你一些围绕顶点的盒子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

请享用！ :)

Have you taken a look at pixi.js? (http://www.pixijs.com/) it is a 2d library which utilizes WebGL but falls back to canvas if WebGL is not supported by the browser. If you want to go to 3d libraries also look into Three.js (http://threejs.org/)

Another fairly popular graphics library specifically for canvas is the Raphael library (http://raphaeljs.com/)

Update:

To initialize a canvas with Raphael in an element with an offset of 100px and with dimensions of 300x300px. Take note that I have a dependency on JQuery here to get the "mycanvas" element.

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

To draw an arbitrary polygon you need to use the path function that is on the Raphael "paper" object passing in the svg path string (if you are interested in reading more on the SVG path standard you can find some info here: http://www.w3.org/TR/SVG/paths.html#PathData)

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

The attribute at the end off the path fills the polygon with red.

In two lines I have generated a red triangle using SVG paths. More lightweight than that I don't think you are going to get.

Now based on your last comment you want this to be interactive. This is not going to be as simple as you think.

A rough method for what you are trying to achieve will require you to:

1) keep an array of vertices that you are going to transform into an SVG string.

2) You are going to have to keep track of mouse down events on the canvas. Each time you find a mouse down event you are going to have to check to see if it is over a vertex in your vertex list, it would be wise to add an epsilon for error so that the user doesn't have to click exactly on a pixel but rather in an area close to vertex. You can use a boxing method to give you some sort of box epsilon around the point of the vertex. Create a reference to the vertex you are having the mouse down.

3) On the mouse move event while the mouse button is also down and there is an active vertex you want to modify the position of that vertex based on the mouse coordinates.

4) On the mouse up event and depending on how many vertices you have in your polygon you may be able to just clear the paper with paper.clear() and redraw the path by generating the new SVG path string from your vertex list and using paper.path(...) adding your new SVG string.

Here is a link to the plnkr that I created to draw the triangle polygon for you: http://plnkr.co/edit/AK5zO1ZqBTerMf9AzS88?p=preview

FINAL BONUS UPDATE:

So I decided to do this for you in plnkr so you can see how to manipulate the paths and force a redraw. Essentially the javascript draws two paths one for the triangle and one for the blue dots at the end of each triangle vertex. I registered two delegate functions in the drag of the control path elements so that each one of them can update their X and Y values as well as the corresponding triangle vertex. Take a look at the plnkr and let me know if something doesn't make sense.

http://plnkr.co/edit/o5QHap7NV1SYIbsS76f5

Enjoy! :)

JavaScript HTML图形（带顶点）(JavaScript HTML graphics (with vertices))

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

例如，假设我们有一个<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是改变了一个）

是否有任何HTML图形库可以使这个任务变得简单？ 沿drawable.vertices[1].move(20, -20)行的东西移动第二个顶点20px在x和-20 px在y上。

Is there any way to create basic 2D shapes in HTML besides rectangles and circles, using JavaScript?

For example, let's say we have a <canvas></canvas> (because any other element can't be modified the way I'm trying, or?) element, with width:100px, height:300px and background:black. How can I move it's top-right corner (top right vertex) to a different position to create a different shape then a rectangle?

From:

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

To:

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 is the one changed)

Is there any JavaScript graphics library for HTML that would make this a simple task? Something along the line of drawable.vertices[1].move(20, -20) to move the second vertex 20px on x and -20 px on y.

最满意答案

你看过pixi.js了吗？ （ http://www.pixijs.com/ ）它是一个利用WebGL的2d库，但如果浏览器不支持WebGL则会回到画布上。 如果你想去3d库，也可以看看Three.js（ http://threejs.org/ ）

专门用于画布的另一个相当流行的图形库是Raphael库（ http://raphaeljs.com/ ）

更新 ：

使用Raphael在偏移量为100px且尺寸为300x300px的元素中初始化画布。 请注意，我在这里依赖JQuery来获取“mycanvas”元素。

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

要绘制任意多边形，您需要使用传递svg路径字符串的Raphael“paper”对象上的路径函数（如果您有兴趣阅读有关SVG路径标准的更多内容，可以在此处找到一些信息： http：/ /www.w3.org/TR/SVG/paths.html#PathData ）

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

路径末端的属性用红色填充多边形。

在两行中，我使用SVG路径生成了一个红色三角形。 比我认为你不会得到更轻量级。

现在根据您的上一条评论，您希望这是一个互动的。 这不会像你想象的那么简单。

您想要实现的目标的粗略方法将要求您：

1）保留要转换为SVG字符串的顶点数组。

2）您将不得不在画布上跟踪鼠标按下事件。 每当你发现鼠标按下事件时，你将不得不检查它是否在顶点列表的顶点上，最好为错误添加epsilon，这样用户就不必完全点击一个像素，而是在靠近顶点的区域。 你可以使用一个拳击方法给你一些围绕顶点的盒子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

请享用！ :)

Have you taken a look at pixi.js? (http://www.pixijs.com/) it is a 2d library which utilizes WebGL but falls back to canvas if WebGL is not supported by the browser. If you want to go to 3d libraries also look into Three.js (http://threejs.org/)

Another fairly popular graphics library specifically for canvas is the Raphael library (http://raphaeljs.com/)

Update:

To initialize a canvas with Raphael in an element with an offset of 100px and with dimensions of 300x300px. Take note that I have a dependency on JQuery here to get the "mycanvas" element.

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

To draw an arbitrary polygon you need to use the path function that is on the Raphael "paper" object passing in the svg path string (if you are interested in reading more on the SVG path standard you can find some info here: http://www.w3.org/TR/SVG/paths.html#PathData)

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

The attribute at the end off the path fills the polygon with red.

In two lines I have generated a red triangle using SVG paths. More lightweight than that I don't think you are going to get.

Now based on your last comment you want this to be interactive. This is not going to be as simple as you think.

A rough method for what you are trying to achieve will require you to:

1) keep an array of vertices that you are going to transform into an SVG string.

2) You are going to have to keep track of mouse down events on the canvas. Each time you find a mouse down event you are going to have to check to see if it is over a vertex in your vertex list, it would be wise to add an epsilon for error so that the user doesn't have to click exactly on a pixel but rather in an area close to vertex. You can use a boxing method to give you some sort of box epsilon around the point of the vertex. Create a reference to the vertex you are having the mouse down.

3) On the mouse move event while the mouse button is also down and there is an active vertex you want to modify the position of that vertex based on the mouse coordinates.

4) On the mouse up event and depending on how many vertices you have in your polygon you may be able to just clear the paper with paper.clear() and redraw the path by generating the new SVG path string from your vertex list and using paper.path(...) adding your new SVG string.

Here is a link to the plnkr that I created to draw the triangle polygon for you: http://plnkr.co/edit/AK5zO1ZqBTerMf9AzS88?p=preview

FINAL BONUS UPDATE:

So I decided to do this for you in plnkr so you can see how to manipulate the paths and force a redraw. Essentially the javascript draws two paths one for the triangle and one for the blue dots at the end of each triangle vertex. I registered two delegate functions in the drag of the control path elements so that each one of them can update their X and Y values as well as the corresponding triangle vertex. Take a look at the plnkr and let me know if something doesn't make sense.

http://plnkr.co/edit/o5QHap7NV1SYIbsS76f5

Enjoy! :)