I have a JavaScript application that lets users move shapes around a drawing area, and I happen to be using the Google Closure library. In FF/Safari all is good. In IE, as graphic elements are moved, they get selected by the browser (both the moving element and other elements), showing colored dotted background around some elements in unpredictable ways:
http://i.imgur.com/O33MN.png
How can I turn off this behavior in IE?
It's hard to diagnose your problem on the information provided. IE VML is not very well supported and therefore pretty buggy.
In DojoX Drawing, I ran into a similar problem when drawing lines. VML has a bug where you can't drag and resize at the same time – but, you can drag and create at the same time, so I redraw the line, I don't transform it.
Further, I don't attach my click/drag events to the shape, I attach them to the overall main container, detect the id on the mousedown event, then track the mousemove and move the shape via doing a setTransform on the shape's container.
Essentially, because of the weak VML support, you have to be willing to try totally different things to get it to work.
After some experimentation, I found a partial answer.
The goog.events.Event class has a preventDefault method. Simply handle the MOUSEMOVE event on the graphics' element. Then call the event#preventDefault method:
var element = ... // some element
var graphics = goog.graphics.createGraphics('400', '300');
var fill = new goog.graphics.SolidFill('#00ff00', 0.5);
var stroke = new goog.graphics.Stroke(1, 'black');
graphics.drawEllipse(60, 60, 10, 10, stroke, fill);
graphics.drawEllipse(90, 90, 10, 10, stroke, fill);
graphics.render(element);
goog.events.listen(graphics.getElement(), goog.events.EventType.MOUSEMOVE, function(e) {
e.preventDefault();
e.stopPropagation();
});
Clicking inside the graphics element, then dragging no longer selects the circles. Again, this is only necessary on IE.
One minor problem remains. Pressing the mouse outside of the graphics area, then dragging the cursor into the graphics area results in the entire area being selected, or both the area and graphical elements.
Related
I have a Konva stage that currently displays a series of shapes. I would like to have a shapes panel, where I can drag shapes and insert into the canvas.
There are currently two ways of doing this:
Adding the Shapes Panel to the Konva stage as it's own layer and entity
Having the Shapes Panel as a standalone HTML element outside the Konva stage and implement a draggable js library to handle dragging behaviour
I'd rather option 2; being able to style the shapes panel with CSS and yield a number of other DOM related benefits is more attractive to me right now.
I have the dragging behaviour sorted, but there is one issue: even though I've implemented stage mouseover events, dragging an element that originates from outside the canvas to on top of the canvas doesn't actually trigger the stage event listeners.
Is there a way around this?
What's interesting is that if you click and hold the mouse outside the element and hover over the canvas, the event listeners fire. But, when you're actually dragging an element (text, image), the event listeners do not fire...
Take a look into this demo: https://konvajs.org/docs/sandbox/Drop_DOM_Element.html
var con = stage.container();
con.addEventListener('dragover', function(e) {
e.preventDefault(); // !important
});
con.addEventListener('drop', function(e) {
e.preventDefault();
// now we need to find pointer position
// we can't use stage.getPointerPosition() here, because that event
// is not registered by Konva.Stage
// we can register it manually (with private method):
stage.setPointersPositions(e);
// now you can add a shape. We will add an image
Konva.Image.fromURL('/assets/yoda.jpg', function(image) {
layer.add(image);
image.position(stage.getPointerPosition());
image.draggable(true);
layer.draw();
});
});
I'm relatively new to javascript, and am learning about drag and drop using snap.svg. My problem is in the drop. I can't tell if the dragged element is over the drop target. In this code, I want to drag the circle over the square, and thought I could use mouseover. My (distilled) example may also be a simpler version of this post.
var paper = Snap(300, 300);
var square = paper.rect(100, 100, 40, 40).attr({fill:"blue"});
var circle = paper.circle(50, 50, 20).attr({fill:"red"});
circle.drag();
square.mouseover(
function() {
console.log("Over the square");
}
);
As written, the mouseover will fire when you move the pointer over the blue square, but not when you drag the red circle over the blue square. If you reverse the creation of the square and circle, the mouseover fires either way, but of course the circle is behind the square.
Evidently the event gets caught in the view hierarchy (or something) and doesn't propagate. There must be an easy way around this. Any help?
(And if the best answer is, "use jQuery," fine, but I'd love to learn how to make this work directly, since snap.svg makes dragging so easy.)
Addition: The direction I'm hoping for: the snap.svg documentation for Element.drag() says, in part, "When Element is dragged over another element, drag.over.<id> fires as well." A fine, event-based direction, which would let me (for example) highlight the drop target without a lot of fuss.
But I haven't figured out how to listen for that event! Any help or advice?
Only quick way without collision or element detection from points that I can think of, is to place an almost invisible clone in front of the object, later in the DOM that you can't really see, eg ...
paper.append( square.clone().attr({ opacity: 0.000001 }) )
jsfiddle
Depends how complex your svgs are going to be as to whether this would work I guess, you also have a slight issue if you drop the element over it, your redrag start won't get picked up, so you would need to code around that as well. I think some testing is probably going to be the most bug free solution (there are a few solutions on S.O for getElementFromPoint or hit detection type solutions).
jsfiddle workaround for point above
I have a problem with the HTML5 canvas element. I use sketch.js so the client can make drawings in a webpage. One of the clients requirement is that he can add 'stamps' with numbers. So I made some modifications to the JS to make this possible. And it works, its possible to add stamps. But when the user switches back to the pen tool and starts drawing again, the numbers dissappears.
I add the stamps using fillText()
$.sketch.tools.text = {
onEvent: function(e) {
switch (e.type) {
case 'mousedown':
case 'touchstart':
this.context.font="16px Verdana";
this.context.fillText(this.stamp, e.pageX - this.canvas.offset().left, e.pageY - this.canvas.offset().top);
break;
}
return true;
},
draw: function(action) {
return true;
}
};
See a demo here:
http://jsfiddle.net/brixion/m5dpwvx5/2/
Hopefully somebody can help me
sketchJS clears and redraws the canvas frequently as determined by its source code. For example each new drawing action by the user will clear & redraw the canvas.
Your this.context.fillText code temporarily "borrows" the sketchJS canvas and draws your text on the canvas. Your text disappears when sketchJS internally decides it need to clear the canvas.
sketchJS does not currently support text, so if you want to permanently put text onto the canvas without having sketchJS erase your text, you will have to modify the source to add the fillText capability.
Alternatively, a workaround might be to add an html canvas element on top-of-and-overlapping your sketchJS canvas (like an html canvas "layer" over your sketchJS canvas). Then draw your text onto the top canvas. This way SketchJS won't erase your desired text.
Note: You must prevent the overlaying canvas from intercepting mouse events. You can do this by setting pointer-events:none; on the top canvas. Here's a link about pointer-events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
I am having trouble finding a good method to limit my mouse to be only able to click on a pre existing line in canvas (stroke width of 3)
What I need to know
how to limit mouse so can only click on pre- existing line, add a dot on click
line is drawn with this function
function createLine(startX:Float, startY:Float, endX:Float, endY:Float)
{
surface.beginPath();
surface.moveTo(startX, startY);
surface.lineTo(endX, endY);
surface.closePath();
surface.strokeStyle = '#ffffff';
surface.lineWidth = 2;
surface.stroke();
}
I am working in haxe, but solution in JS is fine
Thanks in advance.
The only way is for you to keep track of what you have drawn and do the collision/mouse over detection on your own.
If you need your canvas to be highly interactive, you should probably be looking at SVG. http://raphaeljs.com/ is a great library for drawing which will use canvas or SVG, whichever is available.
Using canvas and mousemove I create a masking effect.
Example: FIDDLE
The masking effect works but on fast scrolling performance isn't ideal.
How can I improve the framerate?
I fixed it simply by using the window mouse coordinates, instead of the listener on the canvas (assuming you want the picture to just be black).
http://jsfiddle.net/gfZ5C/166/
I also changed to requestAnimationFrame, you'll notice a complete FPS difference in the movement of the circle, instead of it moving according to the listener.
window.onmousemove = function (e) {
circle.posX = e.pageX-can.offsetLeft;
circle.posY = e.pageY-can.offsetTop;
circle.hide = (circle.posX >= 550 || circle.posY >= 550) ? true : false;
}
if (!circle.hide) ctx.arc(circle.posX, circle.posY, 70, 0, Math.PI * 2, true);
I left it at 550, so that you could see it actually disappear, you can change it to a big number if you want the circle to just drag right off the canvas.
Also there is no lag on the circle following the mouse now.
Update:
Fixed the fiddle so that the circle adjusts for window offset too.
The offset is relevant to its parent element, so depending on how far deep your canvas is, you will have to subtract each elements offset that it is inside.
Update:
Switched to handle 'onmouse' events, this will work much better on a real site, because mousing over the iFrame doesn't work well, but it still works. Will work 100% as intended on a real site.