在物理引擎中画圆弧

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载

因为需求的需要,要使用在物理引擎中使用四分之一圆弧,我们来看看怎么实现在物理引擎中画出四分之一的圆弧,

在物理引擎中绘制圆弧

一般来说,物理引擎都是提供一般的画图方法,比如:circle(圆)、polygon(不规则多边形)、rectangle(矩形) 等图形,但如果需要画出比较灵活又不规则的图形的话,那么就需要使用 svg 提供支持了。下面来探讨一下如何实现四分之一圆弧: 我们来看一下svg中的path标签可用参数:

指令

参数

说明

M

x y

将画笔移动到点(x,y)

L

x y

画笔从当前的点绘制线段到点(x,y)

H

x

画笔从当前的点绘制水平线段到点(x,y0)

V

y

画笔从当前的点绘制竖直线段到点(x0,y)

A

rx ry x-axis-rotation large-arc-flag sweep-flag x y

画笔从当前的点绘制一段圆弧到点(x,y)

C

x1 y1, x2 y2, x y

画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)

S

x2 y2, x y

特殊版本的三次贝塞尔曲线(省略第一个控制点)

Q

x1 y1, x y

绘制二次贝塞尔曲线到点(x,y)

T

x y

特殊版本的二次贝塞尔曲线(省略控制点)

Z

无参数

绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

可以们可以看到path标签的指令十分丰富功能也很强大,如果需要画圆弧,那么就是需要使用到A指令最合适不过了。 绘制圆弧指令:A rx ry x-axis-rotation large-arc-flag sweep-flag x y

具体可以理解为:

  • 画一段到(x,y)的椭圆弧。 椭圆弧的 x, y 轴半径分别为 rx,ry。
  • 椭圆相对于 x 轴旋转 x-axis-rotation 度。
  • large-arc=0表明弧线小于180度,large-arc=1表示弧线大于180度。
  • sweep=0表明弧线逆时针旋转, sweep=1表明弧线顺时间旋转。

说起来比较抽象,我们来看看下图

假如要画一个左下角的一个四分之一圆弧:

<svg width="100%" height="100%">
        <path d="M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z" fill="green"/>
    </svg>

得出结果:

  • M80 80 表示从画布的 x:80 y:80 开始画
  • A45 45 表示椭圆的x半径长度为45px ,y 半径长度为45px。(这里都为45,那么就是圆形啦)
  • 0 0 0 第一个0表示相对于x轴不旋转,第二个0表示只取弧线小于180那一段,第三个0表示逆时针画的那部分
  • 125 125 表示圆弧的结束部分。
  • L 128 80 Z 表示画直线到 x: 128 y: 80,Z 表示自动闭合路径。

从外形上来看像是一个外凸的圆弧,那么如果需要一个凹下去的圆弧那应该怎么实现呢?首先需要在脑海或纸上要有这么一幅图:

我们可以用上面的例子来稍作修改,弧还是我们需要的那段弧,只是直线的连接点不一样,那么我们只需要修改连接点可以了

```html
<svg width="100%" height="100%">
    <path d="M80 80 A 45 45, 0, 0, 0, 125 125 L 80 125 Z" fill="green"/>
</svg>

如果要向右上角的小圆弧呢?其实就是需要顺时针的小弧,那么把上面的代码的 sweep-flag 部分改为1就可以了。

```html
<svg width="100%" height="100%">
    <path d="M80 80 A 45 45, 0, 0, 1, 125 125 L 80 125 Z" fill="green"/>
</svg>

SVG到物理引擎的转换

因为我们这里使用的是matter.js 那么可以通过 matter.js 提供的方法 Svg.pathToVertices 来把svg转换为canvas路径。

$.get('http://localhost:8002/src//static/svg.svg').done((data) => {
  $(data).find('path').each((i, path) => {
    let points = Svg.pathToVertices(path, 30);

    World.add(world, Bodies.fromVertices(400, 80, [points], {
      render: {
        fillStyle: '#ffffff',
        strokeStyle: '#ffffff',
        lineWidth: 1
      }
    }, true));
  });
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

数据挖掘知识脉络与资源整理(七)–饼图

? ? 简介 饼图英文学名为Sector Graph, 有名Pie Graph。常用于统计学模块。2D饼图为圆形,手画时,常用圆规作图。 仅排列在工作表的一...

3027
来自专栏CDA数据分析师

【图表大师三】仿gartner清爽圆角矩阵图

在Gartner的报告中,常看到如下图的清爽圆角矩阵图。 ? 我很喜欢这种清爽的图表风格,其特点有:干净清爽的颜色,优雅的圆角绘图区,个性的XY坐标轴。...

2096
来自专栏葬爱家族

Android高德之旅(8)绘制线废话简单的api总结

绘制线会比绘制点稍微复杂点,抛开一些复杂的属性不谈,主要分为三类:实线、虚线、纹理。绘制线在自定义地图中是非常重要的一个环节。

3925
来自专栏数据小魔方

sparklines迷你图系列5——Evolution(Horizon)

今天跟大家分享区域(面积图)图的一个变体——水平线图。 之所以说是面积图的变体,因为这种水平线图,表达的信息与面积图几乎差不多,差别仅仅在图表呈现形式上。 ? ...

3236
来自专栏腾讯IVWEB团队的专栏

SVG 快速入门

SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。

5761
来自专栏用户2442861的专栏

Python PIL ImageDraw 和ImageFont模块学习

http://blog.csdn.net/dou_co/article/details/17618319

1K2
来自专栏深度学习之tensorflow实战篇

Python生成词云图,TIIDF方法文本挖掘: 词频统计,词云图

python中使用wordcloud包生成的词云图。 下面来介绍一下wordcloud包的基本用法。 class wordcloud.WordCloud(fon...

5666
来自专栏jojo的技术小屋

原 CSS3 filter

作者:汪娇娇 日期:2016.10.9 其实之前几乎都没用过filter属性,就算知道也只是在脑中留了点浅浅的印象,直到最近因为项目的原因,才对filter进行...

2083
来自专栏闪电gogogo的专栏

Matplotlib

1632
来自专栏逍遥剑客的游戏开发

Direct3D学习(三):光影贴图

2998

扫码关注云+社区

领取腾讯云代金券