konvajs

问题 I have successfully created a button which rotates an image either clockwise or C-Clockwise. However, this button can only be used once. i.e. if i press CW i cannot then use CCW to revert the image back. Any ideas? $rw = $('#rotate_right'); $rw.on('click', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false; darthVaderImg.offsetX(img_width / 2); darthVaderImg.offsetY(img_height / 2); // when we are setting {x,y} properties we are setting position of top

问题 I have successfully created a button which rotates an image either clockwise or C-Clockwise. However, this button can only be used once. i.e. if i press CW i cannot then use CCW to revert the image back. Any ideas? $rw = $('#rotate_right'); $rw.on('click', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false; darthVaderImg.offsetX(img_width / 2); darthVaderImg.offsetY(img_height / 2); // when we are setting {x,y} properties we are setting position of top

问题 I am using react-konva for drawing purposes. I have configured the stage and I am drawing certain shapes in that stage container. The problem I am facing is that the origin coordinates(0,0) are at the top left of the stage container. I want the center of the stage to be the origin(0,0). Here is the present code: <Stage height={800} width={1200} style={{ backgroundColor: '#fff', border: 'solid'}}> { this.state.circlePoints.length !== 0 && <LineComponent startX={1200/2} startY={800/2} endX=

问题 I am using react-konva for drawing purposes. I have configured the stage and I am drawing certain shapes in that stage container. The problem I am facing is that the origin coordinates(0,0) are at the top left of the stage container. I want the center of the stage to be the origin(0,0). Here is the present code: <Stage height={800} width={1200} style={{ backgroundColor: '#fff', border: 'solid'}}> { this.state.circlePoints.length !== 0 && <LineComponent startX={1200/2} startY={800/2} endX=

问题 I'm struggling to apply corner radius (on all sides) in a group shape using a custom clip function. Here's my codesandbox: https://codesandbox.io/s/w28nrrj885 回答1: I copied your clipSquare function into the plain JS snippet below to test your assumptions. It's all good. Looking further into your code the issue is that you are using the same x,y,w,h values in the definition of the group clip function as you use for the definition of the canvas. This has the effect of making the group overflow

问题 I've been using the Konvajs clipping function to limit what can be seen inside a bounding box. Has anyone managed to write a similar function but when the konva object leaves the bounding box it changes in opacity instead of simply not being seen? Thanks for the input. 回答1: Here's a working version. The yellow region is the canvas extent. The clear image in the center is the clipping region. The semi-transparent region is the full extent of the image. Click & drag the clipped region and you

问题 Below is a basic growing effect in Konvas.js (v 2.4), starting from the upper left corner of the image (https://codepen.io/simedia/pen/mzrvJq) var width = window.innerWidth; var height = window.innerHeight; // where everything stands in Konvas var stage = new Konva.Stage({ container: 'container', width: width, height: height }); var layer = new Konva.Layer(); // image object in Konvas var kim = new Konva.Image({ x: 10, y: 10, scaleX: 0, scaleY: 0, }); layer.add(kim); stage.add(layer); //

问题 So I went through the sample code listed on the vue-konva page. Although it samples creating shapes I understood it enough to try to display a simple image to start. Here is the base code. My question lies in how do I attach the actual image file to the "image" property. Or if I am missing something else. <template> <div id="app"> <h1>Display Image via Konva</h1> <div> <v-stage ref="stage" :config="configKonva"> <v-layer ref="layer"> <v-image :config="configImg"></v-image> </v-layer> </v

问题 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 }) } 回答1: It is better to use scale property: <Image image={this.state.image} scaleY={-1} y={200}/> So in your state, you should store scale property with 1 or -1 values, https://codesandbox.io/s/v6yk2j2w0l 来源： https://stackoverflow.com/questions/50690175/flip-image-with-react-konva

问题 I've spent hours googling about Kinetic.Layer.draw() method. All that I've found is use-cases - no documentation about how, when and why to use it. Maybe it's deprecated already? These are primary links which I use while learning and playing with this wonderful framework: http://kineticjs.com/docs/index.html http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/ It will be really helpful if somebody explains to me such misunderstanding. 回答1: