137 lines
4.3 KiB
137 lines
4.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Kity Demo List</title>
|
|
<style>
|
|
body, html {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
background-color: rgb(67, 161, 254);
|
|
color: white;
|
|
text-shadow: 0 1px 3px black;
|
|
margin: 0;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
ul {
|
|
position: absolute;
|
|
margin-left: 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
top: 100px;
|
|
left: 30px;
|
|
width: 270px;
|
|
padding-right: 20px;
|
|
bottom: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 20px;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
a {
|
|
color: rgb(224, 115, 6);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p {
|
|
color: #333;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.preview-container {
|
|
position: absolute;
|
|
left: 320px;
|
|
right: 0;
|
|
top: 100px;
|
|
bottom: 0;
|
|
border-left: solid 1px #ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Kity Example List</h1>
|
|
<ul>
|
|
<li>
|
|
<h2><a href="animate.html" target="demo-preview">动画示例</a></h2>
|
|
<p>如何使用自定义动画、fx动画等</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="bezier.html" target="demo-preview">贝塞尔曲线示例</a></h2>
|
|
<p>如何使用 Bezier 类绘制方便地绘制贝塞尔曲线</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="clip.html" target="demo-preview">Clip 示例</a></h2>
|
|
<p>如何使用 Clip 类来剪辑图形</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="curve.html" target="demo-preview">曲线示例</a></h2>
|
|
<p>如何使用 Curve 类来绘制经过指定点的曲线</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="easing.html" target="demo-preview">缓动函数示例</a></h2>
|
|
<p>枚举 Kity 支持的缓动函数</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="lineargradientbrush.html" target="demo-preview">线性渐变示例</a></h2>
|
|
<p>如何使用 LinearGradientBrush 来使用线性渐变填充图形</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="mask.html" target="demo-preview">Mask 示例</a></h2>
|
|
<p>如何使用 Mask 来创建蒙版</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="path.html" target="demo-preview">Path 示例</a></h2>
|
|
<p>如何使用 Path 来绘制自定义图形</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="patternbrush.html" target="demo-preview">图形画刷示例</a></h2>
|
|
<p>如何使用 PatternBrush 创建图形画刷填充图形</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="pen.html" target="demo-preview">Pen 示例</a></h2>
|
|
<p>如何使用 Pen 来创建复杂的描边</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="radialgradientbrush.html" target="demo-preview">径向渐变示例</a></h2>
|
|
<p>如何使用 RadialGradientBrush 来使用径向渐变填充图形</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="text.html" target="demo-preview">文本示例</a></h2>
|
|
<p>如何使用文本、路径文本</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="transform.html" target="demo-preview">如何使用 Transform</a></h2>
|
|
<p>如何对图形进行平移、旋转、缩放、斜切等</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="use.html" target="demo-preview">Use 示例</a></h2>
|
|
<p>如何引用图形</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="viewbox.html" target="demo-preview">Viewbox 示例</a></h2>
|
|
<p>如何使用 Viewbox 控制视野</p>
|
|
</li>
|
|
<li>
|
|
<h2><a href="filter/index.html" target="demo-preview">滤镜示例</a></h2>
|
|
<p>如何使用滤镜</p>
|
|
</li>
|
|
</ul>
|
|
<div class="preview-container">
|
|
<iframe name="demo-preview" frameborder="0" style="overflow:scroll; width: 100%; height: 100%;" src="animate.html"></iframe>
|
|
</div>
|
|
</body>
|
|
</html>
|