JavaScript — Как сделать рисунок на холсте всегда в центре

Как сделать рисунок на холсте всегда в центре

Я не уверен на 100%, чего вы хотите, однако это может помочь.

Сначала переместите начало холста в центр холста. Так что если вы рисуете что-то, например, ctx.fillRect(-10,-10,20,20) это находится в центре холста. Вы можете сделать это с помощью ctx.setTransform(1, 0, 0, 1, ctx.canvas.width / 2, ctx.canvas.height / 2)

Затем просто переместите ваши коробки относительно нового происхождения.

Сбросить начало координат до верхнего левого ctx.setTransform(1,0,0,1,0,0);

Моды, необходимые для того, чтобы делать то, что, я думаю, вы хотите, можно сделать в функции рисования.

 draw = () ={amp}gt; { const state = this.state; const ctx = state.ctx; ctx.setTransform(1,0,0,1,0,0); // restore top left origin ctx.clearRect(0, 0, this.props.width, this.props.height); ctx.setTransform(1,0,0,1,ctx.canvas.width / 2, ctx.canvas.height / 2); this.drawCube( state.x1 / 2 - state.x2 / 2, // center x state.x1 / 4   state.x2 / 4   state.y / 2, // center y  (state.x1) ,  (state.x2) ,  (state.y) , '#0000', 0 ); const x1 = state.x1 - state.bufferLength; const y1 = state.x2 - state.bufferWidth; const z1 = state.y - state.bufferHeight * 2; this.drawCube( x1 / 2 - y1 / 2, x1 / 4   y1 / 4   z1/ 2, x1, y1, z1, state.color, 10 ); requestAnimationFrame(this.draw); }; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector