I wish to create a click-able object on a tag with javascript/jQuery.
This obviously dosen't work.
var cow = new Object();
cow = ctx.drawImage(tile,cursorH,cursorV);
$(cow).click{function(){
alert('You clicked a cow!');
});
The solution is simple, but requires some groundwork be laid. First, you'll need to keep track of the "objects" you draw on the canvas. Perhaps create your own object class that keeps track of position and size. Secondly you override the onclick event for the canvas and perform a hit test on all your visible objects. The ones that are located under your cursor at the time of the click were clicked upon.
I don't think you can do it "right out of the box." Check out Fabric.js (demo) though, I believe it has support for drawing selectable objects to the canvas.
Related
If you change the size/position of the object not manually, but in the code, the controls may not be displayed correctly. For example, I created a square and moved it. If you move the mouse to its old place, the cursor will change and if you start moving the object will move but relative to its new position. If you click on its new location, nothing will happen. This is corrected if you click on a different place on the canvas.
You need to call .setCoords() on your object after changing values like position programmatically.
See the following:
http://fabricjs.com/fabric-gotchas
https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords
This function helped me:
function Moved() {
canvas.discardActiveObject();
canvas.setActiveObject(object)
canvas.discardActiveObject();
canvas.renderAll();
}
It should be called at the end of initialization of the canvas and objects and after each change of location.
It is also better to use renderAll() instead of requestRenderAll() wherever possible.
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 need text box inside the canvas. is it possible to draw textbox inside the canvas??
like:
<canvas>
<input type="text">
</canvas>
i dont want answer like this:
<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>
is possible to draw textbox inside the canvas tag using javascript?
No. It's not possible.
If you want text-boxes like this, then your answers are:
use CSS exactly the way you show
make a text-box class, which draws a rectangle and a blinking cursor
keeps track of when it's clicked, using hand-written collision-detection
registers and unregisters keyboard-events when a collision is detected
draws and clears text, based on input
creates a rate-limiter, so that keys don't fire too quickly
listens for "enter" or "backspace" keys, on keyup to add another line, or erase the current text
add an additional click-listener inside the box, when it already has "focus", to try to figure out where the "cursor" (which you invent) should be, in terms of the string, based on the click's detected position within the canvas, compared to the rectangle's position in the canvas, plus the "padding" between the rectangle's starting point and the text's starting point, plus the string's calculated-width
and if the click's X and Y are higher than the rectangle's X, plus the padding before the text starts, but lower than the rectangle's X, plus padding, plus text-width, then you need to loop through and measure the text, character by character, until you find the "best-fit" for where to consider the "cursor" to be, for the next round of editing... which has to function using mouse and keyboard as inputs, of which you have to create and register the events yourself...
That's a LOT of work, compared to CSS.
So technically, yes, you can make something that's like an input box, if you're willing to write what might be hundreds of lines of unminified code, to do the same sort of thing you'd do if you were drawing a mouse/keyboard capable text-box on an empty screen using nothing but C++...
But you can not add DOM elements and make them a part of the canvas, complete with all of their events and natural behaviours.
There are some libraries out there which might help, but I'm not understanding why you'd want to go through all of this work, without a good reason.
Try this site to draw text box component on canvas. Its not CSS or HTML, little javascript.
It explains all about text in canvas.
CanvasInput - HTML5 Canvas Text Input
You can use this library to create a input text field into canvas. It is not sharp as a html/css textbox, but it's a good start.
https://goldfirestudios.com/canvasinput-html5-canvas-text-input
One workaround is this ... I think the following solution works well, although you can't type in the text box inside the Canvas you could use a separate text box and apply that text to the text area within the canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/.
I have a little tool that draws up a grid of circles(representing holes) that allows the user to add text and lines to these circles. Right now I have it set up so if the user clicks on any of the holes then wherever the hole is moved so is every other element on the Paper object. What I am trying to implement next is the ability to rotate everything as one object. I realize that for this to work that I need to know the central point of all the objects, which I can easily get.
What I want to know is should I draw everything on another object. This object will act as another Paper object of sorts, but will only serve for movement and rotation. Any click events on the holes drawn on the object will be passed on to the parent (i.e. the pseudo-paper object everything is drawn on). Is this possible? If so how would I draw everything onto say, a rectangle? And if not what would be the best way to go implementing it?
What you need is a Set. You create it, push objects to it, and then treat it as an entire group, in your case by applying transformations.
Example:
var elements = paper.set();
if (!view.text) {
view.text = App.R.text(0, 0, this.value);
view.text.attr({
'font-size': font_size,
});
elements.push(view.text);
}
elements.transform('something');
Note that you can also bind events to this entire set.
Hi I am playing around with shapes and canvas and I have a question:
So say I have this code that draws a nice rectangle on the canvas:
$("#create_rectangle").bind("click", function() {
if(canvas[0].getContext){
var ctx = canvas[0].getContext('2d');
ctx.strokeRect(50,50,50,50);
}
});
Now I say I want to store a reference to that rectangle so that I can make alteration to it at a later stage. The stokeRect() method does not seem to return any value. How do I reference that particular rectangle that was created?
Well you can't reference it, but you can include it in a draw function which depending your arguments allow you to move/rotate hide etc.
It very depend on what you want to do with this shape.
This tutorial can be helpfull to understand manipulation of shape.
http://simonsarris.com/blog/140-canvas-moving-selectable-shapes
You can't.
Canvas is basically just a canvas. You throw some paint at it, it dries and you're done. You can't take your paint and move it somewhere else—but you can paint over it.
What you may want is SVG. It keeps track of shapes and other assorted things so that you can change them, deal with interactions much more precisely, et cetera.