how i can recognize which object is selected by mousePressed on the object. I have make two objects textarea and div created by createElement() on p5js canvas.but when I mousePressed on textarea,it doesn't recognize it.
One thing you can do is build different functions for them,
You can do something like this:
function setup() {
var ta = createElement("textarea");
var div = createElement("div");
ta.mousePressed(forTextArea);
div.mousePressed(forDiv);
}
function forTextArea() {
//do something with text area
}
function forDiv() {
//do something with div
}
Click here for demo
mousePressed Reference
Related
Hi I am developing an application with Fabric.js where the user would enter some string and upon clicking on the delete image last word will be deleted and the image would shift to the left.
I am using image like
fabric.Image.fromURL(srcImg, function (oImg) {
canvas.add(oImg);
oImg.set('left',0);
oImg.set('top', 100);
oImg.scale(.55);
canvas.renderAll();
// and then, we can animate the image
oImg.animate('left', 100, {
onChange: canvas.renderAll.bind(canvas)
});
oImg.on('mouse:down', function() {
//some function here
});
});
Now I want to use the click and the animate outside of the add function, but I get an error undefined index oImg. I want to use click and animate elsewhere so that I can remove the last word and use animate to shift the image to the left I am using text for click and the animate right now but I would like to use image.
fabric.Image.fromURL is an asynchronous method, so it is normal that it will throw an error of undefined calling it just below it. You have mainly two solutions here:
Add the event listener inside the callback:
fabric.Image.fromURL('//lorempixel.com/200/200/', function(img) {
img2 = img
...
img2.on('mousedown', function () {
console.log('throws an error');
});
});
Call events binding function (always after img2 was created)
fabric.Image.fromURL('//lorempixel.com/200/200/', function(img) {
img2 = img
...
bindImageEvents(img2)
});
function bindImageEvents (imageObject) {
imageObject.on('mousedown', function () {
console.log('Something...');
});
}
I'm new to TornadoFx but am trying it out (also new to JavaFX by extension).
I have a listview defined as so:
private var colorList = mutableListOf<Color>
//other things in init block
colorpicker(mode = ColorPickerMode.MenuButton) {
valueProperty().onChange {
if (it != null) {
colorList.add(it)
}
}
}(Color.BLACK,Color.WHITE).observable()
listview(colorList) {
cellFormat {
text = it.toString()
style {
baseColor = it
}
}
contextmenu {
item("Delete").action {
if (selectedItem != null) {
colorList.remove(selectedItem)
}
}
}
}
//continue init block
Adding and taking away colors from the listview works just fine but the color inside the cell does not disapear if it is no longer occupied
Example of what is happening
The cellFormat function allows you to configure the list cell for each item in your list.
However, when there is no list item for a certain row, the callback is not run, so that you have no way of applying a style to an empty row using the cellFormat approach. One solution would be to implement your own ListCell and always clearing the style property of the cell, but I believe this might actually be fixed within the framework by always clearing the style property before a cell is reused. I just tried to make this change in the framework, and it fixes the issue with your code sample.
I will commit the change now, please try it out with tornadofx-1.7.17-SNAPSHOT :)
is there a way to implement a erase method for raphael objects. in this erase method I want to remove specific parts of a particular raphael object. It means that the erase method should work like a real eraser. In the raphael documentation there is a method call Paper.clear(). But we only can delete entire paper.
Any kind of help is appreciated.
The normal way to be to use the remove() method.
http://raphaeljs.com/reference.html#Element.remove
element.remove();
You could eventually create a function that draws shapes with the same color than your paper background-color, on click. Something like this code (jsfiddle at the end of the post). It would cover your content and not erase it, but it would look like it.
var timeoutId = 0;
var cursorX;
var cursorY;
var mouseStillDown = false;
paper = Raphael("paper1","100%","100%");
paper.rect(10,10,100,100).attr({
fill : "black"
});
$("#paper1").mousemove(function(event){
cursorY=event.pageY;
cursorX=event.pageX;
});
function erase() {
if (!mouseStillDown) { return; }
paper.rect(cursorX-25,cursorY-25,50,50).attr({
fill :"white",
stroke : "white"
});
if (mouseStillDown) { setInterval("erase", 100); }
}
$("#paper1").mousedown(function(event) {
mouseStillDown = true;
erase(event.pageX,event.pageY);
});
$("#paper1").mouseup(function(event) {
mouseStillDown = false;
});
Here, each time you click, it creates a white rectangle at your cursor position.
Here's a fiddle of the code : http://jsfiddle.net/c6Xs6/
With a few modifications you could create a menu allowing the user to choose the size and shape of the form you use to "erase".
Something more or less like this : http://jsfiddle.net/8ABe9/
You could also use a div following your cursor to show exactly where the "eraser" would be drawn.
Hope that helped you :)
I have an HTML5 canvas which is displaying a number of images. I also have some simple HTML <p></p> tags on my page below the canvas.
I want to update the contents of the <p></p> tags when the cursor hovers over these images, and I found a quick tutorial at: http://www.quirksmode.org/js/newmouseover.html which seemed to suggest it could teach you how to do this.
I've followed the tutorial, however, when I view my page in the browser now, I get a console error that says
getElementByTagName is not a function
I've not seen this function before, and I'm just wondering if it is actually a pre-defined function, or if it's one that the writer of the tutorial has defined themselves...? I couldn't see anything on that page where the author has defined the function, so I thought it might be a pre-defined one, but I'm not sure. Does anyone know?
Edit
Ok, so correcting the typo fixed it, and the function is now being called. However, I'm currently calling it from my window.onload function, so as soon as the page loads, the paragraph has already been updated- it's not actually conditional on the onmouseover event being called.
My window.onload function looks like this:
window.onload = function () {
var sources = [];
sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
sources[2] = document.getElementById("drink").src,
sources[3] = document.getElementById("food").src,
/*There are roughly 30 lines like this adding images in the same way */
if (document.getElementById) {
var x = document.getElementById('mouseovers')
.getElementsByTagName('IMG');
} else if (document.all) {
var x = document.all['mouseovers'].all.tags('IMG');
} else {
return;
}
for (var i = 0; i < x.length; i++) {
console.log("for loop adding onmouseovers is being called");
x[i].onmouseover = displayAssetDescriptionTip();
}
loadImages(sources, drawImage);
drawGameElements();
drawDescriptionBoxes();
stage.add(imagesLayer);
};
I tried moving the if statements into a function called displayAssetDescriptionTip(), and this function now looks like this:
function displayAssetDescriptionTip() {
if (document.getElementById) {
var x = document.getElementById('mouseovers')
.getElementsByTagName('IMG');
} else if(document.all) {
var x = document.all['mouseovers'].all.tags('IMG');
}else {
return;
}
for (var i = 0; i < x.length; i++) {
console.log("for loop adding onmouseovers is being called");
x[i].onmouseover = displayAssetDescriptionTip();
}
document.getElementById('tipsParagraph').innerHTML = "Assets are items that"
+ " can be bought or sold for cash.";
console.log("displayAssetDescriptionTip being called");
}
However, the onmouseover event doesn't appear to be firing when I hover the cursor over the images to which it's been added- any ideas why this is?
getElementByTagName is not a function.
getElementsByTagName is though :)
It's plural because it returns every element that matches the given tag.
I'm triyng to build a simple animation jQuery-plugin. The main idea is to take an element and manipulate it in some way repeatedly in a fixed intervall which would be the fps of the animation.
I wanted to accomplish this through events. Instead of using loops like for() or while() I want to repeat certain actions through triggering events. The idea behind this: I eventualy want to be able to call multiple actions on certain events, like starting a second animation when the first is done, or even starting it when one animation-sequence is on a certain frame.
Now I tried the following (very simplified version of the plugin):
(function($) {
$.fn.animation = function() {
obj = this;
pause = 1000 / 12; //-> 12fps
function setup(o) {
o.doSomething().trigger('allSetUp');
}
function doStep(o, dt) {
o.doSomething().delay(dt).trigger('stepDone');
}
function sequenceFinished(o) {
o.trigger('startOver');
}
function checkProgress(o) {
o.on({
'allSetup': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'stepDone': function(event) {
console.log(event); //check event
doStep(o, pause);
},
'startOver': function(event) {
console.log(event); //check event
resetAll(o);
}
});
}
function resetAll(o) {
/*<-
reset stuff here
->*/
//then start over again
setup(o);
}
return this.each(function() {
setup(obj);
checkProgress(obj);
});
};
})(jQuery);
Then i call the animation like this:
$(document).ready(function() {
$('#object').animation();
});
And then – nothing happens. No events get fired. My question: why? Is it not possible to use events like this inside of a jQuery plugin? Do I have to trigger them 'manualy' in $(document).ready() (what I would not prefer, because it would be a completely different thing – controling the animation from outside the plugin. Instead I would like to use the events inside the plugin to have a certain level of 'self-control' inside the plugin).
I feel like I'm missing some fundamental thing about custom events (note: I'm still quite new to this) and how to use them...
Thx for any help.
SOLUTION:
The event handling and triggering actually works, I just had to call the checkProgress function first:
Instead of
return this.each(function() {
setup(obj);
checkProgress(obj);
});
I had to do this:
return this.each(function() {
checkProgress(obj);
setup(obj);
});
So the event listening function has to be called before any event gets triggered, what of course makes perfect sense...
You need set event on your DOM model for instance:
$('#foo').bind('custom', function(event, param1, param2) {
alert('My trigger')
});
$('#foo').on('click', function(){ $(this).trigger('custom');});
You DOM element should know when he should fire your trigger.
Please note that in your plugin you don't call any internal function - ONLY DECLARATION