-
svg 画 曲线 的 坐标 问题10
我在用fabric.js做一个画图的程序，
比如，
我的一个path值是
M 0 0 Q 100, 200, 200, 0，按照我的想象，应该是从原点开始的一条对称的曲线，可是实际情况是只出来一半。所以想问问，这个svg曲线的坐标问题。我现在的需求是，想在两个节点之间自动连接一条曲线。比如，有A，B连个节点，我获得了A的坐标，B的坐标，然后从A连到B，可是用曲线的话，它们的坐标值根本就对不上去。
具体的内容可以看附件中的图片的文字
2012年8月13日 11:55
添加评论
关注(0)
目前还没有答案
相关推荐
这篇文章“SVG 画动态线 实例”可能探讨了如何使用SVG元素和JavaScript来创建动态的线条动画。SVG提供了多种绘制线条的元素，如`<line>`、`<path>`或者`<polyline>`，每种都有其特定的应用场景。 1. `<line>`元素：...
1. **矢量图形编辑**：SVG画板提供基本图形元素（如圆形、矩形、线条、多边形等）的绘制工具，用户可以通过简单的拖拽或输入坐标来创建图形。此外，它还支持自由路径绘制，用户可以使用贝塞尔曲线或其他路径工具绘制...
至于SVG坐标系统，它是一个二维笛卡尔坐标系，其中(0,0)通常位于SVG容器的左上角。你可以通过指定x和y坐标来定位和绘制图形。在Snap.svg.js中，可以通过元素的`transform()`方法进行坐标转换，如平移、缩放等。 在...
在Android开发中，SVG（Scalable Vector Graphics）是一种用于绘制矢量图形的XML格式，它可以在不同分辨率的设备上保持清晰的显示效果。...同时，了解SVG动画的底层机制也有助于我们在遇到性能问题时进行优化。
路径由一系列的指令和坐标组成，如M（移动到）、L（直线到）、Q（二次贝塞尔曲线到）等，这些指令共同描绘出iPhone的轮廓。通过JavaScript控制这些路径的绘制顺序和速度，可以实现线条动态绘制的效果，给用户带来...
这款HTML5 SVG曲线图表代码是一个生动的例子，展示了如何在网页中集成动态、交互式的数据可视化。 SVG是一种基于XML的图像格式，这意味着它的图形由一系列几何形状构成，可以被脚本语言（如JavaScript）操控。在SVG...
然后，通过更新SVG中的眼珠元素的`cx`和`cy`坐标，使其跟随鼠标移动，从而营造出动态的视觉效果。 此外，为了提高性能和用户体验，开发者可能还考虑了SVG的优化策略，如减少不必要的路径点、合并相近的颜色和形状，...
在实时曲线图的场景中，SVG因其特性特别适合，因为它可以轻松地更新图形元素，从而实现动态数据显示。 在SVG中，实时曲线的实现主要涉及到以下几个关键点： 1. **SVG基本结构**： SVG文件通常以`<svg>`标签开始，...
SVG路径是由一系列坐标点定义的线条、曲线或其他形状，通过`<path>`元素在SVG中创建。这个元素的`d`属性包含了路径数据，由不同的命令和参数构成，如"M"（移动到）、"L"（直线到）、"C"（三次贝塞尔曲线到）等。在...
SVG路径动画的实现依赖于SVG的`<path>`元素，它能绘制出曲线、直线等各种形状。通过改变`d`属性中的坐标值，我们可以让这些路径动起来。例如，可以使用`stroke-dasharray`和`stroke-dashoffset`属性来创建描边动画，...
路径数据由一系列指令和坐标构成，如"M"（移动）、"L"（直线）、"C"（曲线）等，这些指令定义了线条的形状和位置。 当用户点击不同的分页圆点时，JavaScript会捕获这个事件并触发动画。动画的核心是改变SVG路径的...
在这个场景中，“曲线坐标跟随鼠标显示Xcontrol”指的是一个自定义的控件，它允许用户通过鼠标操作来查看曲线图的坐标值。这种控件在数据分析、图形可视化或工程应用等领域非常有用，因为它提供了交互式的用户体验，...
将SVG编辑器生成的曲线坐标值导入到HTML5 Canvas中，需要解析这些坐标并使用`beginPath()`、`moveTo()`、`bezierCurveTo()`或`quadraticCurveTo()`等方法绘制出相同的曲线。同时，还需要结合文字处理技术，如`...
在这个例子中，`<animate>`元素改变了矩形的`x`坐标，使其在2秒内从0平移到200。 2. `<animateTransform>`元素：此元素专门用于变换操作，如旋转（rotate）、缩放（scale）、平移（translate）和倾斜（skew）。...
路径由一系列命令和坐标组成，如"M"（移动到）、"L"（直线到）、"C"（曲线到）等。例如： ```svg , 50 10, 70 20 Z"> ``` 在这个例子中，"M10 20"表示从(10, 20)位置开始，"C30 30, 50 10, 70 20"是三次贝塞尔曲线...
2. **路径绘制**：SVG的`<path>`元素能绘制复杂的曲线和自由形状。通过`M`（移动到）、`L`（直线到）、`H`（水平线到）、`V`（垂直线到）、`C`（三次贝塞尔曲线）、`S`（平滑三次贝塞尔曲线）、`Q`（二次贝塞尔曲线...
在SVGPath中，大写字母表示绝对坐标，小写字母表示相对于前一个点的相对坐标。例如，`M 10 20 L 30 40`会绘制一条从(10,20)到(30,40)的直线，而`m 10 20 l 30 40`则会从当前点开始，先移动到(10,20)，然后画一条相对...
5. **路径（Path）**：`<path>`元素是SVG中最强大的图形构造工具，可以绘制复杂的曲线和形状，通过M（移动）、L（直线）、H（水平线）、V（垂直线）、C（三次贝塞尔曲线）、S（简化三次贝塞尔曲线）等命令来定义路径...
这涉及到将坐标转换为SVG的M（移动到）、L（直线到）、C（贝塞尔曲线）等指令。 4. **视区适应**：根据给定的SVG视区大小和映射范围，调整GeoJSON对象的比例和位置，使得地图适应指定的显示区域。 5. **样式应用**：...