I'm new to programming and take Javascript as a school course. I have come upon this problem, and have been stuck because I have been unable to update the text; for instance, when I move my mouse over the canvas, it just overlaps the text. Is there any solution to updating text, or am I just missing something basic?
/* This program displays the x and y
* coordinates in a label on the screen
* and updates when the mouse moves */
function start(){
mouseMoveMethod(drawCoordinates);
}
function drawCoordinates(e){
var txt = new Text(e.getX(), "15pt Arial");
var text = new Text(e.getY(), "15pt Arial");
txt.setPosition(100, 100);
txt.setColor(Color.black);
add(txt);
text.setPosition(100, 200);
text.setColor(Color.black);
add(text);
}
The problem is that you're creating a new Text every time the drawCoordinates method executes.
If this was browser based, you'd need something like this...
function drawCoordinates(e){
//Check if we can find the lable for X first.
//If we can't, create a new one....
var txt = document.getElementById('txtX');
if(txt==null)
{
txt = new Text(e.getX(), "15pt Arial");
txt.setPosition(100, 100);
txt.setColor(Color.black);
add(txt);
}
else
txt.text = e.getX();
//and the same for Y
}
Hope that helps
Related
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 can't figure out why this doesn't work. What I have here is my own black canvas made from a DIV. In that canvas, I want the user to define the first point which I'm successful at, but after clicking the first point, when the mouse moves, the box must size properly and follow the mouse, much like drawing a rectangular box in a paint program. This is where I have difficulty.
Is there a way I can solve this such that it works at minimum and without using Jquery? all the better if I can get a solution for Internet Explorer 7 (or 8 at least).
<div ID="CANVAS" style="background:#000;width:600px;height:400px"></div>
<script>
var startx=-1,starty=-1,points=0,box;
var canvas=document.getElementById('CANVAS');
canvas.onclick=dopoint;
canvas.onmousemove=sizebox;
function dopoint(e){
if (points==0){
var area=canvas.getBoundingClientRect();
box=document.createElement('DIV');
box.style.position='relative';
box.style.border='2px solid yellow';
canvas.appendChild(box);
startx=e.clientX-area.left;
starty=e.clientY-area.top;
box.style.left=startx+'px';
box.style.top=starty+'px';
box.style.width='10px';
box.style.height='10px';
}
points=1-points;
}
function sizebox(e){
if (points==1){
var x=e.clientY,y=e.clientY; //here I'm thinking subtract old point from new point to get distance (for width and height)
if (x>startx){
box.style.left=startx+'px';
box.style.width=(x-startx)+'px';
}else{
box.style.left=x+'px';
box.style.width=(startx-x)+'px';
}
if (y>starty){
box.style.top=starty+'px';
box.style.height=(y-starty)+'px';
}else{
box.style.top=y+'px';
box.style.height=(starty-y)+'px';
}
}
}
</script>
Your code was almost good, except few small things. I have corrected it and wrote some comments on the lines that I've changed.
https://jsfiddle.net/1brz1gpL/3/
var startx=-1,starty=-1,points=0,box;
var canvas=document.getElementById('CANVAS');
canvas.onclick=dopoint;
canvas.onmousemove=sizebox;
function dopoint(e){
if (points==0){
var area=canvas.getBoundingClientRect();
box=document.createElement('DIV');
box.style.position='absolute'; // here was relative and changed to absolute
box.style.border='2px solid yellow';
canvas.appendChild(box);
startx=e.clientX; // removed -area.left
starty=e.clientY; // removed -area.right
box.style.left=startx+'px';
box.style.top=starty+'px';
box.style.width='0px'; // updated to 0px instead of 10 so it won't "jump" after you move the mouse with less then 10px
box.style.height='0px'; // same
}
points=1-points;
}
function sizebox(e){
if (points==1){
var x=e.clientX,y=e.clientY; // here was x = e.clientY and changed to x = clientX
if (x>=startx){
box.style.left=startx+'px';
box.style.width=(x-startx)+'px'; // here it was x+startx and changed to x-startx
}else{
box.style.left=x+'px';
box.style.width=(startx-x)+'px';
}
if (y>starty){
box.style.top=starty+'px';
box.style.height=(y-starty)+'px';
}else{
box.style.top=y+'px';
box.style.height=(starty-y)+'px';
}
}
}
I am using html5 and javascript for rendering a text. I want to update content of text drawn in canvas. I use the following code
var drawArea = document.getElementById('drawingPlane');
var ctx = drawArea.getContext("2d");
ctx.font = "60px Arial";
var counter = 0;
function update() {
counter++;
ctx.strokeText(counter , 50 , 30);
}
setInterval(update , 1000);
The problem is text is not cleared before writing the next value of counter. It is rendering above the previous value of counter. How can I solve this??
Thanks in advance.
You can use the clearRect method to clear the canvas like this:
<script>
var drawArea = document.getElementById('drawingPlane');
var ctx = drawArea.getContext("2d");
ctx.font = "60px Arial";
var counter = 0;
function update() {
ctx.clearRect ( 0 , 0 , drawArea.width, drawArea.height ); // clear canvas
counter++;
ctx.strokeText(counter , 50 , 30);
}
setInterval(update , 1000);
</script>
In HTML5 Canvas shapes (including text) are immediately pixelated (rasterized) and cannot be edited once drawn. The only way to get rid of something you've drawn is clearing the area where it was drawn as suggested by MUG4N. If you want to edit shaped later you need to either use a HTML5 library such as KineticJS which has built a workaround for retaining shapes, or use SVG.
I'm going to start this question off by saying that this is 100% working in Firefox (v21.0). For some reason it's not working in Google Chrome (v27.0.1453.94m). It also doesn't work in IE10.
Here is the JavaScript code I'm having issues with:
function canvasDrawBackground(value){
console.log(value);
stage.removeChild(background);
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
background = new createjs.Container();
background.x = background.y = 0;
background.addChild(temp);
stage.addChild(background);
background.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
So, in Firefox the above code works, as in the image is added to the canvas and you can drag it around.
In Chrome / IE10 nothing happens - or more simply nothing appears on the canvas. I think the issue is in regards to when I add the image into the container, as I can place other items into the container and it works.
I am using http://code.createjs.com/easeljs-0.6.1.min.js and this code is based off of the "drag" tutorial. Here's the code from the tutorial:
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Dragging</title>
<link href="../../shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
// add a handler to the event object's onMouseMove callback
// this will be active until the user releases the mouse button:
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
To simulate my issue, change "var circle = new createjs.Shape();" into a bitmap / image, createjs.Bitmap("images/bg_" + value +".jpg");. It then doesn't render.
Any help is greatly appreciated! Hopefully I'm just doing it wrong. :P
This is probably because the image is not loaded. If you only update the stage after creating it, the image may not display. I would recommend adding a callback to the image to update the stage after its loaded.
// Simple approach. May not work depending on the scope of the stage.
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
temp.image.onload = function() { stage.update(); }
It also may make sense to preload the images you intend to use.
At onclick event I am adding marker (image pin.png):
var relativeX = event.pageX;
var relativeY = event.pageY;
R.image("pin.png", relativeX, relativeY, 22, 22);
R in this code is Raphael paper: var R = Raphael("paper", 500, 500);
And I have to add also textbox next to this pin. It will be something like description of this marker. There should also be delete icon next to it that would remove both marker and textbox. User can add unlimited number of markers.
How can I add this textbox and icon/button to remove both marker and it's textbox?
I am using JQuery and Raphael.
Raphael's ability to handle text is absolutely horrible. I recently had to do something simular for a project, and i ended up using an HTML5 canvas to generate an image, and then load that image into my project.
So say you create your rect in Raphael, then you'll want to generate an image with your description in it:
var width = myRect.getBBox().width
var height = myRect.getBBox().height
var canvas = jQuery("<canvas width="+width+"px height="+height+"px />");
var context = canvas[0].getContext("2d");
context.font = "10pt Calibri ";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText("this is text", xPos, yPos);
and then you'll want to move it into raphael:
var img = canvas[0].toDataURL("image/png"); //turns the canvas object into a png and returns the dynamic url
var bb = myRect.getBBox();
paper.image(img,bb.x,bb.y,300,400)
Its not the 'easiest solution in the world.. but i think you'll find that other options are not very fun to deal with.
Other options include
var description = paper.text(0,0,"this is text");
which may work better for you, but if you're doing any thing with zooming in and out, or even possibly dragging objects, you will have a hard time.
as for your adding markers bit, you'll probably want a function that says something like
function addMarker(x,y){
var marker = paper.set();
marker.push(
paper.rect(x,y,5,20).attr({fill:"#000"}),
paper.rect(x,y,10,5).attr({fill:"#000"}),
);
}
and you'll want a click function as well, something like
$("paper").click(function(e){
addMarker(e.offsetX,e.offsetY)
});
I hope this helps some. Feel free to comment if you need any more help.
edit:
To remove raphael elements, you can use
myElement.remove();
or even
myElement.hide();
edit:
I thought you might have been looking for an input field... Which is something that Raphael can't handle. So you're going to have to do some work arounds.
If you create an input field and then position it absolutely on top of your raphael program you can achieve this.
var textbox = $("<textarea/>");
textbox.css({"z-index" : 2, "position" : "absolute"});
textbox.css("left",myRaphaelElement.getBBox().x)
textbox.css("top",myRaphaelElement.getBBox().y)
$("body").append(textbox)
and i imagine you're going to want the user to be able to save what they write.. which is where you'll add a butotn and do something like
button.onclick(function(){
// write code here that involves the bit i wrote earlier in my post
// that takes textbox.val() as your text.
});
better?
I ended using simple javascript:
var relativeX = event.pageX;
var relativeY = event.pageY;
$('.marker').append('<div class="pin_container" style="top:' + relativeY + 'px; left:' + relativeX + 'px;"> <input type="text" name="textbox" id="textbox' + counter + '" value="" class="pin_textbox"><input type="button" id="remove" class="delete_button" value=" "></div>');
counter++;
$(".delete_button").click(function () {
$(this).parent().remove();
});
Operations on text in Raphael are way to much complicated.