1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-22 16:23:12 +02:00
This commit is contained in:
Pomax
2020-08-04 15:10:52 -07:00
parent 90821b150d
commit e683733a82
4 changed files with 24 additions and 24 deletions

View File

@@ -3,16 +3,16 @@
まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。 まずは良い例から始めましょう。ベジエ曲線というのは、下の図に表示されているもののことです。ベジエ曲線はある始点からある終点へと延びており、その曲率は1個以上の「中間」制御点に左右されています。さて、このページの図はどれもインタラクティブになっていますので、ここで曲線をちょっと操作してみましょう。点をドラッグしたとき、曲線の形がそれに応じてどう変化するのか、確かめてみてください。
<div class="figure"> <div class="figure">
<graphics-element title="2次のベジエ曲線" width="200" height="200" src="./chapters/introduction/quadratic.js"> <graphics-element title="2次のベジエ曲線" width="275" height="275" src="./chapters/introduction/quadratic.js">
<fallback-image> <fallback-image>
<img src="./chapters/introduction/quadratic.png" width="200" height="200"> <img src="./chapters/introduction/quadratic.png" width="275" height="275">
{{ disableMessage }} {{ disableMessage }}
</fallback-image> </fallback-image>
</graphics-element> </graphics-element>
<graphics-element title="3次のベジエ曲線" width="200" height="200" src="./chapters/introduction/cubic.js"> <graphics-element title="3次のベジエ曲線" width="275" height="275" src="./chapters/introduction/cubic.js">
<fallback-image> <fallback-image>
<img src="./chapters/introduction/cubic.png" width="200" height="200"> <img src="./chapters/introduction/cubic.png" width="275" height="275">
{{ disableMessage }} {{ disableMessage }}
</fallback-image> </fallback-image>
</graphics-element> </graphics-element>

View File

@@ -3,16 +3,16 @@
让我们有个好的开始:当我们在谈论贝塞尔曲线的时候,所指的就是你在如下图像看到的东西。它们从某些起点开始,到终点结束,并且受到一个或多个的“中间”控制点的影响。本页面上的图形都是可交互的,你可以拖动这些点,看看这些形状在你的操作下会怎么变化。 让我们有个好的开始:当我们在谈论贝塞尔曲线的时候,所指的就是你在如下图像看到的东西。它们从某些起点开始,到终点结束,并且受到一个或多个的“中间”控制点的影响。本页面上的图形都是可交互的,你可以拖动这些点,看看这些形状在你的操作下会怎么变化。
<div class="figure"> <div class="figure">
<graphics-element title="二次贝塞尔曲线" width="200" height="200" src="./chapters/introduction/quadratic.js"> <graphics-element title="二次贝塞尔曲线" width="275" height="275" src="./chapters/introduction/quadratic.js">
<fallback-image> <fallback-image>
<img src="./chapters/introduction/quadratic.png" width="200" height="200"> <img src="./chapters/introduction/quadratic.png" width="275" height="275">
{{ disableMessage }} {{ disableMessage }}
</fallback-image> </fallback-image>
</graphics-element> </graphics-element>
<graphics-element title="三次贝塞尔曲线" width="200" height="200" src="./chapters/introduction/cubic.js"> <graphics-element title="三次贝塞尔曲线" width="275" height="275" src="./chapters/introduction/cubic.js">
<fallback-image> <fallback-image>
<img src="./chapters/introduction/cubic.png" width="200" height="200"> <img src="./chapters/introduction/cubic.png" width="275" height="275">
{{ disableMessage }} {{ disableMessage }}
</fallback-image> </fallback-image>
</graphics-element> </graphics-element>

View File

@@ -172,15 +172,15 @@
<div class="figure"> <div class="figure">
<graphics-element <graphics-element
title="2次のベジエ曲線" title="2次のベジエ曲線"
width="200" width="275"
height="200" height="275"
src="./chapters/introduction/quadratic.js" src="./chapters/introduction/quadratic.js"
> >
<fallback-image> <fallback-image>
<img <img
src="./chapters/introduction/quadratic.png" src="./chapters/introduction/quadratic.png"
width="200" width="275"
height="200" height="275"
/> />
<span>JSがなくて、画像を表示しています。</span> <span>JSがなくて、画像を表示しています。</span>
</fallback-image> </fallback-image>
@@ -188,15 +188,15 @@
<graphics-element <graphics-element
title="3次のベジエ曲線" title="3次のベジエ曲線"
width="200" width="275"
height="200" height="275"
src="./chapters/introduction/cubic.js" src="./chapters/introduction/cubic.js"
> >
<fallback-image> <fallback-image>
<img <img
src="./chapters/introduction/cubic.png" src="./chapters/introduction/cubic.png"
width="200" width="275"
height="200" height="275"
/> />
<span>JSがなくて、画像を表示しています。</span> <span>JSがなくて、画像を表示しています。</span>
</fallback-image> </fallback-image>

View File

@@ -160,15 +160,15 @@
<div class="figure"> <div class="figure">
<graphics-element <graphics-element
title="二次贝塞尔曲线" title="二次贝塞尔曲线"
width="200" width="275"
height="200" height="275"
src="./chapters/introduction/quadratic.js" src="./chapters/introduction/quadratic.js"
> >
<fallback-image> <fallback-image>
<img <img
src="./chapters/introduction/quadratic.png" src="./chapters/introduction/quadratic.png"
width="200" width="275"
height="200" height="275"
/> />
<span>脚本已禁用,并显示后备图像。</span> <span>脚本已禁用,并显示后备图像。</span>
</fallback-image> </fallback-image>
@@ -176,15 +176,15 @@
<graphics-element <graphics-element
title="三次贝塞尔曲线" title="三次贝塞尔曲线"
width="200" width="275"
height="200" height="275"
src="./chapters/introduction/cubic.js" src="./chapters/introduction/cubic.js"
> >
<fallback-image> <fallback-image>
<img <img
src="./chapters/introduction/cubic.png" src="./chapters/introduction/cubic.png"
width="200" width="275"
height="200" height="275"
/> />
<span>脚本已禁用,并显示后备图像。</span> <span>脚本已禁用,并显示后备图像。</span>
</fallback-image> </fallback-image>