/core/shapes/circle

[giscus[bot]]

/core/shapes/circle

Seamless, headless and fully-tested HTML5 canvas library that provides a couple of high level APIs

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

[bupthcp]

I insert shapes and text to a board, but they can't be selected when I use mouse to click the shapes. But when I insert image , the image can be selected when mouse click on it .Can you help me to find out why?

[raminious]

Hey @bupthcp
Could you please provide an example with Codesandbox?
You can fork this starter project https://codesandbox.io/s/pikaso-starter-9lm0gv

[bupthcp]

Actuallly in your code sandbox repo , it's OK. But in my project ,it doesn't work. I found the reason, in Selection/index.ts :

private onDragZoneStart(e: Konva.KonvaEventObject<MouseEvent>) {
const shape = this.board.activeShapes.find(
      (shape) => shape.node === this.getParentNode(e.target),
    );

The result of find is always false when the node type is not image or label, though the node is exactly same as the e.target's parent node.
I changed the code to use node's index to make a judge and it works:

    const shape = this.board.activeShapes.find(
      (shape) => {
        const targetParent = this.getParentNode(e.target);
        if (shape.node.index === targetParent.index) {
          return true;
        }
        return false;
      },
    );

[bupthcp]

Ah, I find the reason. It's because of vue3. If I put the Pikaso instance in vue data section, the Pikaso instance will be wrapped by vue3, then the object equation will failed. I just need to assign the Pikaso instance in data section to a function local variable ,and I use the local variable to access insert , then everything will be OK

[raminious]

Glad to hear that. I was getting ready to start debugging. you saved my time lol 👍

[Ali-Abbas-Dev]

I want to change the opacity of the selected shape, and background also.

function changeShapeOpacity(item, event) {
		item.attrs.opacity = event.target.value;
		console.log(item.attrs);
	}

In console, value is being updated but it doesn't render on canvas.
Here, item is the selected shape and event is drops the value from input:range slider.
Could you please help, I'm stuck.

[raminious]

if item is a ShapeModel try item.node.setAttr('opacity', event.target.value)

[Ali-Abbas-Dev]

Please describe how to add gradeint to any shape or canvas background, I couldn't do it..

[raminious]

please see https://github.com/pikasojs/pikaso-site/blob/master/src/pages/Core/Shapes/index.tsx#L42

editor.shapes.rect.insert({
  width: 150,
  height: 150,
  x: 1000,
  y: 100,
  fillLinearGradientStartPoint: { x: -150, y: -150 },
  fillLinearGradientEndPoint: { x: 150, y: 150 },
  fillLinearGradientColorStops: [0, 'purple', 1, 'yellow']
})