add a picture to the background

[ahmetozalp]

Hello, I want to add a picture to the background and give canvas size according to the size of the picture. How can I do this?

[ahmetozalp]

This is not a component, as I understand it is not included in the project.

[dilidili]

@ahmetozalp what do you mean is that you need a "picture presentation" mode, and all drawing operations will be painted on that background image?

[ahmetozalp]

At first you will add a background picture and then paint on it, but whatever the picture size is, it will be that size on the blackboard. (translate)

[ahmetozalp]

In addition, this project does not work as a component.

[dilidili]

In addition, this project does not work as a component.

ok i will adjust styles to make it able to work as a component.

[ahmetozalp]

When adding the component, it removes the html codes from the body

[ahmetozalp]

hello can you make this a component? :)

[dilidili]

hello can you make this a component? :)

this weekend i will make this.

[dilidili]

@ahmetozalp version 0.3.5 supports Turkish now and you can use style={{ width: '100%', height: '100%' }} to use Sketch as a component.

[ahmetozalp]

Hello, I added the whole project in the form of component by converting it to sass, but there is a feature that I want to do. The photo you see will come as the background in the first upload and the white background will be in the size of the photo. How can I do this so that I can draw on the photo?

[ahmetozalp]

I solved the problem, how do I disable the zoom?

[dilidili]

@ahmetozalp you can use the viewMatrix prop to keep the size of white background as the photo or mock zoom and drag action to align the photo.

if you want to disable the zoom, you can ignore the scale viewMatrixChange:

const onViewMatrixChange = (viewMatrix: ViewMatrix) => {
  if (lastViewMatrix[0] !== viewMatrix[0]) {
    return;
  }
}

[dilidili]

maybe i should provide some utils to operate the viewMatrix.

[ahmetozalp]

thank you

[ahmetozalp]

@ahmetozalp you can use the viewMatrix prop to keep the size of white background as the photo or mock zoom and drag action to align the photo.

if you want to disable the zoom, you can ignore the scale viewMatrixChange:

const onViewMatrixChange = (viewMatrix: ViewMatrix) => {
  if (lastViewMatrix[0] !== viewMatrix[0]) {
    return;
  }
}

Can you tell me how to use it I don't want zoom

[ahmetozalp]

fixed.