Matter-JS Render.create 渲染器建立
阿新 • • 發佈：2019-01-06
Render.create
1、create 方法用於建立新的渲染器。option 引數是一個物件，用於指定要覆蓋的預設屬性值。所有屬性都有預設值，許多屬性值都是根據其他屬性自動預先計算而得到。
2、Matter.Render.create([options]) 函式原始碼如下。
/** * Creates a new renderer. The options parameter is an object that specifies any properties you wish to override the defaults. * All properties have default values, and many are pre-calculated automatically based on other properties. * See the properties section below for detailed information on what you can pass via the `options` object. * @method create * @param {object} [options] * @return {render} A new renderer */ Render.create = function(options) { var defaults = { controller: Render, engine: null, element: null, canvas: null, mouse: null, frameRequestId: null, options: { width: 800, height: 600, pixelRatio: 1, background: '#18181d', wireframeBackground: '#0f0f13', hasBounds: !!options.bounds, enabled: true, wireframes: true, showSleeping: true, showDebug: false, showBroadphase: false, showBounds: false, showVelocity: false, showCollisions: false, showSeparations: false, showAxes: false, showPositions: false, showAngleIndicator: false, showIds: false, showShadows: false, showVertexNumbers: false, showConvexHulls: false, showInternalEdges: false, showMousePosition: false } };
options
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Matter-JS</title> <!--matter-js cdnjs地址--> <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script> <!--<script src="../js/matter_0.14.2.js"></script>--> <script type="text/javascript"> var stageWidth = 800;//舞臺寬度 var stageHeight = 500;//舞臺高度 window.onload = function () { var Engine = Matter.Engine;//引擎 var Render = Matter.Render;//渲染器 var World = Matter.World;//世界 var MouseConstraint = Matter.MouseConstraint;//滑鼠控制 var Bodies = Matter.Bodies;//物體 var Composites = Matter.Composites;//符合材料 var Composite = Matter.Composite;//混合體 var Common = Matter.Common;//公用模組 var engine = Engine.create();//建立引擎 var render = Render.create({//建立渲染器 engine: engine,//渲染建立好的引擎 /**渲染頁面的body元素，即會在body標籤自動新建<canvas>畫布，同理如果element的值是某個div元素- * 則會在div下自動新建canvas，canvas的尺寸是options中的width、height * */ element: document.body, options: { width: stageWidth,//畫布的寬度 height: stageHeight,//畫布的高度 wireframes: true,//線框模式,預設false不使用線框模式 showAngleIndicator: true,//是否顯示角度,預設false showVelocity: true,//是否顯示速度,預設false showCollisions: true,//是否顯示碰撞點,預設false showBroadphase: true,//是否顯示寬頻，用於除錯,預設false showMousePosition: false // 滑鼠約束線 } }); Engine.run(engine);//執行引擎 Render.run(render);//執行渲染器 /**設定滑鼠控制*/ var mouseConstraint = MouseConstraint.create(engine, {}); var stack = Composites.stack(20, 20, 12, 4, 0, 0, function (x, y) { switch (Math.round(Common.random(0, 1, 2))) { /**為0時建立矩形*/ case 0: return Bodies.rectangle(x, y, Common.random(20, 50), Common.random(20, 50)); /**為1時建立多邊形*/ case 1: return Bodies.polygon(x, y, Math.round(Common.random(1, 8)), Common.random(20, 50)); /**為2時建立圓形*/ case 2: return Bodies.circle(x, y, Common.random(5, 20)); } }); /**將物體形以及滑鼠控制新增到世界中*/ World.add(engine.world, [mouseConstraint, stack]); World.add(engine.world, create4Wall(Bodies));//為世界4周新增4面牆 } /**建立4面牆-強制物體在牆內運動*/ function create4Wall(Bodies) { var ground_top = Bodies.rectangle(stageWidth / 2, 0, stageWidth, 40, {isStatic: true}); var ground_right = Bodies.rectangle(stageWidth, stageHeight / 2, 40, stageHeight, {isStatic: true}); var ground_bottom = Bodies.rectangle(stageWidth / 2, stageHeight, stageWidth, 40, {isStatic: true}); var ground_left = Bodies.rectangle(0, stageHeight / 2, 40, stageHeight, {isStatic: true}); return [ground_top, ground_right, ground_bottom, ground_left]; } </script> </head> <body> </body> </html>
當渲染的是body的元素時，則matter-js自動就是在body元素下生成畫布進行繪製。