SVG images not working

[udarts]

I am trying to use svg images (using data base64 part), but I am unable to make it to work.

const konvaImage = new Konva.Image({
    image: svgImage
})
editor.shapes.image.insert(konvaImage, {

})

Is anyone able to use svg images?

[raminious]

You may use shapes.svg

https://pikaso.app/#/core/shapes/svg

[udarts]

Thanks for your reply. I tried that as well, but didn't show the svg image.

editor.shapes.svg.insert({
    data: 'path data',
    fill: 'white',
    x: 20,
    y: 20,
    scaleX: 1,
    scaleY: 1
})

The path data is the part of the path tag and from between the d=""

[udarts]

I seem to be able to make it kinda work (not via the svg.insert part), but using the new Konva.Image() part

The only issue I have is that I have 2 options for the same svg image (color options), when I switch between the colors, the code just adds the svg (keeping the previous one), how can I remove the previous added and replace it by the new one?

[raminious]

const myImage = editor.shapes.svg.insert({
    data: 'path data',
    fill: 'white',
    x: 20,
    y: 20,
    scaleX: 1,
    scaleY: 1
})

myImage.delete()

Essentially, you can preserve a reference to your produced shape in your state and then delete it. 'editor.board.shapes' also provides access to all produced shapes.

Is this what you're looking for?

[udarts]

hi @raminious, sorry for the late reply.

Let me explain what I am trying to do.

I have a selection of images which people can select as background image, added as image and not as background image, as they still need to be able to manipulate the image. Then they can add a logo (2 colour options).

So here is the issue:

When they select an image as background, it is added as it should. But when they select a different image, what happens is that an extra image is added, while it should replace the current background image.

This is how background image gets added:

const ZoomCanvas = ({ image }) => {
    const [ ref, editor ] = usePikaso();

    useEffect(() => {
        if (!editor) {
            return;
        }

        editor.shapes.image.insert(image, {
            x: 0,
            y: 0,
            width: banner.bannerwidth + 10,
            height: banner.bannerheight + 10,
            name: "Background Image " + getFileName(image)
        });
    }, [editor, image]);

    return (
        <div 
            ref={ref}
            style={{
                width: banner.bannerwidth + "px",
                height: banner.bannerheight + "px"
            }}
        />
    )
}

I've also checked the "editor.board.shapes" in the console.log, but not sure how I can replace an item in the object.

[raminious]

editor.shapes.image.insert(image, { x: 0, y: 0, width: banner.bannerwidth + 10, height: banner.bannerheight + 10, name: "Background Image " + getFileName(image) });

check this https://pikaso.app/#/core/background

Also I provided a basic dummy codesandbox for you that shows how you can update an image after creating that

https://codesandbox.io/s/pikaso-update-image-gdygq8?file=/src/App.tsx

[udarts]

Hi @raminious, sorry for the late reply.

Thanks for the dummy, but that still seems to add an extra image. What I want is to replace the current (if existing) background image.

[raminious]

please provide a working Codesandbox (like what I did) so I can help you to debug your snippet

[udarts]

Hi @raminious, hereby the sandbox: https://codesandbox.io/s/thirsty-sinoussi-jyqhz5

If you click the button, you see it adds another image, instead of replacing the current (drag the new image to see the previous behind it).

[raminious]

It's happening because changing the url will call insert method and it will add another image instead of changing that

ps: I provided an example for you: I used board.background instead of image drawer which I think it makes more sense here

https://codesandbox.io/s/priceless-leftpad-kldrkt?file=/src/Canvas.js

[udarts]

Hi @raminious,

Thanks for the reply, but reason why I do not want to use the board.background, is that I need to be able to drag the background image around. So setting it as board.background is not working for me.

[raminious]

got it. I'll do my best to give you an example with Image by tomorrow.

[udarts]

Hi @raminious, were you able to find a solution? Thanks for looking into this.

[raminious]

Hi @udarts have you checked this before https://codesandbox.io/s/pikaso-update-image-gdygq8

[udarts]

Thanks @raminious, will have a look.