mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-22 16:23:12 +02:00
sizing
This commit is contained in:
@@ -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>
|
||||||
|
@@ -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>
|
||||||
|
@@ -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>
|
||||||
|
@@ -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>
|
||||||
|
Reference in New Issue
Block a user