Questions tagged [konvajs]

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications.

Homepage: http://konvajs.github.io/

An object oriented HTML5 Canvas JavaScript framework with a well-documented API, along with tutorials and labs to cover most of the basic needs.

Konva supports node nesting, layering, caching, serialization, deserialization, animations, transitions, filters, custom shapes, configurable drag & drop, and more.

Multiple Canvases are used to create a high performance animation and event detection system. Konva also utilizes a virtual node system which allows developers to create hierarchies which resemble familiar HTML DOM structures and use familiar selectors (eg. '#foo') to manipulate nodes.

Konva allows you to draw shapes onto the stage, add event listeners to them, group them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

986 questions
-1
votes
1 answer

Konvajs and similar design pattern(s) in TypeScript

I hva been examining the source code of konvajs (https://github.com/konvajs/konva) and i am fascinated by the design pattern, eg. src/shape.js (https://github.com/konvajs/konva/blob/master/src/Shape.js): Konva.Shape = function(config) { …
-1
votes
1 answer

Mixed / complex text node inc FontAwsome for buttons and tags

I needed to make buttons and labels with a mixture of Arial and Fontawsome. The HTML 5 canvas is relatively crude in terms of any mixing of fonts, and though Konvajs has the convenience Label shape it does not accommodate Shapes other than a single…
Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
-1
votes
2 answers

Canvas perpendicular points to line

I'm using Konva library to draw some stuff on HTML5 canvas. I have given 2 points from user interaction by mouse click: var A={x:'',y:''}; var B={x:'',y:''}; 1) How to draw line line this? My question is: 1) How to get perpendicular lines on each…
Norbert Pisz
  • 3,392
  • 3
  • 27
  • 42
-1
votes
1 answer

How drawing on mobile use [Konvajs]

I see this demo https://konvajs.github.io/docs/sandbox/Free_Drawing.html I have been able to draw on successful web desktop, but can not draw on mobile Please help me
-1
votes
1 answer

how to delete this json data before it loaded,

this is a html canvas using konva library. var json = 'http://pastebin.com/Qv1HAUmY' this is my json data, then before i get the value of "json" all item like this are deleted { "attrs": { "stroke": "#666", …
mmativ
  • 1,414
  • 14
  • 25
-1
votes
1 answer

why is the upward trip animation fast?

I was experimenting with a 1-d ball bounce problem in KonvaJS, with zero loss. Hence it should appear that the ball is simply oscillating. The equations for this are available here. (Click here for reading instructions). The full code is available…
deostroll
  • 11,661
  • 21
  • 90
  • 161
-1
votes
2 answers

Complex image manipulation using HTML5/JS

Is it possible to easily replicate the "put your face in this photo and share it with your friends" functionality (as seen on many sites, eg. this one) using only HTML5 and/or JavaScript? Every other site I've seen doing this uses Flash, but it…
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
-1
votes
1 answer

Canvas game separation of the triangle

http://joxi.ru/NDrlaKnT01RamP The goal is to ensure that the user can visually divided into equal parts triangle. The resulting figure should be equal in size with an accuracy of 10%. How to implement it on the canvas? Can someone tell?
-2
votes
2 answers

How do I fill the transparent area inside an image using javascript?

I added a white border to a PNG image with Konvajs konvajs link I want to turn the transparent area inside the white border to white. So I want to paint the windows of the car white. (Red areas are transparent.) Expected result:
-2
votes
1 answer

konva, container with vuejs

I got the problem, that VueJS refuse me a problem when I use the . I have to use that element, because otherwise elements are not overlapping themselfes. Pics: ide console
WilczekCK
  • 1
  • 1
-2
votes
1 answer

KonvaJS Fill Rect with two colors?

It is possible? If yes how? One example please. var example = new Konva.Rect({ x: 10, y: 10, width: 500, height: 20, fillLinearGradientStartPoint: [0, 0], fillLinearGradientEndPoint: [400, 0], …
Pedro
  • 1
  • 2
1 2 3
65
66