I am trying to delete canvas. For that I have used below 2lines of code
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);**
This is just clearling the canvas, but on click on that canvas its reshowing same data.
The canvas is not deleted, but temporary hidden on clear.
Konva is a scene graph for your canvas. The scene has nodes, such as Layer, Group, Shape.
You don't need to clear the canvas element manually. You just need to destroy all nodes from the scene. Like this:
layer.destroyChildren();
layer.draw();
I tried this too.Thats also not working.
I tried below code and thats working fine.
**var stage_main = this.$refs.stage.getStage();
stage_main.clear();
Object.keys(this.canvasElements).forEach((key) => {
this.canvasElements[key]= [];
});**
I also need to clear canvaselement object along with stage clear
Related
I have three columns, two with divs and the central one with an svg. I made a method that calculate the top() of each paragraph inside the divs to get the position and then draw an arrow in the svg. The problem is that when I use that method the first time I open my component, I get all zeroes, probably because the paragraph aren't really drawn (they have no coordinates) yet. I tried in mounted(), which should be the right place to do that. I use it also in updated() in case I reload my json with new data.
Am I missing something trivial?
The code I use to get the coordinates is like this:
drawLine(index1, index2) {
//var plist1 = this.$refs['p_list1'];
//var plist2 = this.$refs['p_list2'];
var plist1 = document.getElementsByClassName('p_list1');
var plist2 = document.getElementsByClassName('p_list2');
if (plist1.length == 0 && plist2.length == 0) return;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'line');
//...
//const start = this.$refs['startpos'].getBoundingClientRect().top;
const start = document.getElementById('startpos').getBoundingClientRect().top;
const r1 = plist1[index1].getBoundingClientRect();
const r2 = plist2[index2].getBoundingClientRect();
index1 and index2 comes from a loop where I get which paragraph I have to connect with an arrow (also where the nextThick is)
Here is a simple example of the issue:
https://codesandbox.io/s/bootstrap-vue-test-bcozc
Note: it's badly shown, but if you press "DO" and then switch tab, you'll see that the arrow aren't correct. If you switch tab and then press DO, it will work.
Put your calculation methods in a $nextTick function to allow parents and children to fully render.
If that does not work, as a debug step, try using a setTimeout method to delay the calculation.
After understanding that the problem was linked to how tabs are built, I tried making that specific tab lazy and it worked.
<b-tab lazy ...
I don't know how tabs are normally built, but I suppose the dom is put together without having a real coordinate system and when it's made visible, I don't have any event to read to update the svg.
My very first question to stackoverflow, so please be kind.
I have two shapes on a createjs stage. The first one background covers the whole stage and has a listener on click defined. I want to put another shape on this one and this one should not trigger the click-listener defined on the background.
In the following example a click on the red circle triggers the listener of background.
var stage = new createjs.Stage('c');
var rect = new createjs.Shape();
rect.graphics.beginFill('#0000ff').drawRect(0, 0, 50, 50);
var background = new createjs.Shape();
background.graphics.beginFill('#000000').drawRect(0, 0, 500, 500);
background.alpha = 0.7;
background.on('click', function () {
circle.visible = !circle.visible;
stage.update();
});
var circle = new createjs.Shape();
circle.graphics.beginFill('#ff0000').drawCircle(225, 225, 50);
// circle.on('click', function () {});
stage.addChild(rect);
stage.addChild(background);
stage.addChild(circle);
stage.update();
https://codepen.io/anon/pen/rKmPOY
I found, that if I put an empty click listener on the circle, I have what I want, but this feels awkward.
What is the right approach here? This shouldn't be a bubbling issue since background and circle are siblings. Or am I getting this completly wrong?
If something doesn't have a click listener, it will not be evaluated when the mouse is clicked. This is definitely a desired behaviour (it is much more annoying to have things you don't want blocking clicks).
Your workaround adding an empty listener is fine, and pretty typical.
The only other option I can think of is to check what is under the mouse on click, and filter it manually, which is way more work.
Cheers,
I have a Image on a stage and I'm drawing over it and erasing it. Using the following method
http://jsfiddle.net/lannymcnie/ZNYPD/
Now i want to take a clone of the user drawings but its not working. I tried
var drawingAreaClone = drawingArea.clone(true);
but its not working .
Is there a way to clone it. kindly Help
The demo you posted doesn't clear the stage, but instead clears the graphics each frame. If you clone the shape, it will have no instructions.
#Catalin's answer is right if you just need a visual -- but another option is to use the Graphics store() method instead of clearing the graphics: http://createjs.com/docs/easeljs/classes/Graphics.html#method_store
Essentially this method just sets an internal pointer to where the graphics draw from. By storing after each draw, only future draw calls are made. This will have the same application as the demo you posted, only you can call unstore() later to reset the Graphics to draw from the beginning. If you clone it this way, it should work.
var erase = document.getElementById("toggle").checked;
wrapper.updateCache(erase?"destination-out":"source-over");
//drawing.graphics.clear();
drawing.graphics.store(); // Don't draw anything before this point
// Later
var newGraphics = drawing.graphics.clone();
newGraphics.unstore(); // Might be redundant
var shape = new Shape(newGraphics);
Note that cloning Graphics doesn't recreate the entire graphics tree, and simply clones the array that stores the instructions. Modifying the individual instructions after the fact would impact any clones of that Graphics object.
Hope that helps.
If the drawn line shape is a child of the drawingAreaClone then the clone should work properly.
However, if for some reason you can't make it work with that, you can take a snapshot of the canvas and save it as an img type varaible like this:
var snapshot = new Image();
snapshot.src = canvas.toDataURL();
Also, if you don't want to snapshot the whole canvas, after you saved the initial image, you can limit the drawing area to a rectangle with these extra instructions:
var ctx = canvas.getContext('2d');
canvas.width = snapshot.width;
canvas.height = snapshot.height;
ctx.drawImage(snapshot, rectangle.x, rectangle.y, rectangle.width, rectangle.height, 0, 0, rectangle.width, rectangle.height);
snapshot.src = canvas.toDataURL();
I'm trying to create functionality very similar to most websites these days.
The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.
We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.
Here is a pen.
http://codepen.io/LAzzam2/pen/XJrwbo
I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.
scrollObject.sync.on("update", function (event) {
console.log('update');
test(event);
});
here is the function positioning the backgrounds.
function test(data){
var scroller = document.getElementsByClassName('famous-group');
styles = window.getComputedStyle(scroller[0], null);
tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
var distanceTop = -(parseInt(tr));
var sections = document.getElementsByClassName('section');
sections[3].style.backgroundPosition="50% "+distanceTop+"px";
sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};
Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.
That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?
**There are known issues, only works in -webkit browsers as of now
I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:
function test(data){
var scrollViewPosition = scrollObject.getAbsolutePosition();
var newBackgroundPosition = // Calculate the new background position
var newForegroundPosition = // Calculate the new foreground position
var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
I just started using Leaflet and Marker Clusterer to organize the markers.
Problem #1: When an unclustered marker is clicked, no popup appears.
Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!
If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!
Initializing markerclusterer
markers = new L.MarkerClusterGroup();
map.addLayer(markers);
All markers added to markercluster markers
A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)
ListingMarkerView = Backbone.View.extend({
template: _.template( $('#tpl_ListingMarkerView').html() ),
render: function() {
// Create marker
var content = this.template( this.model.toJSON() );
var marker = new L.marker(
[this.model.get('lat'), this.model.get('lng')],
{content: content});
marker.bindPopup(content);
// Add to markerclusterer
markers.addLayer(marker);
}
});
Without markerclusterer
If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.
Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!
From what little I know of the cluster marker group, you should do this:
var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
// Current marker is ev.layer
// Do stuff
});
To add an event handler to the cluster layer instead, do this:
markerGroup.on('clusterclick', function(ev) {
// Current cluster is ev.layer
// Child markers for this cluster are a.layer.getAllChildMarkers()
// Do stuff
});
Oh, and read the github README carefully, it's all in there...
Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.