我正在尝试覆盖设置为Point mCurrent = Point.Empty;
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
mCurrent = e.Location;
Invalidate();
}
private void Form1_MouseUp(object sender, MouseEventArgs e)
{
mDown = Point.Empty;
mCurrent = Point.Empty;
Invalidate();
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
if (Control.MouseButtons == System.Windows.Forms.MouseButtons.Left)
{
Rectangle rect = rectangle(mDown, mCurrent);
// either one..
using (SolidBrush brush = new SolidBrush(Color.FromArgb(32, 255, 0, 0)))
e.Graphics.FillRectangle(brush, rect);
// ..or both of these
e.Graphics.DrawRectangle(Pens.Red, rect);
}
}
在对文档进行一些挖掘后，我发现：
800x600看似有趣的选项包括：Matter.Render.create([options])
和render.options.height。
如何正确使用它们？
我尝试了什么：
render.options.width警告我收到了：
[问题]警告：没有“render.element”通过，“render.canvas”没有 插入文件。
根据docs：
render.element HTMLElement
对画布所在元素的引用 要插入（如果尚未指定render.canvas）
答案 0 :(得分：8)
不幸的是，Matter.js没有很好的文档（虽然相信我这是一个很好的引擎）。您应该使用具有属性Engine.create且具有属性render和element的对象来调用canvas。如果您没有将画布传递给此函数，则会创建一个新的canvas元素并将其附加到给定元素。虽然在我的测试用例中，它似乎仍然需要一个元素作为渲染属性。我知道这很奇怪，但情况变得更糟......
现在，如果要设置画布的大小，请浏览主对象并按照此路径进行操作 - ＆gt; render.options.width和render.options.height这样就可以了：
{
render: {
options: {
height: 1000,
width: 1000
}
}
}
但问题是，当你传递自己的canvas元素时，Matter决定画布的高度和宽度应该是设置为元素的那个而不是智能程序员传递的选项。我已经提交了this issue at Matter.js's GitHub repository并提供了PR解决方案，但可能很快就不会合并。因此，我无法真正为您提供一个完美的解决方案来覆盖选项，但解决此问题的一种简单方法是在启动引擎之前设置canvas.width和canvas.height。 / p>
canvas.width = 1000;
canvas.height = 1000;
还有一个内部调整大小的方法，但没有比上面的选项更好。因此，如果您真的要覆盖选项（也许您正在开发引擎之上），那么我建议您只需离开render.canvas undefined即可将画布创建保留到Matter.JS。
以下是使用canvas.width和canvas.height的完整解决方案，请注意，上面提到的警告不再存在，并且Matter.js使用给定的canvas元素并将其附加到给定的渲染元件。
// Matter.js module aliases
var Engine = Matter.Engine,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies,
Composites = Matter.Composites,
Composite = Matter.Composite,
Constraint = Matter.Constraint,
engine;
(function() {
var canvas = document.getElementById('canvas');
var width = 1000,
height = 1000;
canvas.width = width;
canvas.height = height;
engine = Engine.create({
render: {
element: document.body,
canvas: canvas,
options: {
width: 1000,
height: 1000
}
}
});
// run the engine
Engine.run(engine);
})();<script src="http://brm.io/js/libs/matter-js/matter-0.7.0.min.js"></script>
<canvas id="canvas"></canvas>
编辑：
如果您需要画布来填充整个页面，请使用：
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Matter.js module aliases
var Engine = Matter.Engine,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies,
Composites = Matter.Composites,
Composite = Matter.Composite,
Constraint = Matter.Constraint,
engine;
(function() {
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
engine = Engine.create({
render: {
canvas: canvas
}
});
window.addEventListener("resize", function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// run the engine
Engine.run(engine);
})();body {
margin: 0;
overflow: hidden;
}<script src="http://brm.io/js/libs/matter-js/matter-0.7.0.min.js"></script>
<canvas id="canvas"></canvas>
编辑2： pull请求已合并，将在下一个边缘构建中可用。