/core/shapes

[giscus[bot]]

/core/shapes

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

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

[habib-it]

I have 3 scenarios that i want add to add for objects/shapes

1. Draw an object over an other
   when i create an object rectangle react. and want to create new object of line, it does not allows me to create line over an rect.
   it only allows to draw line outside that rectangle. and we can drag that line over that rect object.
   is there any way to draw and object over an other object.

2)Rect Resize issue
when i create a rect and started resizing it, it resizes it from both side. like when resizing left side of rect. right side also got changed.
is there any way to to resize from only one side.

3. when we resize or create an object. we get its lengths like height and width.
   is there any way we can manually add and upadte width and height of any object.

[raminious]

@habib-itempire

1- Pikaso extends Konva capabilities, so I'm not sure if there is an obvious way to do this. It might be worth asking them.
(As a side note, you can change the behavior of resizing by pressing shift and resizing from the corners )

2- The meaning you are trying to convey is not fully understood by me. I could do it. please let me know if you are looking for something else.

3-

const myObject = editor.shapes.rect.insert({
  width: 100,
  height: 100,
  x: 100,
  y: 100,
  fill: 'red'
})

myObject.update({
  width: 200,
  height: 200
})

[habib-it]

thanks for the reply. i appreciate that.
2) i want to say. when you create a rect, on first time you can create of any size, but after creating when you again click on that rect and resize from one size it started resizing from both sides not the side we want to change.
see the link below
https://mega.nz/file/lgsg2CbC#TDVbDrXZouw_yx9-C1JQegiHlyv6cz8ju_7w2pTgck0

[habib-it]

Thanks a lot. It worked. I really appreciate that.

[raminious]

I’m happy to help, sir.

[habib-it]

about 1st question - Draw an object over an other

is there any option like we draw a rect. and want to draw objects like line within that rect. and that is not happening.

but is there is any way that a simple box we can draw like empty one will have only outline with width and height so we can then draw object within that.

[habib-it]

and one more thing like when you create 3 object
first will be show
2nd will be over 1st one when you drag it. like 1st one is behind that.
same case with the 3rd one it will be on top when you drag over other that were created before 3rd one.

is there any option when you select any object its place changed like it comes on top whether you select 1st object it will be over other two.
and when selecting 2nd object it will be free to drag or come over others

[raminious]

you can use moveToTop, moveToBottom, moveUp and moveDown methods

example:

const myShape = editor.shapes.circle.insert({ 
  // your options
})

// later you can update it's position
myShape.node.moveDown()

// or
const theShape = editor.board.activeShapes.find(shape => shape.id === '<ID>')
theShape.node.moveToTop()

[robertwilli1]

about 1st question - Draw an object over an other

is there any option like we draw a rect. and want to draw objects like line within that rect. and that is not happening.

but is there is any way that a simple box we can draw like empty one will have only outline with width and height so we can then draw object within that.

I tried to set interactive : false in selection configuration by which i was able to draw one object on another but now i cannot select any object to resize or drag it.

what should i do to set a condition so i can draw an object on another object then also select it and drag it

[raminious]

@osamatan125 can you please share some codes so I can investigate that. also recording a quick screen-record would be very helpful

[robertwilli1]

i have messaged you on [email protected]

[discoverilla]

Hi, nice to meet you.

I have a question. I want to show the item list of Pikaso element in Sidebar.
If you know the answer, please let me know

[raminious]

Hi
const editor = new Pikaso({ /* options */ })

editor.board.activeShapes lists all shapes that have not been hidden or deleted.
editor.board.shapes lists all shapes, including hidden and deleted ones.

[habib-it]

Hey!
Can you change rotation icon of objects.
like it should be refresh icon that is commonly used so user might understand its purpose.

[habib-it]

or can we have both functionalities on every corner like user can rotate and resize
like this one https://mega.nz/file/d4UWSQDT#IMgexutuyeVJ6qX_DhtYD_tmlmYQ627qKgIZnlxEgic

[habib-it]

Hello Sir!
Can I get reply please.
Thanks

[raminious]

@habib-it

According to the documentation, Pikaso uses Konva underlayment. so you need to check for the possibility here https://konvajs.org/api/Konva.Transformer.html

https://konvajs.org/docs/select_and_transform/Basic_demo.html