I'm familiar with kineticJS and have just come across my first problem which i'm hoping someone will be able to help with.
What i'd like to do is drag one shape (a trigger shape) over another shape (a target shape) and in doing so fire off an event or function (in this case an AJAX post).
The other thing is i'd like to do is pass information (names) of both shapes into the ajax post.
(doing the ajax post itself is not an issue, it's the triggering event and getting info of both shapes)
Thanks in advance
trigger.on('dragend', function() {
var x = trigger.getX();
var y = trigger.getY();
var triggerName = trigger.getName();
var children = triggerLayer.getChildren();
for( var i=0; i<children.length; i++){
if(x > (children[i].getX()- children[i].getWidth()/2) &&
x < (children[i].getX()+ children[i].getWidth()/2) &&
y > (children[i].getY()- children[i].getHeight()/2) &&
y < (children[i].getY()+ children[i].getHeight()/2)
)
{
alert(triggerName + "has activated" + children[i].getName())
///ajax post
}
}
Related
I am working on a drawing application in HTML5 canvas, using Easeljs. So far I am able to drag and drop objects into the field, but I only want them within certain bounds.
To illustrate:
Objects 1, 2, 4 and 5 should get deleted, but object 3 should be kept.
I have tried using hitTest(), but that didn't work properly (I probably did something wrong). I would love to post the code I used, but my PC froze while working on it... Thought I'd better ask while unfreezing, haha.
Here is a quick drag and drop sample with bounds constraining:
http://jsfiddle.net/xrqatyLs/8/
The secret sauce is just in constraining the drag position to your own values.
clip.x = Math.max(bounds.x, Math.min(bounds.x + bounds.width - clipWidth, evt.stageX));
clip.y = Math.max(bounds.y, Math.min(bounds.y + bounds.height-clipHeight, evt.stageY));
Here is another more complex example that manually checks if one rectangle intersects another rectangle:
http://jsfiddle.net/lannymcnie/yvfLwdzn/
Hope that helps!
Solution:
var obj1 = obj.getBounds().clone(); // obj = a pylon
var e = obj1.getTransformedBounds();
var obj2 = bg.getBounds().clone(); // bg = the big green field
var f = obj2.getTransformedBounds();
if(e.x < f.x || e.x + e.width > f.x + f.width) return false;
if(e.y < f.y || e.y + e.height > f.y + f.height) return false;
return true;
After all it's so simple, but I guess I was working on it for so long that I started to think too hard...
I'm struggling on how I can put this into code.
int a=500;
By default x = a-100
I am trying to find a way where when one button is clicked, it sets the x-coordinate to x=a-100 , and then when the same button is pressed again, it sets x=0.
How would i logically put this into code?
Thanks a lot!
Somewhere, have a variable keep track of whether or not the button has been previously pressed. Since you haven't indicated what language you're using, I'll have to make this very generic, and assume the typical interface that's used to handle button press events.
var button = (some GUI button object);
var a = 500;
var x = 2;
var buttonHasBeenPressed = false;
button.onPress = function() {
if (buttonHasBeenPressed) {
x = 0;
} else {
x = a - 100;
}
buttonHasBeenPressed = true;
};
Where you store the flag (buttonHasBeenPressed) depends on your skill level, the size of your program and many other factors. This is just a rough example using pseudo-javascript.
How to access urls of images and xy coordinates from the DOM.
I have a div with multiple image gifs in it.
The gifs represent electronic components on stripboard or protoboard.
The img gifs are generated using this code.
function createDiv(img)//img here original code was for creating new divs
{
alert(divnumber);//an incrementing or decrementing image array position counter
{
var divTag = document.createElement("img");
divTag.id ='part'+divnumber;
imageArray[divnumber+1]=200;//arbitrary inital x placement
imageArray[divnumber+2]=200;//arbitrary initial y placment
divTag.className ="dragme";
divTag.src = imageArray[divnumber];//gif;//imageArray[i];
document.body.appendChild(divTag);
}
divnumber=divnumber+3;//offset between gif url in image array
}
The gifs are draggable using this code. I don't fully understand drag code but it was the simplest I could find and make work.
//<script language="JavaScript1.2">
<!--
var ie=document.all;//if using explorer
var nn6=document.getElementById&&!document.all;//if using netscape
var isdrag=false;//are we dragging??
var x,y;
var dobj;//drag object
function movemouse(e)
{
if (isdrag) //if drag istrue
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
//alert(dobj.style.left);
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
//alert(tx);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
//alert(x +' "=y);
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;//go to selectmouse when mouse down in document
document.onmouseup=new Function("isdrag=false");
//-->
I need to put all the gifs and x y coordinates into an array that I can save with html5 local storage.
I can save an array and recall it ok.
But I need to fill the array with urls and xy coords of draggable items.
I can't figure how to get that info from either the dragging code or the DOM.
I think I can get that info from the dom image list but I still cant get up to speeds on all the dom details.
Can anyone tell me how to identify the gif url and xy coordinates from either the drag code or the DOM.
This is basically my last hurdle before I can comnplete the prrogram.
Many Thanks. I am mainly a cut and paste and hacking found scripts in my programming level.
Oh!! I am almost 70 and this IS NOT a homework problem!!
Thanks markE for last help.
TiMathis
After further thought I can probably dig the xy's out of the drag code but how can I determine which gif is being dragged?
OK I can get the objects id ...alert(dobj.id)
I should be able to use that to get other info for immage array info I need.
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
alert(dobj.id);
tx = parseInt(dobj.style.left+0);
//alert(tx);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
//alert(x +' "=y);
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
I have some problems with basic drag and drop scrolling algorithm. Here is my algorithm:
When mouse pressed down i set boolean dragging = true and store the current mouse x and y position in stored_position variable.
When mouse up i set boolean dragging = false.
On each frame i check dragging == true and if it is i calculate the dx = current_mouse.x - stored_position.x and dy = current_mouse.x - stored_position.y. Then i store current mouse position as the new stored_position and scroll my view (it is 2d camera object) by this dx dy, as the Camera.x -= dx, Camera.y -= dy (i need the inversion one because of camera specific).
The problem with this algorithm is that when i drag the camera it starting to blink and move around/shake. I think it is because when i move my mouse from left to right it traces dx like this:
71
-67
69
-68
69
-68
8
-5
So i think it is the mouse twitching(i mean the mouse is jumps back sometimes when we try to draw a line). Any idea of changing algorithm, maybe i miss something?
Here is example of this problem: https://dl.dropbox.com/u/78904724/as_host/buld_build_other.rar (you need to run the index.html chose the level and try to drag the screen).
Updated
Here is the example full source link (this is the random picture, i swear): https://dl.dropbox.com/u/78904724/as_host/scroll_test.rar
And this is the code i used (in example i use native flash events instead of using axgl checks to not confuse someone, i have both examples and it cause the same problems):
//variables with comments
private var dragging:Boolean = false; //dragging flag
private var current_mouse:Array; //stored mouse position array [0] - x, [1] - y
private var d:Array; //dx dy array [0] - x, [1] - y
[Embed(source = "test.jpg")] public static const _sprite:Class; //sprite graphics
private var view_sprite:AxSprite; //some image on the stage to drag it
//this is the class constructor code
view_sprite = new AxSprite(0, 0, _sprite);
add(view_sprite);
current_mouse = new Array();
d = new Array();
Ax.stage2D.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
current_mouse[0] = Ax.mouse.x;
current_mouse[1] = Ax.mouse.y;
dragging = true;
});
Ax.stage2D.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent):void {
dragging = false;
});
Ax.stage2D.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
if (dragging) {
d[0] = Ax.mouse.x - current_mouse[0];
d[1] = Ax.mouse.y - current_mouse[1];
Ax.camera.x -= d[0];
Ax.camera.y -= d[1];
current_mouse[0] = Ax.mouse.x;
current_mouse[1] = Ax.mouse.y;
}
});
I am totally confused but the problem was this two strings(thanks the axgl author for helping me):
current_mouse[0] = Ax.mouse.x;
current_mouse[1] = Ax.mouse.y;
And when i remove them the dragging will work perfectly. But... I swear i tried this before and nothing gonna happed, camera just started to move faster without this and now... it works!
Thank you all for trying to help my. If someone would have the similar problems here is the full worked source: https://dl.dropbox.com/u/78904724/as_host/scroll_test_worked.rar
And this is the thread on axgl.org: http://axgl.org/forums/viewtopic.php?f=12&p=394
Hello everyone and anyone!
Ok... I have been banging my head against the wall with this issue for literally weeks, but I still cannot find an answer that has successfully resolved the issue.
I created an FLA and placed a FLV component with the instance name of videoPlay on the stage.
videoPlay is pathed to a streaming FLV with embedded event cue points. The cue points are numbered sequentially from narration1 to narration16.
I established a listener object:
var videoPlayCuePointListener:Object = new Object();
The event listener for the cue points:
videoPlayCuePointListener.cuePoint = function(eventObject:Object):Void{
if(eventObject.info.name == "narration1"){_root.cc_box.cc_txt.htmlText = cueTxt1);}
else if(eventObject.info.name == "narration2"){_root.cc_box.cc_txt.htmlText = cueTxt2);}
etc, through narration16 }
and so on through narration16.
Then I attached the event listener to the FLV component on stage:
videoPlay.addEventListener("cuePoint", videoPlayCuePointListener);
All of this works very well. As the FLV plays, each event cue point fires off the correct text to the cc_txt dynamic text box.
The issue I am having is that I cannot find the nearest cue point to the FLV playhead so that I can fire events when the user scrubs the timeline.
I have researched this as thoroughly as I possibly could before finally deciding to post the issue, but although the documentation and various postings regarding findNearestCuePoint discovered throughout the web have provided numerous examples, not a single one has been successful.
I have attempted to add a listener to videoPlay that creates an object (nearestCue) and gives nearestCue the value of videoPlay.findNearestCuePoint(videoPlay.playheadTime), then read out nearestCue's name, label, etc. No dice.
Nothing suggested in any posts I have reviewed (many, many posts) has provided an answer.
This seems like it would be the easiest thing to accomplish but I have not been successful a single time.
Any suggestions or assistance would be much appreciated.
Thank you for your time!
Haven't touched AS2 in a long time. I've done a basic test and findNearestCuePoint worked. You're using the FLVPlayback component, right ?
Here's what I've tried:
videoPlayer.autoPlay = false;
onEnterFrame = function():Void{
videoPlayer.seekPercent(_xmouse/Stage.width * 100);
videoPlayer.play();
trace(videoPlayer.findNearestCuePoint(videoPlayer.playheadTime).name);
}
The recommended way would be to find the nearest cue point in an playheadUpdate handler which is triggered after the playhead changes it's value. (e.g. 1. tell the playhead to move, 2. the playhead actually changes the value, 3. the playheadUpdate gets called)
Here's a more basic approach:
onEnterFrame = function():Void{
if(videoPlayer.metadata) trace(videoPlayer.findNearestCuePoint(_xmouse/Stage.width * videoPlayer.metadata.duration).name);
}
In my test I've added 4 cue points. Tried them all: actionscript/event/navigation.
The strange thing was when I tried to access the cuePoints property through videoPlayer
or through videoPlayer.metadata I got an array of 8 undefined objects, and the length of the array was 4 when I traced it. Don't know what the issue is, maybe encoding/codec and as2 compatibility, not sure.
Anyway...as long as you've got your cuePoints array, you can manually find the closest one by looping though all of them and getting the smallest absolute difference between each cue point time and the current time:
function getClosestCuePoint(cuePoints:Array,time:Number):Object{
var numCuePoints:Number = cuePoints.length;
var minDist:Number = 100000000,result:Object;
for(var i:Number = 0 ; i < numCuePoints ; i++){
if(Math.abs(cuePoints[i].time - time) < minDist){
minDist = Math.abs(cuePoints[i].time - time);
result = cuePoints[i];
}
}
return result;
}
Here's a mockup example: let's pretend some boxes on the screen are the cue points and the _xmouse position would be the playhead time. Try this in a new document:
//fake cue points
var numCuePoints:Number = 5;
var cuePoints = [];
for(var i:Number = 0 ; i < numCuePoints ; i++) cuePoints[i] = {name:'narration ' + (i+1),time: 10 + (80 + Math.random() * 20) * i}
//visual hint - separated from the cue points
for(var i:Number = 0 ; i < numCuePoints ; i++) drawBox(this,0x009900,10,15,cuePoints[i].time,Stage.width * .5);
var playhead:TextField = drawText(this,'playhead');
//playhead update
onEnterFrame = function():Void{
playhead._x = _xmouse;
playhead.setTextFormat(new TextFormat('Verdana',11));
playhead.text = 'time: ' + _xmouse+' / cue ' + getClosestCuePoint(cuePoints,_xmouse).name;
}
//find the shortest marker within the shortest distance from the current value
function getClosestCuePoint(cuePoints:Array,time:Number):Object{
var numCuePoints:Number = cuePoints.length;
var minDist:Number = 100000000,result:Object;
for(var i:Number = 0 ; i < numCuePoints ; i++){
if(Math.abs(cuePoints[i].time - time) < minDist){
minDist = Math.abs(cuePoints[i].time - time);
result = cuePoints[i];
}
}
return result;
}
//utils
function drawBox(target:MovieClip,color:Number,width:Number,height:Number,x:Number,y:Number):Void{
target.lineStyle(3,color);
target.moveTo(x,y);
target.lineTo(x+width,y);
target.lineTo(x+width,y+height);
target.lineTo(x,y+height);
target.lineTo(x,y);
}
function drawText(target:MovieClip,name:String):TextField{
var result:TextField = target.createTextField(name,target.getNextHighestDepth(),0,Stage.width * .5-20,100,20);
result.autoSize = 'left';
result.border = true;
result.selectable = false;
return result;
}
HTH
George,
I believe I discovered the issue, and I think it was something that you covered in your previous post, but I glossed over it by accident.
The F4V I was working with had the cue points embedded using Adobe Media Encoder... and that was the entire issue.
I went back and exported the cue points out to XML, then stripped them out of the F4V and re-encoded it without them. Then I edited the XML to change all of the event cue point to actionscript and imported them into the FLA file using the FLV component properties dialogue.
Presto, amazingly enough, I had no issues finding the cue points, tracing them, and using them for any purpose.
So in the future, I just need to remember to set up the cue points in the Properties dialogue and set them to actionscript and I should be golden. So far, it has worked flawlessly with all of the F4V files since making the change.
Thank you very much for your detailed response and your follow up!