mirror of
https://github.com/hiloteam/Hilo.git
synced 2026-01-18 16:04:19 +00:00
595 lines
20 KiB
HTML
595 lines
20 KiB
HTML
<!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>DOMRenderer - Hilo API Document</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;">
|
|
|
|
DOMRenderer
|
|
</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;">Inheritance</b> DOMRenderer
|
|
<i class="glyphicon glyphicon-arrow-right"></i> <a href="../symbols/Renderer.html">Renderer</a>
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span style="display:block;margin:0 0 2px 0;">
|
|
<b style="margin-right:10px;">Module</b> hilo/renderer/DOMRenderer
|
|
</span>
|
|
|
|
|
|
|
|
<span style="display:block;margin:0 0 2px 0;">
|
|
<b style="margin-right:10px;">Requires</b>
|
|
<span><a href="../symbols/Class.html">hilo/core/Class</a></span>, <span><a href="../symbols/Hilo.html">hilo/core/Hilo</a></span>, <span><a href="../symbols/Renderer.html">hilo/renderer/Renderer</a></span>, <span><a href="../symbols/Drawable.html">hilo/view/Drawable</a></span>
|
|
</span>
|
|
|
|
|
|
<span style="display:block;margin:0 0 2px 0;">
|
|
<b style="margin-right:10px;">Source</b>
|
|
<a href="../symbols/src/docs_api-en_code_renderer_DOMRenderer.js.html">DOMRenderer.js</a>
|
|
</span>
|
|
|
|
<br>
|
|
DomRenderer The DomRenderer, all the visual object is drawing using dom element.The stage will create different renderer depend on the canvas and renderType properties, developer need not use this class directly.
|
|
|
|
|
|
</p>
|
|
|
|
<!-- ============================== properties summary ===================== -->
|
|
|
|
|
|
|
|
<div style="margin:30px 0 5px 0;">
|
|
<h3 style="display:inline;margin-right:10px;">Properties</h3>
|
|
|
|
<a style="color:#666;text-decoration:none;cursor:pointer;" onclick="toggleProperties()"><i class="glyphicon glyphicon-circle-arrow-right" id="propToggleIcon"></i><span id="propToggleTip">Show Inherited Properties</span></a>
|
|
|
|
</div>
|
|
<table class="table table-striped table-bordered table-condensed table-symbol" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col"></th>
|
|
<th scope="col">Property </th>
|
|
<th scope="col">Defined</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
|
|
<tr class='inheritProp' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</td>
|
|
<td class="fixedFont">
|
|
<div>
|
|
<!-- -->
|
|
<b><a href="../symbols/Renderer.html#canvas">canvas</a></b>:Object
|
|
</div>
|
|
<div class="description">
|
|
|
|
The canvas of renderer.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritProp' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</td>
|
|
<td class="fixedFont">
|
|
<div>
|
|
<!-- -->
|
|
<b><a href="../symbols/Renderer.html#renderType">renderType</a></b>:String
|
|
</div>
|
|
<div class="description">
|
|
|
|
The render type of renderer, readonly.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritProp' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</td>
|
|
<td class="fixedFont">
|
|
<div>
|
|
<!-- -->
|
|
<b><a href="../symbols/Renderer.html#stage">stage</a></b>:Object
|
|
</div>
|
|
<div class="description">
|
|
|
|
The stage of renderer, readonly.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</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('Hide Inherited Properties');
|
|
$('.inheritProp').show();
|
|
}else{
|
|
alink.removeClass('glyphicon-circle-arrow-down');
|
|
alink.addClass('glyphicon-circle-arrow-right');
|
|
$('#propToggleTip').html('Show Inherited Properties');
|
|
$('.inheritProp').hide();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<!-- ============================== methods summary ======================== -->
|
|
|
|
|
|
|
|
<div style="margin:30px 0 5px; 0">
|
|
<h3 style="display:inline;margin-right:10px;">Methods</h3>
|
|
|
|
<a style="color:#666;text-decoration:none;cursor:pointer;" onclick="toggleMethods()"><i class="glyphicon glyphicon-circle-arrow-right" id="methodToggleIcon"></i><span id="methodToggleTip">Show Inherited Methods</span></a>
|
|
|
|
</div>
|
|
<table class="table table-striped table-bordered table-condensed table-symbol" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col"></th>
|
|
<th scope="col">Method</th>
|
|
<th scope="col">Defined</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<div class="fixedFont">
|
|
<b><a href="#constructor">DOMRenderer</a></b>(properties:Object)
|
|
</div>
|
|
<div class="description">Constructor</div>
|
|
</td>
|
|
<td>DOMRenderer</td>
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</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">
|
|
|
|
Clear the given region of canvas.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</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">
|
|
|
|
Draw the visual object.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</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">
|
|
|
|
The handling method after draw the visual object.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</td>
|
|
<td class="fixedFont">
|
|
<div><b><a href="../symbols/Renderer.html#hide">hide</a></b>()
|
|
</div>
|
|
<div class="description">
|
|
|
|
Hide the visual object.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</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">
|
|
|
|
Remove the visual object from canvas.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</td>
|
|
<td class="fixedFont">
|
|
<div><b><a href="../symbols/Renderer.html#resize">resize</a></b>(width:Number, height:Number)
|
|
</div>
|
|
<div class="description">
|
|
|
|
Resize the renderer's canvas.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</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">
|
|
|
|
Prepare for draw visual object.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr class='inheritMethod' style='display:none;'>
|
|
<td>
|
|
<i class="icon-arrow-up" style="margin:12px 0 0 4px;"></i>
|
|
</td>
|
|
<td class="fixedFont">
|
|
<div><b><a href="../symbols/Renderer.html#transform">transform</a></b>()
|
|
</div>
|
|
<div class="description">
|
|
|
|
Transfrom the visual object.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<a href="../symbols/Renderer.html">Renderer</a>
|
|
</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('Hide Inherited Methods');
|
|
$('.inheritMethod').show();
|
|
}else{
|
|
alink.removeClass('glyphicon-circle-arrow-down');
|
|
alink.addClass('glyphicon-circle-arrow-right');
|
|
$('#methodToggleTip').html('Show Inherited Methods');
|
|
$('.inheritMethod').hide();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<!-- ============================== field details ========================== -->
|
|
|
|
|
|
<!-- ============================== constructor details ==================== -->
|
|
|
|
<br/>
|
|
<div class="details">
|
|
<a class="anchor" name="constructor"> </a>
|
|
<div class="">
|
|
<h3 style="margin-bottom:15px;">Constructor</h3>
|
|
</div>
|
|
<div class="member-box">
|
|
<div class="member-header">
|
|
<b>DOMRenderer</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>
|
|
— The properties to create a renderer, contains all writeable props of this class.
|
|
</dt>
|
|
|
|
</dl>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ============================== method details ========================= -->
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer class="col-md-12">
|
|
<hr>
|
|
<p>© 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>
|