In KineticJS, I would like to add a shape to a layer, and only redraw the most recently added shape, rather than all shapes in that layer. Is this possible? Or maybe some workaroud?
(.draw() function redraws all the child nodes on the layer)
More details on my situation:
I have a layer on which I want to draw a line which traces the movement of an shape across the screen during animation.
//create my shapes first
var myShape = new Kinetic.Circle({config});
//myShape gets its own layer, shapeLayer
var traceLine= new Kinetic.Line({x: myShape.getX() , y: myShape.getY()});
//traceLine gets its own layer, traceLayer
During animation I execute this code to update and redraw the line:
//during animation loop
var points = traceLine.getPoints();
points.push({x: myShape.getX() , y: myShape.getY()});
traceLine.setPoints(points); // this is currently the most efficient method I can think of
traceLayer.draw(); // redraw the line
shapeLayer.draw(); // the shape gets redrawn as well
This works well for a short while, but as time goes on I am getting a large array of points and the time to redraw the line is getting longer.
What I would like to do is draw a new line onto the layer during each loop of the animation, making it segmented. Like so:
var traceLine= new Kinetic.Line({x: myShape.getX() , y: myShape.getY(), x: myShape.getX()+1, y: myShape.getY()+1}); // draw as a point
traceLayer.add(traceLine);
traceLayer.draw(); //this slows it down as all lines get redrawn.
But the .draw() function redraws all the child nodes on the layer, which is not any more efficient or faster.
Sorry I didn't put up a jsfiddle, cause my code is very long, but if you need more details just let me know.
This question was related to the idea of not wanting to erase any previous objects on the screen, but not wanting to redraw any of them, basically to just draw one new item and show the layer. I solved this by just drawing directly onto the layer.
var traceLayerDraw = traceLayer.getCanvas();
var context = traceLayerDraw.getContext('2d');
context.beginPath();
context.moveTo(xBefore, yBefore);
context.lineTo(newX, newY);
context.stroke();
So I just took the layer and drew onto it using before and after values of the object I want to draw in a new location.
I did have to also set the layer to 'clearBeforDraw: false' as an attribute of the layer.
Related
When preforming a cut action on a polygon with a polyline, some of the returned geometries are grouped while others are not?
I have a simple program where the user can create a polygon with a SketchViewModel. Then the user creates a polyline with a SketchViewModel. I then take the geometry from each sketch and preform a cut from the geometryEngine. I get an array of geometries from the cut and add them to the layer while removing the original polygon and polyline. I would expect to get each subdivided piece individually but for some reason some get grouped together as one geometry even if they're not connected.
//polylineLayer and polygonLayer are graphiclayers
//submit is a html button to call the execution
submit.addEventListener("click", function() {
//subDivisions is an Geometry[] for the produced geometries
//ex. one line through a circle polygon would produce
// two geometries of each half. (this works)
// anything more complicated starts having grouping issues
// (see pictures)
var subDivisions =
geometryEngine.cut(polygonLayer.graphics.getItemAt(0).geometry,
polylineLayer.graphics.getItemAt(0).geometry);
polygonLayer.removeAll();
polylineLayer.removeAll();
//show the number of subdivisions
alert("size: " + subDivisions.length);
// add created geometries to the graphiclayer
for (var i = 0; i < subDivisions.length; i++){
tempGraphic = new Graphic ({
geometry: subDivisions[i]
});
polygonLayer.graphics.add(tempGraphic,i);
}
});
(sorry for the links to photos I don't have 10 reputation to post photos and this is a very visual project/issue)
Open screen:
https://ibb.co/WDcgmSn
Draw first polygon:
https://ibb.co/wd6CDbV
Draw polyline to cut polygon:
https://ibb.co/BG32863
Expected subdivisions - 10 Actual - 7:
https://ibb.co/0VMsHGg
Some are split into individual polygons:
https://ibb.co/SKXCJR8
Others are not:
https://ibb.co/7WqNB9q
All broken up pieces:
https://ibb.co/Pr0smrw
Wish I could comment instead of just answer but hard to say with out code.
Basically you are getting multipart polygons, you need to break those up.
Use a split in your array to break up the multi-part polygons split("]],[[")
Simplify Polygons using a geometry service would be worth a shot too. (before and after cutting)
https://developers.arcgis.com/rest/services-reference/geometry-service.htm
I'm new to PixiJS and I'm trying something simple like a painting application.
I'm having difficulty trying to capture a collection of shapes as a single grouping. I'm not interested in working code for this as I'd like to figure that out on my own; I'm simply interested in knowing whether I'm on the right track or if I need to explore some other PixiJS concepts to get what I need.
I have one canvas in which I can drag shapes such as rectangles, ellipse, and lines. These "strokes" are being stored as individual Graphics objects, for instance:
var shape = new PIXI.Graphics();
shape.position.set(...);
...
shape.lineStyle(...)
.beginFill(...)
.drawRect(...)
.endFill();
...
stage.addChild(shape);
...
renderer.render(stage);
I'm also holding onto these shapes in an array:
shapes.push(shape);
Now that I have these displayed as well as have the order of the strokes available, I'd like to be able to capture them somehow. Imagine maybe taking the drawing and saving it, or perhaps using it as a thumbnail in a gallery, or simply just storing it on the back-end in a database, preferably keeping all the raw strokes so that they can be scaled up or down as desired.
For now, I'm simply trying to take this collection of strokes and display them again by holding them, clearing the graphics from my canvas, and then plopping down what I have held.
Looking at this example, I've been able to get a texture that I can reliably reproduce wherever I click with the mouse:
http://jsfiddle.net/gzh14bcn/
This means I've been able to take the first part that creates the texture object, and I tweaked the second part to create and display the sprites when I click the mouse.
When I try to replace this example code with my own code to create the texture itself, I can't get that part to work.
So this example snippet works fine when I try to create a sprite from it:
var texture = new PIXI.RenderTexture(renderer, 16, 16);
var graphics = new PIXI.Graphics();
graphics.beginFill(0x44FFFF);
graphics.drawCircle(8, 8, 8);
graphics.endFill();
texture.render(graphics);
FYI to create sprites:
var sprite = new PIXI.Sprite(texture);
sprite.position.set(xPos, yPos);
stage.addChild(sprite);
Since I have my shapes in the shapes array or on the stage, what is the preferred way I proceed to capture this as a single grouping from which I can create one or more sprites?
So basicaly you've got how to make some PIXI.Graphics shape
var pixiRect = new PIXI.Graphics();
pixiRect.lineStyle(..);
pixiRect.beginFill(..);
pixiRect.drawRect(..);
pixiRect.endFill(..);
(You can draw as many rects/circles/shapes as you want into one PIXI.Graphics)
But to convert it to texture you must tell renderer to create it
var texture = renderer.generateTexture(pixiRect);
Then you can easily create PIXI.Sprite from this texture
var spr = new PIXI.Sprite(texture);
And the last thing is to add it to your stage or array, but you can also make some empty PIXI.Container and then addChild to that and you've got your array
option - add sprite (created from graphics) to stage
stage.addChild(spr);
option - push it to your array
shapes.push(spr);
option - if you have var shapes = new PIXI.Container(); you can make a container for your sprites
shapes.addChild(spr);
Working example : https://jsfiddle.net/co7Lrbq1/3/
EDIT:
to position your canvas above you have to addChild it later, it means first addChild has zIndex = 0 and every addChild adds a layer on top of last
I figured it out. My stage is a container:
var stage = new PIXI.Container();
var canvas = new PIXI.Graphics();
canvas.lineStyle(4, 0xffffff, 1);
canvas.beginFill(0xffffff);
canvas.drawRect(canvasStartX, canvasStartY, 500, 600);
canvas.endFill();
stage.addChild(canvas);
I changed this to the following:
var canvas = new PIXI.Container();
var canvasRect = new PIXI.Graphics();
canvasRect.lineStyle(4, 0xffffff, 1);
canvasRect.beginFill(0xffffff);
canvasRect.drawRect(canvasStartX, canvasStartY, 500, 600);
canvasRect.endFill();
canvas.addChild(canvasRect);
stage.addChild(canvas);
Then, I replaced stage with canvas where appropriate and canvas with canvasRect where appropriate.
Finally, I got my texture with:
var texture = canvas.generateTexture(renderer);
At the moment, this grabbed the entire width/height of the stage, but I think I just need to tweak a bit on how I create my canvas above and I should be fine.
EDIT I now get the right layer from map, so the question now sums up to knowing if a layer A which contains curves, intersectects layer B which contains a surface which can be a circle or a polygon that was just drawn. I tried turf library's turf.intersect but I get "cyclic object reference" from that library.
And I am already looping through the curves seperaterly, to the question is now "Does a curve intersect with a shape.
Also tried: ol.extent.getIntersection(...) but it work only with extents wich are rectangle and therefore give very imprecise results.
I have a map and a layer that is built and added through
var layer = new ol.layer.Vector{(...)};
map.addLayer(layer);
And I add a layer through interaction, as shown in this example: http://openlayers.org/en/v3.6.0/examples/draw-features.html?q=draw
(We use the Circle selection.)
I would like to get he intersection between the lines in the fist layer and the shape (surface) drawn through interaction.
So far, I know that I can catch the event:
var draw = new ol.interaction.Draw{(...)};
draw.on('drawend', function(event){(...)};
But so far I have no clue on what information I can get from the event and how to match it with the layer.
I am very new to Easel and HTML5 itself. I am trying to draw a line using on a canvas using EaselJS. The X- Co ordinate is fixedd to 100 and the Y-Co ordinate is got from a array list. The code that i have written is given below. Could please someone let me know where i am going wrong?
function myFunction(attachPoint)
{
//Code for canvas creation is written here.[Not shown];
//created a stage.
stage = new createjs.Stage(canvas.domElement());
//3. create some shapes.MagnitudeLessThanTwo is the array where we get the YAxis Coordinates from
alert("The lenght before function is"+MagnitudeLessThanTwo.length);
myShape = new drawLineGraph(MagnitudeLessThanTwo);
//4. finally add that shape to the stage
stage.addChild(myShape);
//5. set up the ticker
if (!createjs.Ticker.hasEventListener("tick")) {
createjs.Ticker.addEventListener("tick", ourTickFunction);
};
};
function drawLineGraph(dataList)
{
this.index=0;//To keep the track of the index of the array from which we get the Y Axis.
var graphics = new createjs.Graphics();
graphics.setStrokeStyle(1);
graphics.beginStroke("white");
graphics.moveTo(50,(dataList[this.index].magnitude)*100);
graphics.lineTo(50,(dataList[(this.index)++].magnitude)*100);
createjs.Shape.call(this,graphics);
this.tick = function() {
graphics.moveTo(100,(dataList[this.index].magnitude)*100);
graphics.lineTo(100,(dataList[(this.index)++].magnitude)*100);
stage.addChild(graphics);
};
};
drawLineGraph.prototype = new createjs.Shape(); //set prototype
drawLineGraph.prototype.constructor = drawLineGraph; //fix constructor pointer
I am getting the following Error.
"Object [object Object] has no method 'isVisible'"- This is inside the EaselJS Library.
There are a few issues here. The error you are seeing is because you are adding the Graphics to the Stage, and not the Shape.
The other issue is how the Graphics are modified in the tick:
this.tick = function() {
graphics.moveTo(100,(dataList[this.index].magnitude)*100);
graphics.lineTo(100,(dataList[(this.index)++].magnitude)*100);
stage.addChild(graphics);
};
You only need to add your Shape to the stage one time, and it will redraw your graphics each time every time the Stage is updated. Your tick call is adding new Graphics instructions every frame, so it will stack all those calls up, and eventually be really slow.
Make sure you clear your Graphics before you draw new things to it, unless you are trying to create an additive effect (and if you are, perhaps look into caching/updateCache to make it performant). Check out the "curveTo" and "updateCache" examples in the GitHub repository for usage.
Once you have added the Shape to the stage instead of the Graphics, feel free to post some follow up questions, and I can try and assist further.
Cheers :)
OK, I admit I tried to be clever: I thought if I overrode Shape's drawFunc property I could simply draw whatever inside a rectangle and still use KineticJS's click detection. Here's my attempt:
var shape = new Kinetic.Shape({
drawFunc: function(context) {
var id = 26; // Id of a region inside composite image.
context.beginPath();
context.rect(0, 0, w, h);
context.closePath();
this.fill(context);
this.stroke(context);
context.drawImage(copyCanvas, (id % 8) * w, flr(id / 8) * h,
w, h, 0, 0, w / 2, h / 2);
},
draggable: true
});
So, the idea was to draw a rectangle, and use drawImage() to draw something on top of the rectangle (like a texture, except it changes from time to time because copyCanvas itself changes). All the meanwhile, I expected event handling (drag-n-drop, in particular) to still 'just work'. Well, here's what happens: the part of the rectangle not covered by my drawImage() correctly detects clicks. However, the one fourth of the rectangle that is covered by the image refuses to respond to clicks! Now, my question is why? I dug into the KineticJS code, and looked to me that click detection simply means drawing to a buffer and seeing if a given x, y point has non-zero alpha. I can't see how this could be affected by my drawing an image on top of my rectangle.
Any ideas what's going on?
OK, so I went ahead and looked at the source code. Here's the definitive answer:
KineticJS assigns a random and unique RGB color to each shape that's created using a global map from RGB colors to shape objects. The draw() function of the shape is called twice: once with the 'real' canvas, and once with a 'buffer' canvas used for hit detection. When using the 'buffer' canvas, KineticJS switches the stroke and fill colors to the unique RGB color of the given shape. The same 'buffer' canvas is used for all shapes on a layer. Thus hit detection simply becomes reading the RGB value of a given point and looking up the corresponding shape in the global map. Now, in my example I drew an image in a way that circumvented KineticJS's juggling of colors used for hit detection. Thus, when I clicked on the image area, KineticJS saw some unknown RGB color on the buffer canvas with no known shape assigned to it.
The solution is not to draw the image for the 'buffer' (or 'hit detection') phase: a simple rectangle will do. In case you're wondering, here's the correct code for the drawFunc:
var width = 200;
var height = 100;
var myShape = new Kinetic.Shape({
drawFunc: function(context) {
if (layer.bufferCanvas.context == context) {
context.beginPath();
context.rect(0, 0, width, height);
context.closePath();
this.fill(context);
this.stroke(context);
} else {
context.drawImage(someCanvasWithAnythingOnIt, 0, 0, width, height,
0, 0, width, height);
}
}});
Can I collect my own reward?
I think your problem lies in the order. There is a depth associated with each object that you draw and the default ordering is like a stack, last drawn is on top.
Now that you have modified the code, making 2 draws inside the shape draw function, I still think the ordering is preserved and hence, the object is not able to detect the input. Try changing the order, i.e. draw image first and then the rectangle and see if the problem is solved.
Else, share a jsFiddle for an example.