kineticjs

Erasing Parts of an Image on HTML5 Canvas?

由 怎甘沉沦 提交于 2019-12-11 02:59:01
问题 I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. On a blank canvas I dram an image as shown in the figure below. Now I want to create a circle Shape which can be used to erase parts of the image. The red circle in the image is the eraser. How can I erase parts of an Image on HTML5 Canvas? 回答1: You can use Compositing to "erase" pixels. Specifically you use destination-out compositing. KineticJS does not support compositing, but you still have a couple of options:

In kinetic.js Issue with rotating a kinetic.group

由 ↘锁芯ラ 提交于 2019-12-11 02:54:39
问题 I am using kinetic js. I am adding image, lines, etc to a kinetic.group and trying to rotate the group and it is getting rotated correctly. But after rotating the group, if I try to draw a line it is not correctly drawing on the present mouse position. It is drawing as it was before rotating. The problem may be that if I rotate the group, the stage co-ordinates are not getting rotated it seems. What should I do to prevent this? reference code--- var rootGroup = new Kinetic.Group({ x: stage

How do I 'forward' (mouse) events to a node/shape on a lower Zindex in kineticjs

由 我的梦境 提交于 2019-12-11 02:36:57
问题 I'm working with kineticjs where I have a stage with one layer in it. This layer has multiple shapes on it who react on a mouseover event (they show a tooltip) besides these shapes I also have some text nodes on a higher ZIndex (so they are above the shapes). This all works fine with one exception, when a text is on top of a shape, the shape doesn't show a tooltip I assume it's because the textnode uses the event, rather than 'forward' it, eventhough I haven't bound anything to the text node.

Konva Propagate events between layers

由 孤者浪人 提交于 2019-12-11 02:36:27
问题 I have a transparent drag layer on top of a shape layer. Works great to make interaction distinct so I can toggle what dragging does (between scrolling the view or editing the shape positions). However, unless I turn off drag mode (by hiding the intervening transparent Rect), none of the other mouseover events fire on the shape layer beneath it. I need to propogate the non-drag mouse events to the layer below it. There are A LOT of shapes with mouse over events. Is there an easy way to

KineticJS - Moving 4000 tiles with Stage.draggable

由 大憨熊 提交于 2019-12-10 21:03:52
问题 (Sorry if this is a duplicate, but I don't think it is) Just so you know, I'm using Google Chrome 29.0.1547.66 m. I have a KineticJS Project going on at the moment which builds a tiled "staggered" map 40 x 100 tiles. The map takes about 500ms to render which is fine. All 4000 tiles have been put onto one layer . Once that has completed, I try to drag the stage but I am getting very poor performance as it tries to move all 4000 tiles at once . We are talking about 160ms of CPU time . I have

Working with Multiple Layers - KineticJS

由 跟風遠走 提交于 2019-12-10 20:43:45
问题 I'm using KineticJS 4.0.5 and I'm currently trying to draw the contents of several layers but only the last one added to stage is drawn... If I understood the documentation correctly this should be possible, otherwise why would we need a layer? I have three different layers: a background layer with just a Kinectic.Rect object; a elements layer with several types of shapes; and a top layer with elements I want to be always on top of everything. I populate those layers inside a draw function I

How to apply KineticJS filter ?

由 老子叫甜甜 提交于 2019-12-10 19:28:01
问题 I find the KineticJS filters documentation extremely frustrating and could not find examples online, especially considering brightness. The kinetic.filters docs link mention a Kinetic.Filters.Brighten(imageData) but there's no info on how to pass parameters to it or how to use it. All I need is a working example of an image on a layer on a stage, and two buttons - one to make the image brighter and one to make it darker. Can anyone please help me with that ? Thank you ! 回答1: Realy,

Why is Kinetic.Shape's drawFunc method called twice?

由 纵饮孤独 提交于 2019-12-10 17:43:28
问题 While trying to create a custom shape using KineticJS (v4.5.4) I noticed that the Kinetic.Shape class drawFunc method is called twice, one more time than what I was expecting given the code below (adapted from http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/). When I run the code below I can see that on my browser console "DEBUG" is printed twice, indicating that the method in question is called twice, why is that?? <!DOCTYPE HTML> <html> <head> <style>

KineticJS animation with JQuery

由 断了今生、忘了曾经 提交于 2019-12-10 14:54:51
问题 I am new in KineticJS and I am stacked. I want to use a simple animation with opacity but I found out that there is not so "simple" as it seems. I read the doc about animations with KineticJS (you won't say simple about this tutorial). What I want to know Is there a simple method to animate things with KineticJS like JQuery or JCanvaScript has? for example this.animate({ opacity:0, x: 50 }, 500); something like this? If there is not can we use KineticJS with JQuery to make animations simple?

Export KinteticJS drawing to SVG?

由 我的梦境 提交于 2019-12-10 10:54:07
问题 Is it possible to export Kinetic JS object to SVG? Or workaround is to convert Kintetic JS's canvas to SVG. EDIT: The best is to use fabricJS since it supports canvas to SVG rendering while working with fabric objects. I accepted Phrogz's answer since it also does conversion canvas to svg without using some other library for drawing on canvas. EDIT 2: OK, i messed up, Phrogz's library is wrapper around canvas element so you use it's methods to draw on canvas (I thought that it just 'listens'
订阅 kineticjs