Hilo/docs/api-zh/symbols/Renderer.html
2018-01-03 11:26:57 +08:00

893 lines
26 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="JsDoc Toolkit"/>
<title>Renderer - Hilo API 参考文档</title>
<style>
iframe{
border:1px solid #333;
}
</style>
<link href="../../bootstrap3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="../../bootstrap3.0.3/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../../css/prettify.min.css" rel="stylesheet">
<link href="../../css/api.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span>Hilo</span><span></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="//hiloteam.github.io/index.html">首页</a></li>
<li><a href="//github.com/hiloteam/Hilo" target="_blank">源码下载</a></li>
<li class="active"><a href="../index.html">API文档</a></li>
<li><a href="//hiloteam.github.io/tutorial/index.html">教程文档</a></li>
<li><a href="//hiloteam.github.io/examples/index.html">作品演示</a></li>
</u>
</div>
</div>
</div>
<div class="container main">
<div class="col-md-3">
<div class="bs-sidebar well">
<!-- <div class="hilo-header">类列表</div> -->
<ul class="nav bs-sidenav">
<li class="nav-pkg">core<span></span></li>
<li class="nav-class"><a href="../symbols/Class.html">Class</a></li>
<li class="nav-class"><a href="../symbols/Hilo.html">Hilo</a></li>
<li class="nav-pkg">event<span></span></li>
<li class="nav-class"><a href="../symbols/EventMixin.html">EventMixin</a></li>
<li class="nav-pkg">game<span></span></li>
<li class="nav-class"><a href="../symbols/Camera.html">Camera</a></li>
<li class="nav-class"><a href="../symbols/Camera3d.html">Camera3d</a></li>
<li class="nav-class"><a href="../symbols/ParticleSystem.html">ParticleSystem</a></li>
<li class="nav-pkg">geom<span></span></li>
<li class="nav-class"><a href="../symbols/Matrix.html">Matrix</a></li>
<li class="nav-pkg">loader<span></span></li>
<li class="nav-class"><a href="../symbols/LoadQueue.html">LoadQueue</a></li>
<li class="nav-pkg">media<span></span></li>
<li class="nav-class"><a href="../symbols/HTMLAudio.html">HTMLAudio</a></li>
<li class="nav-class"><a href="../symbols/WebAudio.html">WebAudio</a></li>
<li class="nav-class"><a href="../symbols/WebSound.html">WebSound</a></li>
<li class="nav-pkg">renderer<span></span></li>
<li class="nav-class"><a href="../symbols/CanvasRenderer.html">CanvasRenderer</a></li>
<li class="nav-class"><a href="../symbols/DOMRenderer.html">DOMRenderer</a></li>
<li class="nav-class"><a href="../symbols/Renderer.html">Renderer</a></li>
<li class="nav-class"><a href="../symbols/WebGLRenderer.html">WebGLRenderer</a></li>
<li class="nav-pkg">tween<span></span></li>
<li class="nav-class"><a href="../symbols/Ease.html">Ease</a></li>
<li class="nav-class"><a href="../symbols/Tween.html">Tween</a></li>
<li class="nav-pkg">util<span></span></li>
<li class="nav-class"><a href="../symbols/TextureAtlas.html">TextureAtlas</a></li>
<li class="nav-class"><a href="../symbols/Ticker.html">Ticker</a></li>
<li class="nav-class"><a href="../symbols/browser.html">browser</a></li>
<li class="nav-class"><a href="../symbols/drag.html">drag</a></li>
<li class="nav-class"><a href="../symbols/util.html">util</a></li>
<li class="nav-pkg">view<span></span></li>
<li class="nav-class"><a href="../symbols/Bitmap.html">Bitmap</a></li>
<li class="nav-class"><a href="../symbols/BitmapText.html">BitmapText</a></li>
<li class="nav-class"><a href="../symbols/Button.html">Button</a></li>
<li class="nav-class"><a href="../symbols/CacheMixin.html">CacheMixin</a></li>
<li class="nav-class"><a href="../symbols/Container.html">Container</a></li>
<li class="nav-class"><a href="../symbols/DOMElement.html">DOMElement</a></li>
<li class="nav-class"><a href="../symbols/Drawable.html">Drawable</a></li>
<li class="nav-class"><a href="../symbols/Graphics.html">Graphics</a></li>
<li class="nav-class"><a href="../symbols/Sprite.html">Sprite</a></li>
<li class="nav-class"><a href="../symbols/Stage.html">Stage</a></li>
<li class="nav-class"><a href="../symbols/Text.html">Text</a></li>
<li class="nav-class"><a href="../symbols/View.html">View</a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<!-- ============================== class title ============================ -->
<h1 style="margin-top:0;">
Renderer
</h1><hr style="margin-top:10px;" />
<!-- ============================== class summary ========================== -->
<p class="description">
<span style="display:block;margin:0 0 2px 0;">
<b style="margin-right:10px;">模块</b> hilo/renderer/Renderer
</span>
<span style="display:block;margin:0 0 2px 0;">
<b style="margin-right:10px;">依赖</b>
<span><a href="../symbols/Class.html">hilo/core/Class</a></span>, <span><a href="../symbols/util.html">hilo/util/util</a></span>
</span>
<span style="display:block;margin:0 0 2px 0;">
<b style="margin-right:10px;">源码</b>
<a href="../symbols/src/docs_api-zh_code_renderer_Renderer.js.html">Renderer.js</a>
</span>
<br>
渲染器抽象基类。
</p>
<!-- ============================== properties summary ===================== -->
<div style="margin:30px 0 5px 0;">
<h3 style="display:inline;margin-right:10px;">属性概览</h3>
</div>
<table class="table table-striped table-bordered table-condensed table-symbol" cellspacing="0">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">属性</th>
<th scope="col">定义于</th>
</tr>
</thead>
<tbody>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Renderer.html#canvas">canvas</a></b>:Object
</div>
<div class="description">
渲染器对应的画布。它可能是一个普通的DOM元素比如div也可以是一个canvas画布元素。只读属性。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Renderer.html#renderType">renderType</a></b>:String
</div>
<div class="description">
渲染方式。只读属性。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div>
<!-- -->
<b><a href="../symbols/Renderer.html#stage">stage</a></b>:Object
</div>
<div class="description">
渲染器对应的舞台。只读属性。
</div>
</td>
<td>
Renderer
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function toggleProperties(){
var alink = $('#propToggleIcon');
if(alink.hasClass('glyphicon-circle-arrow-right')){
alink.removeClass('glyphicon-circle-arrow-right');
alink.addClass('glyphicon-circle-arrow-down');
$('#propToggleTip').html('隐藏继承属性');
$('.inheritProp').show();
}else{
alink.removeClass('glyphicon-circle-arrow-down');
alink.addClass('glyphicon-circle-arrow-right');
$('#propToggleTip').html('显示继承属性');
$('.inheritProp').hide();
}
}
</script>
<!-- ============================== methods summary ======================== -->
<div style="margin:30px 0 5px; 0">
<h3 style="display:inline;margin-right:10px;">方法概览</h3>
</div>
<table class="table table-striped table-bordered table-condensed table-symbol" cellspacing="0">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">方法</th>
<th scope="col">定义于</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<div class="fixedFont">
<b><a href="#constructor">Renderer</a></b>(properties:Object)
</div>
<div class="description">构造函数</div>
</td>
<td>Renderer</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#clear">clear</a></b>(x:Number, y:Number, width:Number, height:Number)
</div>
<div class="description">
清除画布指定区域。需要子类来实现。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#draw">draw</a></b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">
绘制可视对象。需要子类来实现。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#endDraw">endDraw</a></b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">
结束绘制可视对象后的后续处理方法。需要子类来实现。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#hide">hide</a></b>()
</div>
<div class="description">
隐藏可视对象。需要子类来实现。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#remove">remove</a></b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">
从画布中删除可视对象。注意不是从stage中删除对象。需要子类来实现。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#resize">resize</a></b>(width:Number, height:Number)
</div>
<div class="description">
改变渲染器的画布大小。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#startDraw">startDraw</a></b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">
为开始绘制可视对象做准备。需要子类来实现。
</div>
</td>
<td>
Renderer
</td>
</tr>
<tr >
<td>
</td>
<td class="fixedFont">
<div><b><a href="../symbols/Renderer.html#transform">transform</a></b>()
</div>
<div class="description">
对可视对象进行变换。需要子类来实现。
</div>
</td>
<td>
Renderer
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function toggleMethods(){
var alink = $('#methodToggleIcon');
if(alink.hasClass('glyphicon-circle-arrow-right')){
alink.removeClass('glyphicon-circle-arrow-right');
alink.addClass('glyphicon-circle-arrow-down');
$('#methodToggleTip').html('隐藏继承方法');
$('.inheritMethod').show();
}else{
alink.removeClass('glyphicon-circle-arrow-down');
alink.addClass('glyphicon-circle-arrow-right');
$('#methodToggleTip').html('显示继承方法');
$('.inheritMethod').hide();
}
}
</script>
<!-- ============================== field details ========================== -->
<br/>
<div class="">
<h3 style="margin-bottom:15px;">属性详情</h3>
</div>
<a class="anchor" name="canvas"> </a>
<div class="member-box">
<div class="member-header">
<b>canvas</b><span class="light">:Object</span>
</div>
<div class="description">
渲染器对应的画布。它可能是一个普通的DOM元素比如div也可以是一个canvas画布元素。只读属性。
</div>
</div>
<a class="anchor" name="renderType"> </a>
<div class="member-box">
<div class="member-header">
<b>renderType</b><span class="light">:String</span>
</div>
<div class="description">
渲染方式。只读属性。
</div>
</div>
<a class="anchor" name="stage"> </a>
<div class="member-box">
<div class="member-header">
<b>stage</b><span class="light">:Object</span>
</div>
<div class="description">
渲染器对应的舞台。只读属性。
</div>
</div>
<!-- ============================== constructor details ==================== -->
<br/>
<div class="details">
<a class="anchor" name="constructor"> </a>
<div class="">
<h3 style="margin-bottom:15px;">构造函数</h3>
</div>
<div class="member-box">
<div class="member-header">
<b>Renderer</b>(properties:Object)
</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>properties</b>:<span>Object</span>
— 创建对象的属性参数。可包含此类所有可写属性。
</dt>
</dl>
</div>
</div>
<!-- ============================== method details ========================= -->
<br/>
<div class=""><h3 style="margin-bottom:15px;">方法详情</h3></div>
<a class="anchor" name="clear"> </a>
<div class="member-box">
<div class="member-header">
<b>clear</b>(x:Number, y:Number, width:Number, height:Number)
</div>
<div class="description">清除画布指定区域。需要子类来实现。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>x</b>:<span>Number</span>
— 指定区域的x轴坐标。
</dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>y</b>:<span>Number</span>
— 指定区域的y轴坐标。
</dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>width</b>:<span>Number</span>
— 指定区域的宽度。
</dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>height</b>:<span>Number</span>
— 指定区域的高度。
</dt>
</dl>
</div>
<a class="anchor" name="draw"> </a>
<div class="member-box">
<div class="member-header">
<b>draw</b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">绘制可视对象。需要子类来实现。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>target</b>:<span><a href="../symbols/View.html">View</a></span>
— 要绘制的可视对象。
</dt>
</dl>
</div>
<a class="anchor" name="endDraw"> </a>
<div class="member-box">
<div class="member-header">
<b>endDraw</b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">结束绘制可视对象后的后续处理方法。需要子类来实现。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>target</b>:<span><a href="../symbols/View.html">View</a></span>
— 要绘制的可视对象。
</dt>
</dl>
</div>
<a class="anchor" name="hide"> </a>
<div class="member-box">
<div class="member-header">
<b>hide</b>()
</div>
<div class="description">隐藏可视对象。需要子类来实现。</div>
</div>
<a class="anchor" name="remove"> </a>
<div class="member-box">
<div class="member-header">
<b>remove</b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">从画布中删除可视对象。注意不是从stage中删除对象。需要子类来实现。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>target</b>:<span><a href="../symbols/View.html">View</a></span>
— 要删除的可视对象。
</dt>
</dl>
</div>
<a class="anchor" name="resize"> </a>
<div class="member-box">
<div class="member-header">
<b>resize</b>(width:Number, height:Number)
</div>
<div class="description">改变渲染器的画布大小。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>width</b>:<span>Number</span>
— 指定渲染画布新的宽度。
</dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>height</b>:<span>Number</span>
— 指定渲染画布新的高度。
</dt>
</dl>
</div>
<a class="anchor" name="startDraw"> </a>
<div class="member-box">
<div class="member-header">
<b>startDraw</b>(target:<a href="../symbols/View.html">View</a>)
</div>
<div class="description">为开始绘制可视对象做准备。需要子类来实现。</div>
<dl class="detailList">
<dt class="heading"><span class="label">parameters</span></dt>
<dt style="margin-left:20px;font-weight:normal;">
<b>target</b>:<span><a href="../symbols/View.html">View</a></span>
— 要绘制的可视对象。
</dt>
</dl>
</div>
<a class="anchor" name="transform"> </a>
<div class="member-box">
<div class="member-header">
<b>transform</b>()
</div>
<div class="description">对可视对象进行变换。需要子类来实现。</div>
</div>
</div>
</div>
<footer class="col-md-12">
<hr>
<p>&copy; Hilo 2016</p>
</footer>
<script src="../../js/jquery.min.js"></script>
<script src="../../bootstrap3.0.3/js/bootstrap.min.js"></script>
<script src="../../js/prettify.min.js"></script>
<script type="text/javascript">
//make code pretty
$('pre').addClass('prettyprint linenums fixedFont');
window.prettyPrint && prettyPrint();
</script>
</body>
</html>