I am using using HTML5 Canvas to plot lines. A single line is formed by calling drawLine() on multiple intermediate points. For example:
(0,0) -> (10, 10) -> (10, 5) -> (20, 12)
would show up as one line on the plot.
All the (x,y) co-ordinates of a line are stored in an array.
I want to provide the users with the ability to select a line when they click on it. It becomes difficult to do this in HTML5 Canvas as the line is not represented by an object. The only option that I am left with is to first find that (x,y) coordinate of any line that is closest to the (x,y) of a mousedown event. Once I detect which line the user has selected, then I need to redraw the line with a bold color or put a translucent color around it. But, I am assuming that this would be too time-intensive, as it involves looping over all (x,y) coordinates of all lines.
I am looking for ways that can help me achieve the above in a more time-efficient manner. Should I consider using SVG in HTML5?
Any suggestions would be appreciated.
The simplest way to do this in HTML5 canvas is to take a snapshot of the image data for the canvas, and during mousemove look at the alpha color at the pixel under the mouse.
I've put up a working example of this on my site here:
http://phrogz.net/tmp/canvas_detect_mouseover.html
Here's the core code I wrote. Pass it a context and a function, and it will call your function with the RGBA components underneath the pixel.
function pixelOnMouseOver(ctx,callback){
var canvas = ctx.canvas;
var w = canvas.width, h=canvas.height;
var data = ctx.getImageData(0,0,w,h).data;
canvas.addEventListener('mousemove',function(e){
var idx = (e.offsetY*w + e.offsetX)*4;
var parts = Array.prototype.slice.call(data,idx,idx+4);
callback.apply(ctx,parts);
},false);
}
And here's how it's used on that test page:
var wasOver;
pixelOnMouseOver(ctx,function(r,g,b,a){
var isOver = a > 10; // arbitrary threshold
if (isOver != wasOver){
can.style.backgroundColor = isOver ? '#ff6' : '';
wasOver = isOver;
}
out.innerHTML = "r:"+r+", g:"+g+", b:"+b+", a:"+a;
});
I think you'd find this much easier in SVG. There each line would be a <polyline> and you could add a onclick handler to do what you want. For example...
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:5"
onclick="this.style.stroke='red'" />
</svg>
The only way to do this on the canvas is to detect pixel color and follow path or save paths as objects and detect a click on that path.
Related
In the following example, there is a function called generateTexture().
Is it possible to draw text (numbers) into the pixel array? Or is it possible to draw text (numbers) on top of that shader?
Our goal is to draw a circle with a number inside of it.
https://forge.autodesk.com/blog/using-dynamic-texture-inside-custom-shaders
UPDATE:
We noticed that each circle can't use a unique generateTexture(). The generateTexture() result is used by every single one of them. The only thing that can be customized per object is the color, plus what texture is used.
We could create a workaround for this, which is to generate every texture from 0 to 99, and to then have each object choose the correct texture based on the number we want to display. We don't know if this will be efficient enough to work properly though. Otherwise, it might have to be 0 to 9+ or something in that direction. Any guides on our updated question would be really appreciated. Thanks.
I am able to successfully display text with the following code, simply replace generateTexture() by generateCanvasTexture() in the sample and you should get the result below:
const generateCanvasTexture = () => {
const canvas = document.createElement("canvas")
const ctx = canvas.getContext('2d')
ctx.font = '20pt Arial'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(new Date().toLocaleString(),
canvas.width / 2, canvas.height / 2)
const canvasTexture = new THREE.Texture(canvas)
canvasTexture.needsUpdate = true
canvasTexture.flipX = false
canvasTexture.flipY = false
return canvasTexture
}
It is possible but you would need to implement it yourself. Shaders are a pretty low level feature so there is no way to directly draw a number or a text, but you can convert a given character into its representation as a 2d pixel array.
I have a problem with the method createPattern(). I have this image as background pattern:
When I use it as a pattern, this is what I obtain:
Why, because I expect the output to be as follows:
I think that the problem can be caused in some previous setting of the context, but what type of setting can do this? However this is the specific code that I use to make the pattern:
var pattern_bg = new Image();
pattern_bg.src = 'bg.png';
pattern_bg.onload = function(){
var pattern = context.createPattern(pattern_bg, "repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 223, 60);
}
Can please anyone help me to fix this issue?
To have the pattern that you want, you need to translate first at the point you want to be the origin of the fill, then draw from here.
So be sure to save() and restore() the context each time you change its transform matrix (translate, rotate, scale) to be able to set the translation as you want.
Do not forget you can always use setTransform to reset the matrix with ctx.setTransform(1,0,1,0,0,0);
I've done a very small jsbin to illustrate, here :
http://jsbin.com/EYArASA/1/edit?js,output
We can see the result on this picture, fill is done directly on the left, and after a translate on the right.
Code is very simple, interesting part is this :
// rect drawn directly : wrong result
ctx.fillRect(10,20,64,64);
// canvas translated, then fillRect at 0,0 :
// right result
ctx.translate(116,20);
ctx.fillRect(0,0,64,64);
I'm creating a drawing program witch should also use semi-transparent brushes. When I use a transparent brush I end up with some transparent strokes, witch are the lasts until I release the mouse. If I then draw a new stroke again my old strokes get full opacity, even if I don't come across them. The program works getting mouse coordinates, waiting for position changed, and then draws (and strokes) a line which goes from the first point to the second. I have seen that some tutorial suggests to store in memory (array) all the path and draw it again on every mouse release, but I'm not sure due to memory consumption. The program is written in QML + javascript, but canvas works in the same way as does in HTML5.
Thank you in advance to everybody.
The following is the context call:
function pencilBehaviour() {
if (canvas.isPressed){
var ctx = canvas.getContext('2d')
if ((canvas.bufferX != -1) || (canvas.bufferY != -1)){
ctx.globalCompositeOperation = "source-atop"
ctx.moveTo(canvas.bufferX, canvas.bufferY)
ctx.lineTo(canvas.px, canvas.py)
ctx.globalAlpha = 0.4
ctx.lineCap = "round"
ctx.lineJoin = "round"
ctx.strokeStyle = "white"
ctx.lineWidth = 3
ctx.stroke()
console.log("pencil invoking canvas")
//Buffers are needed to draw a line from buffer to current position
canvas.bufferX = canvas.px
canvas.bufferY = canvas.py
}
else{
//Buffers are needed to draw a line from buffer to current position
canvas.bufferX = canvas.px
canvas.bufferY = canvas.py
}
}
}
Hard to know without code, but here is a guess...
Make sure all your new strokes begin with context.beginPath() so the context is not "remembering" your previous strokes.
I have two draggable objects, and when your drag one them it generates a line based off where your mouse is, and the line is anchored to the other object. What Id like this code to do, is generate the line at the rear of the symbol
I got this
but I need this
if ((mouseX-targetPointX<0 && mouseY-targetPointY>0) || (mouseX-targetPointX>=0 && mouseY-targetPointY<=0)) {
line.moveTo(mouseX-offset,mouseY-offset);
line.curveTo(mouseX-offset,targetPointY-offset,targetPointX-offset,targetPointY-offset);
line.lineTo(targetPointX+offset,targetPointY+offset);
line.curveTo(mouseX+offset,targetPointY+offset,mouseX+offset,mouseY+offset);
} else {
line.moveTo(mouseX-offset,mouseY+offset);
line.curveTo(mouseX-offset,targetPointY+offset,targetPointX-offset,targetPointY+offset);
line.lineTo(targetPointX+offset,targetPointY-offset);
line.curveTo(mouseX+offset,targetPointY-offset,mouseX+offset,mouseY-offset);
}
line.endFill();
};
Instead of using the mouse position as reference to draw your curve, you can use a custom Point object with the coordinates from where you want the curve to start from.
moveTo(myPoint.x, myPoint.y);
You can create any Point you want, for example at (50,200) using the relative coordinates from your Sprite, and then find the global coordinates using localToGlobal.
var globalPoint:Point = mySprite.localToGlobal(new Point(50,200));
trace(globalPoint.x,globalPoint.y);
I suppose this doesn't work because canvas is drawing a bitmap of a vector (and a bitmap is not a path).
Even if it did work, the bitmap is likely always has a rectangular permitter.
Is there any way to leverage something like isPointInPath when using drawImage?
example:
The top canvas is drawn using drawImage and isPointInPath does not work.
The bottom canvas is drawn using arc and isPointInPath works.
a link to my proof
** EDIT **
I draw a circle on one canvas, and use isPointInPath to see if the mouse pointer is inside the circle (bottom canvas in my example).
I also "copy" the bottom canvas to the top canvas using drawImage. Notice that isPointInPath will not work on the top canvas (most likely due to reasons I mentioned above). Is there a work-around I can use for this that will work for ANY kind of path (or bitmap)?
A canvas context has this hidden thing called the current path. ctx.beginPath, ctx.lineTo etc create this path.
When you call ctx.stroke() or ctx.fill() the canvas strokes or fills that path.
Even after it is stroked or filled, the path is still present in the context.
This path is the only thing that isPointInPath tests.
If you want to test if something is in an image you have drawn or a rectangle that was drawn with ctx.fillRect(), that is not possible using built in methods.
Typically you'd want to use a is-point-in-rectangle function that you write yourself (or get from someone else).
If you're looking for how to do pixel-perfect (instead of just the image rectangle) hit detection for an image there are various methods of doing that discussed here: Pixel perfect 2D mouse picking with Canvas
You could try reimplementing ctx.drawImage() to always draw a box behind the image itself, like so (JSFiddle example):
ctx.customDrawImage = function(image, x, y){
this.drawImage(image, x, y);
this.rect(x, y, image.width, image.height);
}
var img1 = new Image();
img1.onload = function(){
var x = y = 0;
ctx.drawImage(img1, x, y);
console.log(ctx.isPointInPath(x + 1, y + 1));
x = 1.25 * img1.width;
ctx.customDrawImage(img1, x, y);
console.log(ctx.isPointInPath(x + 1, y + 1));
Note: you might get side effects like the rectangle appearing over the image, or bleeding through from behind if you are not careful.
To me, isPointInPath failed after canvas was moved. So, I used:
mouseClientX -= gCanvasElement.offsetLeft;
mouseclientY -= gCanvasElement.offsetTop;
I had some more challenges, because my canvas element could be rescaled. So first when I draw the figures, in my case arc, I save them in an array together with a name and draw them:
if (this.coInit == false)
{
let co = new TempCO ();
co.name= sensor.Name;
co.path = new Path2D();
co.path.arc(c.X, c.Y, this.radius, 0, 2 * Math.PI);
this.coWithPath.push(co);
}
let coWP = this.coWithPath.find(c=>c.name == sensor.Name);
this.ctx.fillStyle = color;
this.ctx.fill(coWP.path);
Then in the mouse event, I loop over the items and check if the click event is in a path. But I also need to rescale the mouse coordinates according to the resized canvas:
getCursorPosition(event) {
const rect = this.ctx.canvas.getBoundingClientRect();
const x = ((event.clientX - rect.left ) / rect.width) * this.canvasWidth;
const y = ((event.clientY - rect.top) / rect.height) * this.canvasHeight;
this.coWithPath.forEach(c=>{
if (this.ctx.isPointInPath(c.path, x, y))
{
console.log("arc is hit", c);
//Switch light
}
});
}
So I get the current size of the canvas and rescale the point to the original size. Now it works!
This is how the TempCO looks like:
export class TempCO
{
path : Path2D;
name : string;
}