I am trying to create a speech bubble with some aligned text inside of it. for this purpose i have found this excellent github:
Scalebitmap
Now the problem is that i cannot seem to get my text inside of it. and i was wondering if any of you had attempted it.
here is some of the code ive written for this purpose:
var image = new Image();
image.onload = function() { stage.update(); }
image.src = "assets/ScaleBitmapImage.png";
var text = new createjs.Text("Hello World", "20px Arial", "#ff7700");
var sb = new createjs.ScaleBitmap(image, new createjs.Rectangle(12, 12, 5, 50));
sb.setDrawSize(200, 300);
stage.addChild(sb);
createjs.Tween.get(sb).to({alpha: 0},5000).call(doneAnimating);
function doneAnimating() {
createjs.Ticker.removeEventListener("tick", stage);
}
Now i want to align the Hello world inside of the image but im very new to createjs and have no idea how to :)
You need to create a Container that holds both the bitmap and the text instances.
var container = new createjs.Container();
var sb = new createjs.ScaleBitmap();
var text = new createjs.Text();
container.addChild(sb, text);
stage.addChild(container);
You already know the rectangle of the ScaleBitmap, so you should be able to position the text using that.
Related
I am drawing a 2D Simulation into a Canvas using WebGL and JavaScript
let gl = c3d.getContext('webgl', {preserveDrawingBuffer: true});
I want to add my company-logo "logo.svg" in the corner of my simulation. I wanted to ask what the best possible solution for my porblem is. I am wondering if i need to write another shader and do all the rendering on every simulation step. Or if there is a simple way to import the svg into the Canvas. I need both the simulation and logo to be in the same canvas because i am downloading the end Result as PNG/JPG.
This is not a WebGL solution but you could modify your download code to use a second canvas to attach the logo:
var c3d = document.getElementById('c3d');
var c2d = document.getElementById('c2d');
var gl = c3d.getContext('webgl');
var c2 = c2d.getContext('2d');
gl.clearColor(1,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);
// Base64 encode WebGL output
var glImage = new Image();
glImage.src = c3d.toDataURL('image/png');
// Base64 encode company logo
var logoImage = new Image();
logoImage.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Crect width='50' height='50' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)' /%3E%3C/svg%3E";
// Combine both images on a canvas
c2.drawImage(glImage, 0, 0);
c2.drawImage(logoImage, 0, 0);
// Here you will download the image as before, but I'm just
// appending it as an img to show that the result is correct
var finalImage = new Image();
finalImage.src = c2d.toDataURL('image/png');
document.body.append(finalImage);
<canvas id="c3d"></canvas>
<canvas id="c2d"></canvas>
I load a picture and draw it on canvas. With the mouse I can draw on the picture. Now I want to copy a defined part of an another picture to the same part of the shown picture. I thought I can copy the pixels from img2 to img1. Another idea is to place the pictures on top of the other (img1 oder img2) and cut an area from img1.
I don't know what is a possible way.
My try:
function loadPic() {
var ctx2 = document.getElementById('can').getContext('2d');
img = new Image();
img2 = new Image();
img.onload = function() {
ctx2.drawImage(img,0,0);
}
img.src = 'Haut vorne m.bmp';
img2.src = 'Muskeln vorne m.bmp';
}
And the copy:
var g = img2.getImageData(262, 157, 200, 200);
ctx.putImageData(g, 55, 170);
I get an error: img2.getImageData is not a function
Can anybody help ?
Thank you !
getImageData() is a function of canvas, not of Image. See here.
Replace img2.getImageData(...) with ctx.getImageData(...) or ctx2 if that's what you have.
Allright, this is going to be quite hard to explain but I will try to explain my problem as clear as possible.
I currently have a HTML5 Canvas with a couple of preloaded shapes which I changed to images. I am using a modified version of this example. On the canvas I have now I can drag, drop and select the shapes which are preloaded.
I have implemented an option to upload a new image to the canvas using this:
var imageLoader = document.getElementById('uploader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var imgNew = new Image();
imgNew.onload = function(){
ctx.drawImage(imgNew, 0, 0);
}
imgNew.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
This will now just put an image in the top-left corner of the canvas and when I select another shape this image will disappear. All shapes that are already in the canvas are in an array called 'shapes'. In the example there is an option to add a new shape when you dubbelclick on the canvas, this is the code:
// double click for making new shapes
canvas.addEventListener('dblclick', function(e) {
var mouse = myState.getMouse(e);
myState.addShape(new Shape(mouse.x - 10, mouse.y - 10, 20, 20, 'rgba(0,255,0,.6)'));
}, true);
This is the addShape part which is called when double clicking:
CanvasState.prototype.addShape = function(shape) {
this.shapes.push(shape);
this.valid = false;
}
What I am trying to do is when I upload an image using the file upload the image should be added to the 'shapes' array so I can also drag,drop and select the uploaded image. (basically I need to do the same with the uploaded image as I can do with the preloaded ones) My guess is that it should be done something like the doubleclick method and addShape but I can't get this to work.
A working version of my current version can be found here:
http://codepen.io/anon/pen/qLuCy/
If anyone knows how I can get this to work it would be great!
first the result, here : http://codepen.io/anon/pen/qBmnC/
Your shape object can only draw one single hard-coded image, so change this and have shape be either a color or an image. In fact for this you just have to change shape.draw since the 'type' of the fill does not matter in the constructor.
So just test the fill and draw accordingly :
// Tekent de Shape
Shape.prototype.draw = function(ctx) {
var locx = this.x;
var locy = this.y;
var fill = this.fill ;
if (typeof fill == 'string' )
{
ctx.fillStyle = fill;
ctx.fillRect(locx, locy, this.w, this.h);
}
else
{
ctx.drawImage(fill, locx, locy, this.w, this.h);
}
}
then on image load i just add a shape that has this image as fill :
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var imgNew = new Image();
imgNew.onload = function(){
s.addShape(new Shape(60,60,imgNew.width,imgNew.height,imgNew));
}
imgNew.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
I had to put the shape collection, s, as a global var.
You can also see that i used the same scheme in init() to
add an image once it's loaded.
I am using the HTML5 Canvas. I have added images (BitmapImages) to the canvas and I now want to add simple tooltips to these bitmap images.
Is this possible ??? If so can someone tell / show me how I could achieve this ?
I am not sure if it makes a difference , but I am also using the Easel JS Framework ...
Here is an example of what I currently have:
var container = new Container(); // EaselJS Container
container.x = 100;
container.y = 100;
stage.addChild(container);
var image = new Image();
image.src = "image.png";
var bitmap = new Bitmap(image);
bitmap.x = 5;
bitmap.y = 5;
bitmap.mouseEnabled = true;
container.addChild(bitmap);
...
I have not tested this code, but basically a bitmap image is created and added to my stage. I now want to add a simple tool tip to my bitmap image, but cant seem to work out how :(
Any help would be greatly appreciated.
Cheers,
Jon.
Here's how I would do it:
stage.enableMouseOver();
bitmap.onMouseOver = function(e) {
stage.canvas.title = 'put your tooltip text here';
}
bitmap.onMouseOut = function(e) {
stage.canvas.title = '';
}
This works by using tooltips already provided by the browser.
I have two images inside a <canvas> element.
var ctx = document.getElementById('canvas').getContext('2d');
var img1 = new Image();
img1.src = 'cloud.jpg';
img1.name = "Image 1";
img1.onload = function() {
ctx.drawImage(img1, 0, 0);
};
var img2 = new Image();
img2.src = 'eleph.png';
img2.name = "Image 2";
img2.onload = function() {
ctx.drawImage(img2, 250, 250);
};
Now, when User clicks inside canvas, I want to find which object was clicked.
For example, alert img1.name or img2.name when user clicks corresponding image inside the canvas.
Please give some directions as how to do this. Thanks!
First of all, you must have stored in some variable the position and size of each image. After that, add an onclick handler on you canvas element that iterate over the image position collection checking which one is under the mouse on the click event.