HTML5 Canvas：获取曲线的坐标 [英] HTML5 Canvas: get curve's coordinates

问题描述

我在画布中有一个二次曲线（由开始，结束和控制点定义）。我需要的是获得更多的曲线坐标（例如，中间，四分之一等）。有了这个，我能够（在寻找坐标几次迭代之后）根据这条曲线动画一个对象（我知道它可以用SVG轻松完成，但这不是一个选项）。

I have a quadratic curve in canvas (defined by start, end and control point). What I need is to get more of the curve's coordinates (eg. the middle, quarters etc.). With that, I'd be able (after a few iterations of finding coordinates) to animate an object based on this curve (I know it can be done easily with SVG, but that's not an option).

图片取自 http：//www.html5canvastutorials。 com / tutorials / html5-canvas-quadratic-curves /

有没有一种简单的方法可以做到这一点？当我在google上检查二等分曲线时，我发现的唯一一件事是包括绘图在内的一些复杂的数学，这是不可能的。

Is there an easy way to do this? When I checked for bisecting curve on google, the only thing I found was some complicated Math including drawing, which is out of the question.

推荐答案

您可能会对这些功能感兴趣：

These functions may be of interest to you:

Kinetic.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y)
Kinetic.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y)

这篇关于HTML5 Canvas：获取曲线的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！