Graphics Component - drawImage Support

Hi CC Team!

We are testing Graphics Component for a project and we noticed that it does not support drawImage api although it’s based on web canvas’ drawing APIs. So, will there any support for it in the future?

Or any idea how we can achieve this using whatever available in Cocos Creator?

Basically, we wanted to convert our HTML5 canvas app (drawing board) to a Cocos’ project. “drawImage” is being used for painting textures on the drawing board. Please find the screenshot of the simplified app below:
image

Hi, there, we are simulating the API set of Canvas graphics for frontend devs to be familiar with, but it’s not based on Canvas technically.
The effect you want to achieve can be done with Mask with graphics stencil, you just set the stencil type to graphics, and use the related graphics component to draw the stencil as you normally do, and it will mask the rest of the image.
https://docs.cocos.com/creator/manual/en/ui-system/components/editor/mask.html?h=mask

1 Like

Hi hi, thanks for your reply. Please refer to the video below:

In order to work as above using mask, how are we going to arrange (the z-orders of) images? Or maybe I didn’t get your way of the solution. Please kindly explain to me again.

I was thinking about; I would need something like “drawing a part of an image on another image or canvas”. Do we have an API like that?

Each time you change a stencil image you need to add a new Node with Mask component (Graphics stencil) and the order of Mask node will determine the drawing order

Now, I roughly got the idea of you what you were saying.

Since it’s for a drawing board app / coloring app,

  • whenever the user changes the coloring tool (not solid colors, they will be images)
  • we will have to create a new node with mask?

As in the video above,

  • when the user selects Gold texture and paints somewhere, then we create a new node with gold
  • then, when the user selects Black Leather texture, we create a new node
  • then, when the user switches back to Gold, we can’t reuse the previous node with gold (since it will mess up the rendering order), and we will have to create a new node again
  • if the user switches the tools a few hundred times (for a serious user, this could be the case), we will have to create hundreds nodes? Will there be any performance impact?

Please correct me if I’m wrong.

I see, in that case, what I proposed will be too heavy.

I suggest you to use directly graphics component, but with custom material
https://docs.cocos.com/creator/manual/en/ui-system/components/editor/graphics.html

Critical work to do

  1. Replicate builtin-graphics effect, modify it to support texture painting with uv tiling
  2. Whenever the brush changes, a new Graphics need to be created (for ordering), the texture need to be changed for the material instance
1 Like