天道酬勤,学无止境

react-konva

Calculate degrees of Linear Gradient in Canvas using Konva with React?

I want to calculate the degree used in a Linear Gradient → linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248)) into x & y co-ordinates to use it in Konva, which is basically a wrapper around Canvas. I have found quite similar questions with a caveat that they are answered in vanilla Canvas, not Konva like: https://stackoverflow.com/questions/37669239/how-can-i-rotate-a-linear-gradient CSS convert gradient to the canvas version Canvas to use liniear gradient background set with an angle Calculate rotation of canvas gradient But when I tried implementing them, I don't get the

2022-04-26 21:45:13    分类:问答    javascript   css   canvas   konvajs   react-konva

How can I get the intersection of three shapes colliding and delete the parts that are not colliding in KonvaJs?

If I am given 3 circles and they are positioned as the primary colors circles (3 circles intersecting each other), is there a function that might help me to delete the parts that are not colliding with anything and just keep the intersecting parts? Another example could be drawing three lines in such a way that it forms a triangle. By deleting the parts that are not colliding, we would end up with 3 points (at least visually, not sure if I end up with 3 in total or 6 from stacking up), which are the edges of the previous triangle. I have been checking the ClipFunc and the HitFunc, but I am not

2022-03-16 05:20:49    分类:问答    konvajs   react-konva   Konva   konvajs-reactjs

react-konva 在舞台中央设置形状(react-konva set a shape at the center of stage)

问题 我正在使用 react-konva 在舞台上绘制形状并对其进行编辑,我选择了该形状,并且该形状已设置为专注于舞台(即来到舞台的中心)。 单击按钮后,我正在更新舞台的 X、Y 和比例,但我没有将形状准确地放在舞台的中心。 请查看此演示并分享您的意见: https://codesandbox.io/s/shapecenterdemo-o9hg2?file=/src/ShapeCenterDemo.jsx PS:无法从舞台上移除dragBoundFunc。 回答1 根据您的演示: focusRect = () => { let { rect, stageWidth, stageHeight } = this.state; let newScale = 6; const rectWidth = 50 * newScale; const rectHeight = 50 * newScale; const x = - rect.x * newScale + stageWidth / 2 - rectWidth / 2 ; const y = - rect.y * newScale + stageHeight / 2 - rectHeight / 2; let pos = this.boundFunc({ x, y }, newScale); this.setState({ stageX

2022-02-08 01:42:07    分类:技术分享    reactjs   konvajs   react-konva

react-konva set a shape at the center of stage

I am using react-konva for drawing shapes on a stage and to edit them I select that shape and the shape has be set to focus on stage(i.e come to the center of the stage). On the click of a button I am updating the X,Y and scale of the stage but I am not getting the shape exactly at the center of the stage. Please see this demo and share your inputs on this: https://codesandbox.io/s/shapecenterdemo-o9hg2?file=/src/ShapeCenterDemo.jsx PS: Can't remove the dragBoundFunc from the stage.

2022-01-24 17:46:52    分类:问答    reactjs   konvajs   react-konva

React 中的 Konva 无限网格(Konva infinite grid in React)

问题 我正在尝试通过包 react -konva 学习如何使用画布。 我找到了我需要用 javascript 编写的确切内容,但我需要像 react 组件一样使用它,并在单击按钮时添加矩形的图像。 谁能帮我重新组织代码以在反应中显示它......这是我在网上找到的小提琴...... https://jsfiddle.net/kiksy/jqo2h3dx/2/ const stage = new Konva.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight, draggable: true }); const layer = new Konva.Layer(); stage.add(layer); const WIDTH = 100; const HEIGHT = 100; const grid = [ ['red', 'yellow'], ['green', 'blue'] ]; const blocks = [ { w: 150, h: 150 , background: "white" , image: "/img/test2.png" , fullImage: false, title: "" , text: "" }, { w: 150, h: 150

2021-12-23 17:43:34    分类:技术分享    javascript   reactjs   grid   konvajs   react-konva

Konva infinite grid in React

i,m trying to learn how to use canvas via a package react -konva. I fount the exact thing what i nead write in javascript but i nead to have it like react component and add images where rectangles are on button click. Can anyone help me to reorganize the code to display it in react.... This is the fiddle that i found on the web...https://jsfiddle.net/kiksy/jqo2h3dx/2/ const stage = new Konva.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight, draggable: true }); const layer = new Konva.Layer(); stage.add(layer); const WIDTH = 100; const HEIGHT = 100; const

2021-12-20 10:00:06    分类:问答    javascript   reactjs   grid   konvajs   react-konva

使用鼠标拖放选择形状不起作用 - React Konva(Selection of shapes using mouse drag and drop not working - React Konva)

问题 我正在尝试使用React konva Transformer创建多个形状选择。 它可以很好地用鼠标单击一个形状然后单击另一个形状,创建两个形状的完整选择。 我希望通过鼠标拖放来实现这一点。 为此,我在文档中提到的舞台上编写了鼠标向上、向下以及移动和单击功能。 没有错误,但鼠标拖动选择不起作用。 我希望选择与文档演示中给出的完全相同。 这是我的演示沙箱链接。 回答1 有很多方法可以做到这一点。 我的方式: const selectionRectRef = React.useRef(); const selection = React.useRef({ visible: false, x1: 0, y1: 0, x2: 0, y2: 0 }); const updateSelectionRect = () => { const node = selectionRectRef.current; node.setAttrs({ visible: selection.current.visible, x: Math.min(selection.current.x1, selection.current.x2), y: Math.min(selection.current.y1, selection.current.y2), width: Math.abs(selection

2021-10-30 10:24:10    分类:技术分享    reactjs   react-hooks   konvajs   react-konva

使用 react-konva 翻转图像(Flip Image with react-konva)

问题 随着 https://github.com/lavrton/react-konva 如何翻转图像(水平或垂直)我正在使用此功能,但它不起作用: flip = direction => { this.setState({ width: -this.state.width }) } 回答1 最好使用 scale 属性: <Image image={this.state.image} scaleY={-1} y={200}/> 因此,在您的状态下,您应该使用 1 或 -1 值存储scale属性, https://codesandbox.io/s/v6yk2j2w0l

2021-10-23 08:38:01    分类:技术分享    reactjs   image   flip   konvajs   react-konva

Selection of shapes using mouse drag and drop not working - React Konva

I am trying to create a multiple shape selection using Transformer of React konva. It is working well with the mouse click on one shape and then to other shape, creates a whole selection of both shapes. i want this to be achieved by mouse drag and drop. for which i wrote mouse up,down and move and click functions on stage which are mentioned in the documentation. there is no errors but mouse drag selection is not working. I want the selection to work exactly same as given on documentation demo. Here is my demo sandbox link.

2021-10-21 03:49:37    分类:问答    reactjs   react-hooks   konvajs   react-konva

Flip Image with react-konva

With https://github.com/lavrton/react-konva How can I flip an image (horizontally or vertically) I am using this function, but it is not working: flip = direction => { this.setState({ width: -this.state.width }) }

2021-09-24 06:25:27    分类:问答    reactjs   image   flip   konvajs   react-konva