标签: cubic-bezier

我有一个__CODE__包含一些幻灯片和菜单.

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

下面是我的CSS的__CODE__.

<div id="wrap"></div>

任何人都可以解释一下过渡房产在这里做了什么？.

我无法理解它在div上产生的影响.

我正在寻找一种将四边形分割成网格的方法.例如:

最终我需要能够将生成的形状转换为SVG,但我很乐意处理到/从另一个库或坐标系的转换.我正在寻找的是如何进行计算.

假设形状是以二次方式绘制的四边形状,其中每个边可以是凹的或凸的,但没有边缘与其他边缘或它们自身重叠,并且四个边中的任何一个都可以是弯曲的.

对于四边形多边形(具有直边的形状是微不足道的)的相同方法,并且如果两个相对边是直线,则很容易找到交叉点,因为它们将沿着在相对边的细分之间绘制的直线放置.从那里可以相对容易地计算将它们连接到沿着替代轴的前一点所需的曲线:

然而,当没有两个直的相对的边(如上面的第三个例子中)时,我不确定如何找到这些点,因为不再有直线点的确定性.

我花了很长时间寻找有记录的方法,但无济于事.

下面是一个使用SVG来描述它的起始形状的例子(它不必在SVG中处理,只要我可以输出到SVG.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 406.4 233.4" xml:space="preserve">
  <path class="st0" d="M394.3,232.7c-106-37.8-353.7,0-353.7,0s-90.4-151.2,0-207.3s353.7,0,353.7,0S420.3,154.7,394.3,232.7z"/>
</svg>

编辑:我在Stack Exchange Maths上提出了类似的问题,其中一个答案描述了一种方法 - 使用Coons Patch.Quora解释在这里.

我正在尝试使用立方图制作 LineChart。结果如下面的截图所示：三次贝塞尔曲线显示错误并有“尖峰”。有人可以帮我让它正确显示吗？

这是我的配置：

        LineDataSet lineDataSet = new LineDataSet(entries,nameLabel);
        lineDataSet.setColor(Constants.colors.get(i));
        lineDataSet.setDrawValues(false);
        lineDataSet.setDrawCircles(false);
        lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);

谢谢

我已经阅读了 一些 关于在三次贝塞尔曲线的 X 处找到 Y 的讨论，并且还阅读了有关此事的这篇文章。

我的情况比一般情况更受限制，我想知道是否有比上述讨论中提到的一般情况更好的解决方案。

我的情况：

• X不同控制点的值在增加。即： X3 > X2 > X1 > X0。
• 此外，作为上述结果，X(t)也是严格单调递增的。

有没有考虑到这些约束的有效算法？

我需要使用本机 Javascript 绘制并获取每个步骤的贝塞尔曲线的坐标，而不需要 ctx.bezierCurveTo 方法。

我尝试了下面的方法，但它不能正常工作。这里我附上了我的代码和输出曲线。

const accuracy = 0.01; let temp = 4;

 function draw(event) {
      if (!isDrawing) { return; }
      points.push({ x: event.clientX, y: event.clientY });    
      let count = 0;
      if(points.length === temp) {
      ctx.beginPath();
      ctx.moveTo(points[points.length - 4].x, points[points.length - 4].y)
      for (let i = 0; i <= 1; i += accuracy) {
        const p = bezier2(i, points[points.length - 4], points[points.length - 3] , 
        points[points.length - 2], points[points.length-1]);
        ctx.lineTo(p.x,p.y)
      }
     temp += 3
     ctx.stroke();
     ctx.closePath();
    }
  }

function …

我正在尝试找到一种 JS 算法来找到给定 xpos 的三次贝塞尔曲线的 ypos。第一个和最后一个控制点将为 (0,0) 和 (1,1)，如果任何输入的控制点的 xpos 小于 0 或大于 1，则应该抛出错误，就像在 CSS 中一样。该函数将被称为

cubicBezier(p1x, p1y, p2x, p2y, time)

我花了半个小时在谷歌上搜索它，但似乎没有任何效果。当我寻找算法时，我只找到了一堆数学公式。即使当我把目光转向 stackoverflow 时，除了复杂的数学公式和 c++ 中的东西之外，我找不到任何东西，
左上角的点将是 p1，另一个点是 p2。

我只想通过片段着色器绘制贝塞尔曲线以连接编辑器中的节点。我知道定义贝塞尔曲线的所有 4 个点。并且为每个像素调用片段着色器，所以我可以检查：如果 gl_Coord.x 的“t”在 0 和 1 之间，然后将 frag_color 设置为红色。我想避免着色器中效率低下的循环。我认为最好的方法是检查曲线上的点。但是如何为贝塞尔曲线做到这一点？

是否可以从三次贝塞尔方程表达“t”变量？

x = ((1-t)^3 * p0.x) + (3 * (1-t)^2 * t * p1.x) + (3 * (1 - t) * t^2 * p2.x) + (t^3 * p3.x);

t = ?

网站 Wolfram Aplha 给我那个公式（在 GetBezierT 函数中）。但是公式给了我错误的“t”值，我有一半的抛物线而不是曲线：

#version 150
.....
layout (origin_upper_left, pixel_center_integer) in vec4 gl_FragCoord;
out vec4 frag_color;
.....
vec4 BackgroundColor = vec4(0.15, 0.15, 0.15, 1.0);
vec2 p0 = vec2(61.0f,87.0f);
vec2 p1 = vec2(181.0f, 39.0f);
vec2 p2 = …

我无法构建一条穿过所有点但又不能像 SVG 中的贝塞尔曲线那样超出这些点的曲线。

我尝试过贝塞尔曲线、二次曲线、平滑曲线和 Casteljau

这是我的示例的链接https://dotnetfiddle.net/KEqts0

不幸的是，我可以使用第三方来进行映射。

我不想将输出放入，因为那只是噪音，我已经包含了一张图片以供参考。

按照这个主题，我尝试生成一个3D弯曲三角形作为NURBS曲面，但是我不知道如何设置3D点来实现。

这是当前的实现：

var edges = this.getEdges(), // An edge is a line following 4 dots as a bezier curve.
    dots = self.getDotsFromEdges(edges), // Get all dots in order for building the surface.

    ctrlPoints = [ // Is generated only once before, but copy-pasted here for this sample code.
        [
            new THREE.Vector4(0, 0, 0, 1),
            new THREE.Vector4(0, 0, 0, 1),
            new THREE.Vector4(0, 0, 0, 1),
            new THREE.Vector4(0, 0, 0, 1)
        ],
        [
            new THREE.Vector4(0, 0, 0, 1),
            new THREE.Vector4(0, …

假设我有一条贝塞尔曲线，有两个固定端点，一个在x(0), y(1)，一个在x(1), y(0)（左下角和右上角） 现在假设我有两个控制点，可以在 x(0), x(1) 之间的任何位置)、y(0) 和 y(1)。对于这个问题，我只会说控制点 #1 在 x(0.1) y(0.6) 处，控制点 #2 在 x(0.9) 和 y(0.4) 处。（这假设一个“从左上角”坐标系）

这是我们曲线的一个小插图：

现在假设我的 y 位置为 0.7。计算出对应的 x 位置到 y(0.7) 点的数学公式是什么？我该怎么做？

对不起，如果这个问题不属于这里，但我认为这是编码中面临的一个常见问题，而且你们中的许多人可能都有我正在寻找的答案。