Below is the code for a component I am working on:
<Image
// stroke={perPageFrameColor?.filter((item) => item.page == pageCurrent+1)[0]?.framecolor}
stroke={color?.framecolor}
strokeWidth={stroke}
onClick={onSelect}
onTap={onSelect}
ref={shapeRef}
{...shapeProps}
draggable
onDragEnd={(e) => {
onChange({
...shapeProps,
x: e.target.x(),
y: e.target.y(),
});
}}
onTransformEnd={(e) => {
// transformer is changing scale of the node
// and NOT its width or height
// but in the store we have only width and height
// to match the data better we will reset scale on transform end
const node = shapeRef.current;
const scaleX = node.scaleX();
const scaleY = node.scaleY();
// we will reset it back
node.scaleX(1);
node.scaleY(1);
setDrag({
...drag,
x: node.x(),
y: node.y(),
});
onChange({
...shapeProps,
x: node.x(),
y: node.y(),
// set minimal value
width: Math.max(5, node.width() * scaleX),
height: Math.max(node.height() * scaleY),
});
}}
image={image}
onDragStart={() => {
setDrag({
isDragging: true,
});
}}
shadowColor="red"
shadowOffset={{x:20,y:20}}
/>
I am trying to add inner and outline strokes to the image component provided by React Knova.
Could someone please guide me on how to achieve this in React Knova?
I attempted to implement this by using the above shadowOffset property. However, it seems to only apply to the left and bottom sides. How can I accomplish my goal using React Knova? I have made several attempts, but haven't been successful in finding a solution.