in a map I want when the user clicks inside the map to be able to draw with his mouse a scheme. For example it clicks and then circles an area just by moving his mouse. The problem is that when he circles the area, continues to draw at the current mouse position.
In other words I want the user to click for start drawing and click again to stop it.
I am using addEventListener and removeEventListener
I am trying to remove the events from the map but it does not work.
Any ideas?
Code:
map.addEventListener('click', goInter, false);
function goInter() {
map.addEventListener('mousemove', move, false);
map.addEventListener('click', close, false);
var pointList = [];
var first_element;
var trig = 0;
function move(e) {
map.dragging.disable();
pointList[pointList.length] = new L.LatLng(e.latlng.lat, e.latlng.lng);
first_element = pointList[0];
//ama to valw den doulebei tipota!!
//document.getElementById("elements").innerHTML = pointList[ii++];
if (pointList.length > 400){
pointList = [];
}
var line = new L.Polyline(pointList, {
color: 'red',
weight: 2,
opacity: 0.5,
});
map.addLayer(line);
if (trig == 1){
map.preventDefault();
alert("den einai 1");
return false;
}
};
function close(){
//map.removeEventListener ('mousemove', move, false);
var last_points = [first_element, pointList[pointList.length-1]];
var last_connection = new L.Polyline(last_points, {
color: 'blue',
weight: 1,
opacity: 0.9
});
map.addLayer(last_connection);
trig = 1;
map.preventDefault();
//map.removeLayer(line);
//map.fitBounds(line.getBounds());
};
};
I have a progress -> i changed the two click events to -> mouseup and mousedown respectively. That gives me a better interaction. when the user releases the button it stops drawing. However if you press it again it draws. ALSO uncomment first line of close() function
Related
I'm trying to replicate a potter's wheel effect, where a user can click on a piece of the wheel, hold down the mouse, and a circle will be created with respect to the center of the wheel.
Like in this persons demo: https://balazsdavid987.github.io/Pottery-Wheel/
But what's happening for me can be seen here:
http://p2-paperjs-dpayne5-dpayne589733.codeanyapp.com:3000/coloring/
The relevant pieces of code are the following:
var tool = new paper.Tool();
//array to hold all curves drawn from mousedrags
var allPaths = [];
var currPath;
var rotationPath;
//wheel center point, #center of canvas
var wheelCenter = new paper.Point(350,350);
//create the potters wheel
var wheel = new paper.Path.Circle({
center: wheelCenter,
radius: 300,
strokeColor: 'black',
strokeWidth: 5
});
//hold down to create a continous curve with respect to wheelCenter
tool.onMouseDown = function(event) {
currPath = new paper.Path();
currPath.strokeColor = cp.history[cp.history.length-1];
currPath.strokeWidth = 10;
currPath.add(event.point);
}
//creates a curve from the last position to the new position of mouse
tool.onMouseDrag = function(event) {
currPath.add(currPath.rotate(4, wheelCenter));
}
//add the curve to allPaths, which then gets animated in onFrame
tool.onMouseUp = function(event) {
allPaths.push(currPath);
}
paper.view.onFrame = function(event) {
for (var i = 0; i < allPaths.length; i++) {
allPaths[i].rotate(4, wheelCenter);
}
//testPath.rotate(3, wheelCenter);
}
paper.view.draw();
I'm not understanding why the mouseDrag would make a circle way father out from where my mouse has clicked, and I've been stuck on this for awhile.
Any help would be greatly appreciated, thanks!
Apart from your technical difficulty with the onMouseDrag method, I think that you should change your approach to the problem.
The thing is that if you rely on mouse drag event (which is only triggered when the mouse move), you won't be able to paint on the wheel by keeping your mouse static (as shown in your reference demo).
So you would better keep track of the mouse position (by listening to a mouse move event), and draw on each frame, adding the last mouse position to the current path (only when drawing of course).
Better than a thousand words, here is a sketch demonstrating how this can be achieved.
// Create the wheel.
const wheel = new Path.Circle({
center: view.center,
radius: 300,
strokeColor: 'black',
strokeWidth: 3
});
// Create a group that will contain all the user drawn path.
// This will allow us to more easily rotate them together.
const paths = new Group();
// Init state variables.
let currentPath;
let drawing = false;
let lastMousePosition;
// On mouse down...
function onMouseDown(event) {
// ...start a new path.
currentPath = new Path({
segments: [event.point],
strokeColor: 'red',
strokeWidth: 2
});
// Add it to the paths group.
paths.addChild(currentPath);
// Mark state as drawing.
drawing = true;
}
// On mouse move...
function onMouseMove(event) {
// ...keep track of the mouse position, this will be used to add points to
// the current path on each frame.
lastMousePosition = event.point;
}
// On mouse up...
function onMouseUp(event) {
// ...improve performances by simplifying the path.
currentPath.simplify();
// Mark state as not drawing.
drawing = false;
}
// On each frame...
function onFrame(event) {
// ...rotate paths around the wheel center.
paths.rotate(4, wheel.position);
// If we are currently drawing...
if (drawing) {
// ...add the last mouse position to the current path.
currentPath.add(lastMousePosition);
}
}
I am taking a beginner class in coding and need help with an issue I'm coming across in a project that I am making...
function start() {
//Creates the jester image, describing text and the selectable key for them
var rect = new Rectangle(200, 120);
rect.setPosition(0, 0);
rect.setColor(Color.grey);
add(rect);
var jester = new WebImage("data:image/jpeg;base64,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");
jester.setSize(200, 120);
jester.setPosition(0, 0);
add(jester);
var txt = new Text("Describing text!", "15pt Arial");
txt.setPosition(230, 30);
txt.setColor(Color.blue);
add(txt);
//Creates the king image, describing text and the selectable key for them
var rect = new Rectangle(200, 120);
rect.setPosition(0, 120);
rect.setColor(Color.green);
add(rect);
var king = new WebImage("data:image/jpeg;base64,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");
king.setSize(200, 120);
king.setPosition(0, 120);
add(king);
var txt = new Text("Describing text!", "15pt Arial");
txt.setPosition(230, 140);
txt.setColor(Color.blue);
add(txt);
keyDownMethod(jesterSelect);
keyDownMethod(kingSelect);
}
function jesterSelect(e) {
if(e.keyCode == Keyboard.letter('J')){
removeAll();
var circle = new Circle(50);
circle.setPosition(100, 200);
circle.setColor(Color.blue);
add(circle);
}
}
function kingSelect(e) {
if(e.keyCode == Keyboard.letter('N')){
removeAll();
var circle = new Circle(50);
circle.setPosition(100, 200);
circle.setColor(Color.red);
add(circle);
}
}
Right now I have images displayed of a jester and a king and depending on what button you press you are directed to new "slide". As of now, the program only responds when I press the "k" key and doesn't respond and create the blue circle when I press the "j" key. I've determined that whatever is put last in the start function determines what actually works, but I want the user to be able to press any of the interactive keys and be displayed with a different outcome. I would appreciate any help since I've been stuck on this for a while now, thank you!
You need to capture the keydown event.
Add this to your init code:
window.addEventListener("keydown", keyHandler);
and modify this block for all of your key events:
function KeyHandler(e)
{
switch (e.keyCode)
{
case 32: // space
{
// dostuff
break;
}
case 37: // left arrow
{
// dostuff
break;
}
}
}
I'm using a camera and barcode markers. In order for my cannon to shoot I need to spawn a sphere when a clicked. I tried to get the marker position by using .getAttribute('position') but I'm getting disappointing results e.g. null and [object, object]. Is there a real way to to access the coordinates of a marker in AFrame? So far it creates a sphere but right in the camera because its unable to find the location of the marker.
Javascript
var sceneEl = document.querySelector('a-scene'); //select scene
var markerEl = document.querySelector('#cannonMarker');
// trigger event when button is pressed.
document.addEventListener("click", function (e) {
var pos = markerEl.getAttribute('position');
var Sphere = document.createElement('a-sphere');
Sphere.setAttribute('dynamic-body', {
shape: 'sphere',
mass: 4
});
Sphere.setAttribute('position', pos);
sceneEl.appendChild(Sphere);
console.log('Sphere coordinates:' + pos);
});
Provided the marker is being recognized and the references are correct
markerEl.getAttribute('position')
should return the current marker position.
If your script is in the <head> element, the marker may not yet exist when the code is executed.
It's a good idea to throw your code into an a-frame component:
HTML:
<a-scene ball-spawner></a-scene>
js:
AFRAME.registerComponent('ball-spawner', {
init: function() {
// your code here - the scene should be ready
}
})
I've made a slight modification to your code (working glitch here):
var sceneEl = document.querySelector('a-scene'); //select scene
var markerEl = document.querySelector('a-marker');
// trigger event when button is pressed.
sceneEl.addEventListener("click", function (e) {
if (markerEl.object3D.visible === false) {
return;
}
var pos = markerEl.getAttribute('position');
var Sphere = document.createElement('a-sphere');
Sphere.setAttribute('radius', 0.5)
Sphere.setAttribute('dynamic-body', {
shape: 'sphere',
mass: 4
});
Sphere.setAttribute('position', pos);
sceneEl.appendChild(Sphere);
});
}
When the marker gets out of vision, it's position is 'last remembered'. So it's the same place on the screen. That's why there's a return if the marker element is not visible.
It seems to be working as you want since the ball is falling out of a transparent box on the marker (the box is a nice way to be sure the marker is recognized):
On windows mousedown events works fine, and this code works perfectly and it is also adding "mousedown" event to a shape object.
var shape = new Object();
shape.mousedown(function(){
alert('tracker move 2');
this.paper.editor.action = "move";
});
Also when I inspect in Chrome I get the following values.
shape.events[0].name = "mouseDown";
shape.events.length = 1;
But on iPad instead of mousedown I need to add touchStart event. Please guide me how to add this event. I tried different way but all are saying eventListener is basically used for DOM objects. Help me to achieve similar inspect values.
Note : I'm working on Safari browser in iPad.
Here is my sample code:
VectorEditor.prototype.showTracker = function(shape){
var rot_offset = -14;
var box = shape.getBBox();
var tracker = this.draw.set();
tracker.shape = shape;
//define the origin to transform to
tracker.lastx = 0 //if zero then easier
tracker.lasty = 0 //if zero then easier
if (mobilesafari) {
var shapeTemp = this.markTracker(this.draw.ellipse(box.width/2, box.height/2, 7, 7).attr({
"stroke": "gray",
"stroke-opacity": 0.5,
"fill": "gray",
"fill-opacity": 0.15
}));
shapeTemp.addEventListener("touchstart", bind(function(event){
event.preventDefault();
alert('tracker move 2');
this.paper.editor.action = "move";
}, this) ,false);
alert(shapeTemp.events[0].name + " shapeTemp " + shapeTemp.events.length);
tracker.push(shapeTemp);
} else {
var shapeTemp = new Object();
shapeTemp.mousedown(function(){
alert('tracker move 2');
this.paper.editor.action = "move";
});
tracker.push(shapeTemp);
}
}
Using the Google Earth plugin, I want to be able to allow the user to select placemarks on the ground while the camera is moving, but am not sure how this is possible. It seems that when you call setAbstractView(), even with the flyToSpeed set to SPEED_TELEPORT, the Google Earth plugin ignores any mouse down events except for those to the GEGlobe.
Here's the code, altered slightly (from http://code.google.com/apis/ajax/playground/#draggable_placemark) to illustrate my issue:
var ge;
var placemark;
var dragInfo = null;
var la;
var lat = 37;
var lon = -122;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function tick() {
la.set(lat, lon,
0, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
0, // heading
0, // straight-down tilt
5000 // range (inverse of zoom)
);
ge.getView().setAbstractView(la);
lon = lon + 0.00000001;
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// create the placemark
placemark = ge.createPlacemark('');
var point = ge.createPoint('');
point.setLatitude(lat);
point.setLongitude(lon);
placemark.setGeometry(point);
// add the placemark to the earth DOM
ge.getFeatures().appendChild(placemark);
// look at the placemark we created
la = ge.createLookAt('');
placemark.setName('Drag Me!');
ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT);
tick();
// Comment this next line out and the drag works as expected.
google.earth.addEventListener(ge, "frameend", tick);
// listen for mousedown on the window (look specifically for point placemarks)
google.earth.addEventListener(ge.getWindow(), 'mousedown', function(event) {
console.log("target type = " + event.getTarget().getType());
if (event.getTarget().getType() == 'KmlPlacemark' &&
event.getTarget().getGeometry().getType() == 'KmlPoint') {
//event.preventDefault();
var placemark = event.getTarget();
dragInfo = {
placemark: event.getTarget(),
dragged: false
};
}
});
// listen for mousemove on the globe
google.earth.addEventListener(ge.getGlobe(), 'mousemove', function(event) {
if (dragInfo) {
event.preventDefault();
var point = dragInfo.placemark.getGeometry();
point.setLatitude(event.getLatitude());
point.setLongitude(event.getLongitude());
dragInfo.dragged = true;
}
});
// listen for mouseup on the window
google.earth.addEventListener(ge.getWindow(), 'mouseup', function(event) {
if (dragInfo) {
if (dragInfo.dragged) {
// if the placemark was dragged, prevent balloons from popping up
event.preventDefault();
}
dragInfo = null;
}
});
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
If you comment out line 56, where tick() is called at each frameend, everything works as in the unaltered code: you can successfully drag the place mark. But when line 56 is in, you can't. So the problem is really with setAbstractView keeping mousedown events from propagating to either the globe or whatever placemark or feature was being clicked.
Any ideas? Is there a workaround for this?
The issue isn't caused by the setAbstractView method, it is caused because of the repeated calls to the tick method via framend.
To explain, you have set up the tick method as an event handler for the frameend event.
Then the tick method updates the view immediately, triggering the frameend event, ad infinitum ...
This pattern causes an issue with the browser message loop, in effect it is blocking the other drag events. Think of it like a very tight loop that is causing a deadlock. To work it you can use setTimeout with a value of 0 to execute the code. This way the animation won't be processed until all other pending drag messages are processed.
The key part is a the modification to your tick() method.
function tick() {
// prevent deadlock
setTimeout(function () {
la.set(lat, lon, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 5000);
ge.getView().setAbstractView(la);
lon += 0.00001;
}, 0);
};
Here, I made a fully working example for you http://jsfiddle.net/fraser/JFLaT/
I tested it and it is working in Chrome, IE, Firefox on Windows 8 and Chrome, Safari, Firefox on OSX.