Question

我需要将画布的原点更改为中心，用简单的javascript我这样做：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 1024;
canvas.height = 1024;
context.translate(canvas.width * 0.5, canvas.height * 0.5);

然后，如果使用x，y绘制0的形状，则将在画布的中心绘制。如何在easlejs中定义它？

Answer 1

要翻译画架画布的来源，您需要相应地为舞台设置x和y属性。

这是一个例子，显示在行动......

var canvas = document.getElementById('canvas')
var stage = new createjs.Stage("canvas");

// translate origin
stage.x = canvas.width / 2;
stage.y = canvas.height / 2;

// create shape
var circle = new createjs.Shape();
circle.graphics.beginFill("#07C").drawCircle(0, 0, 50);
stage.addChild(circle);
stage.update();

body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #999}

<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

画架改变原点2d画布翻译

1 个答案: