0
232
ViewsCómo posicionar mi imagen en un lienzo posicionando
Quiero dibujar mi imagen en las siguientes posiciones ancladas. ¿Cómo puedo lograr esto con Context2d::drawImage()? Lo coloqué a propósito (0,0) por cierto.
anchors.right: parent.right anchors.top: parent.top anchors.rightMargin: -10 Canvas { anchors.fill: parent onPaint: { var ctx = getContext('2d'); ctx.save(); ctx.canvas.width = 160; ctx.canvas.height = 432; ctx.font = "18px Ubuntu"; ctx.textAlign = "center"; ctx.fillStyle = "#000000" const centerX = 10; const centerY = ctx.canvas.height / 2; const angle = Math.PI; const radius = 130 ctx.fillStyle = "#000000" ctx.restore(); ctx.save(); ctx.drawImage(abcBar, 0, 0, abcBar.width, abcBar.height); console.log('loaded') ctx.restore(); }
·
Juan Pablo Isaza
1 answers
Answer question0
<!DOCTYPE html> <html> <body> <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://picsum.photos/200" width="220" height="277"> </div> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const image = document.getElementById('source'); image.addEventListener('load', e => { //ctx.drawImage(image, 0, 0); ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); //The source image is taken from the coordinates (33, 71), with a width of 104 //and a height of 124. It is drawn to the canvas at (21, 20), where it is given //width of 87 and a height of 104. }); </script> </body> </html> 
·
Juan Pablo Isaza
Report
Answer question