• This might be helpful if design own hour and minutes hands for a watch.

    Having a green laser sword and want to rotate it on my Bangle.js around xm=120 and ym=120.

    // width : 15, height : 106, bpp : 8,
    var greenLaser = 
    require("heatshrink").decompress(atob("h­9qxH+AAvW1my64KGAAXX1eGwwOK2NasFaw3WBxVh­sAOe2QOI1dgsI7BBxHWByIsKDqeFBxOHBwNhBxod­K2WGO4QOaHZgOF1gOMsOxBzdgBxOFBwZKJByVaBz­JYCrRKJBoQOLOwYOKYIIOR1YOO64ON6wOLsAONDp­OrNAYdJ2IOM6+xHYmHByvW1YOEwwOOcIwOQLIgdX­w7vEBxodI2WGB0WFBxBZEBx+sFhoOIDodhBxGFDo­YABBzlgBxtaNA4YBBxg6FBxNgrQADfxGr2QAEBwo­AO6+sAAvXBo1WAAeBqwQBBwmBgAAFqweCFIVWBw4­vCBgUrBw0rlYQBFI4AFwIPBIgIACJIRODJgJlGAA­qEQCQIsDAAodCM5BaCByIPBFhLQSM5S0DwKbBAAx­ZEWQ4ACBwaeEDpA8KK6R1JUobvOfx4OqNgIO/B34­O/Bx7gClYOLwIdOwNWDxFWq2s/3X69WF4gDBBgIN­BAAPXF4+B64NCAAIvBAAobD"));
    
    const p180 = Math.PI/180;
    // three o'clock : 90°
    var a = 90;
    g.drawImage(greenLaser,120,120,{rotate:a­*p180});
    
    

    As the image center is not the center you like as center for your rotation it it necessary to add some corrections . The new center in this case is centerX/Y =121 which is a rotation on a circle xm=120, ym=120, r=21

    const p180 = Math.PI/180;
    var a = 90;
    var r =21; 
    var x = r * Math.sin(a*p180);
    var y = r * Math.cos(a*p180);
    g.drawCircle(120,120,21);
    g.drawImage(greenLaser,120+x,120+y,{rota­te:a*p180});
    

    3 Attachments

    • green-laser-small.png
    • screenshot_2.png
    • screenshot_1.png
  • Nice - thanks!

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

How To rotate a image on a different image center

Posted by Avatar for MaBe @MaBe

Actions