by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 22 17:09
    bgondy commented #649
  • May 22 16:43
    lavrton commented #649
  • May 22 16:37
    bgondy commented #649
  • May 22 14:00
    matcic commented #913
  • May 22 13:03
    matcic closed #913
  • May 22 13:03
    matcic commented #913
  • May 21 17:29
    lavrton commented #913
  • May 21 17:29
    lavrton commented #913
  • May 21 15:35
    matcic edited #913
  • May 21 15:10
    matcic opened #913
  • May 20 14:29
    danielcrisp commented #912
  • May 20 13:53
    lavrton commented #912
  • May 20 13:53
    lavrton commented #912
  • May 20 13:34
    lavrton commented #912
  • May 20 10:50
    ines commented #912
  • May 20 08:42
    externuz commented #256
  • May 20 08:41
    externuz commented #256
  • May 20 08:41
    externuz commented #256
  • May 20 08:40
    externuz commented #256
  • May 20 08:40
    externuz commented #256
MuhammadUsman390-angular
@MuhammadUsman390-angular
@lavrton I have solved it as I am setting width and height to src element where image was previewing.
@lavrton Now, I want to remove clipFunc on back button click but I am unable to find how to remove in documentation.
2 replies
AYAZ AHMED KHAN
@RajAyaz
This message was deleted
1 reply
AYAZ AHMED KHAN
@RajAyaz
@lavrton how to removing specific node from stage working incorrectly i remove layer from stage next time image not add because layer removed already so what should i do in this situation
2 replies
Leonel Costa Braz
@leonelcbraz

text.skewX(0.5)

@lavrton What would be the unit for that?

Anton Lavrenov
@lavrton
I don’t remember actually.
I guess it is a Math.tan of a skew angle.
AYAZ AHMED KHAN
@RajAyaz
how to remove clone layer?
@lavrton
Anton Lavrenov
@lavrton
@RajAyaz what did you try?
Erica Yuen
@ejyuen
@lavrton hello, I'm building an application where a user can free draw on the canvas, and after every stroke (called onmouseup), I make an ajax call to a flask backend to process the strokes to generate colors. It seems that when I draw strokes super quickly, the stroke is added on the canvas, but the stroke data isn't properly sent to the backend. This also occurs if I undo or redo super quickly (basically, backend doesn't seem to fully update to match what i have on the frontend due to latency). Do you have suggestions as to how I can improve performance, or make sure that all of my calls are getting processed?
AYAZ AHMED KHAN
@RajAyaz
because i need it on my functionality
MuhammadUsman390-angular
@MuhammadUsman390-angular
@lavrton I have saved json to server, all is working fine. When I edit after saving stage draws from json rightly, I trigger events after drawing stage but changes are detected when other node add into the stage. For example, I draw an image and shape on stage and apply events on it and saved it. But when I edit events not triggering although I am triggering events. Events triggers when I add another circle or image. Could you plz tell me, how after edit changes can be applied to stage.
Anton Lavrenov
@lavrton
@ejyuen hey. I don’t really understand what are you doing. Why are you sending requiests to server?
Erica Yuen
@ejyuen
@lavrton sorry if it is unclear. Basically I have an event handler for whenever user finishes drawing a stroke - based off of this https://konvajs.org/docs/sandbox/Free_Drawing.html. In event handler (onmouseup), I'm making an ajax call to send some data (mostly the line point data) about the state of the canvas to the back end (a Flask server) for some machine learning processing. The backend does some processing on the data and returns some additional outputs to the front end in response (images in the form of base 64 byte data, takes about 0.6 seconds) to display on the canvas. However, I have found that if I call the event handler on mouse up too many times back to back by drawing too many lines too quickly, the ajax calls inside are not being called, and the data that models the state of the canvas in the back end is not being properly updated and does not match the state of the canvas in the front end. My question is: do you have any suggestions as to how I can make sure the back end representation of the canvas matches the front end and make sure all of my ajax calls are properly triggered by the event handler? My initial thought is trying to use vue konva or react konva, but then that would be a lot more additional work.
i need to send the info to a server because to process the data to generate my desired outputs, I'm using a bunch of Python scripts that need to be done in Python and not javascript.
Anton Lavrenov
@lavrton

the ajax calls inside are not being called

How did find it?

Mouseup should fire every time.
But I think a browser may prevent too many network requests.
Like hold them, until first requests are not resolved.
nvthuong1996
@nvthuong1996
hello. i have a question. how to zooming stage relative to center container ?
meenakshi1985
@meenakshi1985
HI
how i use image drag & drop in mouseup & mouse down event
meenakshi1985
@meenakshi1985

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
<meta charset="utf-8" />
<title>Building Block</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
.konvajs-content{
position: relative;
width: 1260px;
height: 492px;
max-width: 1260px;
max-height: 492px;
}
#container {
background-color: rgba(0, 0, 0, 0.1);
background-image: url(bg.jpg);
position: absolute;
max-width: 1280px;
max-height: 490px;
border: 15px solid green;
/ background-size: 100% 100VH;
background-repeat: no-repeat;
width: 30%;
/
}

p {
margin: 4px;
}
canvas{
max-width: 1260px !important;
max-height: 492px !important;
}

#drag-items img {
height: 100px;
}
#drag-items {
background-color: black;
max-width: 1280px;
height: 110px;
max-height: 110px;
overflow-y: auto;
}
</style>
</head>

<body>
<div>
<div id="drag-items">
<img src="legolike_bl1.png" draggable="true" />
<img src="legolike_bl2.png" draggable="true" />
<img src="legolike_bl3.png" draggable="true" />
<img src="legolike_bl4.png" draggable="true" />
<!-- <img src="legolike_bs1.png" draggable="true" /> -->
<img src="legolike_car.png" draggable="true" />
<img src="legolike_fl1.png" draggable="true" />
<img src="legolike_li1.png" draggable="true" />
<img src="legolike_mn1.png" draggable="true" />
<img src="legolike_or1.png" draggable="true" />
<img src="legolike_or2.png" draggable="true" />
<img src="legolike_or3.png" draggable="true" />
<img src="legolike_or4.png" draggable="true" />
<img src="legolike_tr1.png" draggable="true" />
<img src="legolike_tr3.png" draggable="true" />
<img src="legolike_wh.png" draggable="true" />

</div>
<div id="container"></div>
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);


// what is url of dragging element?
var itemURL = '';
document
.getElementById('drag-items')
.addEventListener('dragstart', function (e) {
itemURL = e.target.src;
});

var con = stage.container();
con.addEventListener('dragover', function (e) {
e.preventDefault(); // !important
});
con.addEventListener('drop', function (e) {
e.preventDefault();
// now we need to find pointer position
// we can't use stage.getPointerPosition() here, because that event
// is not registered by Konva.Stage
// we can register it manually:
stage.setPointersPositions(e);

Konva.Image.fromURL(itemURL, function (image) {
layer.add(image);

image.position(stage.getPointerPosition());
image.draggable(true);


layer.draw();
});
});
</script>
</body>
</html>

in this code how i am using mouseup and mousedown event
please i need urgent support
Erica Yuen
@ejyuen
ohh ok thanks @lavrton i'll look into that! I know ajax calls aren't being fired everytime because I'm putting breakpoints / print statements in the backend functions should be called and they aren't happening. I thought the bottle neck was the event handler. but it may very well be the speed of the network requests.
meenakshi1985
@meenakshi1985
@lavrton now how to drooped image clickable means when i drop image and one more image drag and its overlap or if i want to click on back image , back image move to Top
MuhammadUsman390-angular
@MuhammadUsman390-angular
@lavrton How can we remove transformer on click of a node?
MuhammadUsman390-angular
@MuhammadUsman390-angular
@lavrton Transformer should also be a property like draggable so that we can easily set it to true or false.
MuhammadUsman390-angular
@MuhammadUsman390-angular
@lavrton On child node click, Parent node is also clicking. How can I set only child node to click?
meenakshi1985
@meenakshi1985
every node clickable
Anton Lavrenov
@lavrton
@MuhammadUsman390-angular listen click event and remove transformer inside it.
Bence Bálint
@kraxor
Anton, if I have a private question, where may I ask it? (not selling or offering anything, really, it's a personal thing)
@lavrton I guess I'm just too old for Twitter lol
William R Marchand
@william16_gitlab
I love KonvaJS
AYAZ AHMED KHAN
@RajAyaz
@lavrton Hi bro can you please tell me that how i add Red cross on layer for removing purpose like in this picture
aasds.png
Anton Lavrenov
@lavrton
Like any another shape.
Suren
@Suren65598339_twitter
Hi @lavrton, https://konvajs.org/docs/sandbox/Free_Drawing.html,
I see this example can you please help me ? How I can detect if all red lines erased ? And how I can detect line on another line after mouseup on brush ?
matthiaswehnert
@mwehnert
Hey @lavrton, great library! Great documentation.
Is there a way to recognize, if the transformer is used for rotating or resizing? Like a transformType on the transform(Start/End) events? Thanks in advance :)
1 reply
MuhammadUsman390-angular
@MuhammadUsman390-angular
@lavrton How can we add transformer to a custom shape?
1 reply
Ervan
@ervansanjaya
Hi guys, thanks for this beautiful plugin really. I want to ask on how to add touch event like pinch on mobile to Transformer so user can scale the transformer size using touch event?
3 replies
Vinay M
@rmdort
Just wanted to share Konva Grid. A virtualised grid built using react-konva
https://github.com/rmdort/konva-grid
Am quite new to konva, So if you have any feedback, do let me know
AditMeh
@AditMeh
I'm working with vue-konva, and I found out that all existing functionality in pure JS konva exists within my vue functions as long as I reference the layers/stage like this.$refs.<custom ref name>.getNode().<function>. What is the drawbacks of programming like this for initializing shapes versus the <v-shape> methods?
MuhammadUsman390-angular
@MuhammadUsman390-angular
@lavrton When I set width to canvas, nodes draggable are not working. Kindly, reply me how Can I set width to canvas so that nodes draggable will not disturb.
Anton Lavrenov
@lavrton

@AditMeh

What is the drawbacks of programming like this for initializing shapes versus the <v-shape> methods?

It is just not a “vue way”. But it will work just fine.

@MuhammadUsman390-angular

When I set width to canvas, nodes draggable are not working. Kindly, reply me how Can I set width to canvas so that nodes draggable will not disturb.

How do you set width? Width and draggable shouldn’t affect each other.

Rohith
@RohithM191

HI this my code i need to draw a 2d rectangle box using ReactJs and write a text inside it

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Group } from 'react-konva';

class App extends Component {

componentDidMount(){

<canvas id="mp" width="{250}" height="{60}" style="{{border:" '2px="" solid="" #000'}}="">

</canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

render() {
return (

<div>

<canvas ref="myCanvas"/>

<input type="submit" defaultvalue="Submit"/> <input type="reset"/>

</div>
)
}
}

export default App