[Question] Can we transform an element itself instead transform canvas?

[p1usign]

To describe it more clearly, let me give an example. Now I have an image, its width and height are 100px. I want rotate this image around its center, it might be something like:

img.offset = (50, 50) // set the center point of the image as origin point
img.Rotate(90) // it will rotate around the center point

After rotate, We want to put it on canvas upper left corner:

ctx.DrawImage(img, 50, 50) // this position is the image center point's position

In the end, we get a image, which is completely in the canvas upper left corner, after being rotated 90 degrees.

How can we simply achieve this effect? I look forward to discussing it with you

[tdewolff]

Thanks for reaching out! You can't rotate an image in-place before drawing it, you need to adjust the view to draw it correctly. There are other libraries that can help you rotate an image 90°, 180°, 270° before hand, but if you want to just use canvas here is an example to achieve what you want:

package main

import (
    "image/png"
    "os"

    "github.com/tdewolff/canvas"
    "github.com/tdewolff/canvas/renderers"
)

func main() {
    // load image
    f, err := os.Open("lenna.png")
    if err != nil {
        panic(err)
    }
    lenna, err := png.Decode(f)
    if err != nil {
        panic(err)
    }

    // setup canvas
    c := canvas.New(200, 200)
    ctx := canvas.NewContext(c)

    // set coordinate system with origin in top-left
    ctx.SetCoordSystem(canvas.CartesianIV)

    // rotate the view at the center of the image
    ctx.RotateAbout(-90.0, 50.0, 50.0)                   // negative is counter-clockwise in CartesianIV
    ctx.DrawImage(0, 0, lenna, canvas.DPMM(512.0/100.0)) // image is 512x512 px drawn as 100x100 mm
    ctx.ResetView()

    // output as 200x200px
    renderers.Write("out.png", c, canvas.DPMM(1.0))
}

Let me know if that works or if you have any other questions!

[p1usign]

get! thanks for your reply!