How to drag (some draggable in toolbar) on edge and then insert a new vertex between source and target,
I find some examples like this, but I am not using mxEditor, thanks you.
https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html
You need to enable dropEnabled and splitEnabled properties and call splitEdge function with target and mouse co-ordinates.
Related
In my markup, I add a label on it using (x,y) co-ordinates using "markup.markups[0].getClientPosition". This works, but if I change camera mode or rotate it will lose it place, so am wondering how I can put it back to the new position as per the new markup position?
I understand I have to add event listener for "CAMERA_CHANGE_EVENT", but how I should relate the label with its corresponding svg markup, what if there are more than one markups?
Thanks in advance.
I'd suggest to use the 3d markup extension to make things easier - it supports navigation right out of the box
Follow here to get started: https://forge.autodesk.com/blog/3d-markup-icons-and-info-card
Or SVG markups work well as well: https://forge.autodesk.com/blog/create-pushpin-markup-svg
Currently, I am working on automating maps. I wanted to select the region using mouse pointer.
find region -> drag mouse pointer -> Drop. Please suggest sikuli webdriver script for this.
There are a couple of built in Sikuli functions: dragDrop() will encompass both the drag and the drop (like the name suggests) Or, you can do the steps separately, if needed (drag(), mouseMove(), dropAt()). These are all in the documentation here.
I don't know much about webdriver or how it interacts with Sikuli, but hopefully its a starting place...
Here is my solution for enlarge a application window. I tested on both windows and linux OS and it work.
corner = find(Pattern('test.png' ).targetOffset(-36,-22))
drop_point = corner.getTarget().offset(dx, dy)
dragDrop(corner, drop_point)
The -36,-22 in function targetOffset(-36,-22)) can be adjust by sikuli IDE.
Here another example:
region1 = find("1429562753142.png")
dropRegion = Location(104,800)
dragDrop(region1, dropRegion)
keyUp()
I defined the reigion where the image is located.
Then I defined the drop region.
By using dragDrop() the image is moved.
And keyUp() is releasing the keys that where being hold down.
Added 3D collada (.dae) file in to a scene. The 'DAE' file contains geometry with the name "monster" and the id is "monster-mesh-skin". I tried to apply mouse click event to the geometry "monster". like,
var monster = dae.getChildByName("monster"); // get geometry
monster.addEventListener("click", meshClickHandler);
The click event is not working. And I tried THREE.Vector3() and THREE.Ray like,
var mouse3D = new THREE.Vector3();
mouse3D.x = event.clientX;
mouse3D.y = event.clientY;
mouse3D.z = 0.5;
var ray = new THREE.Ray(mouse3D);
var intersects = ray.intersectObjects(monster);
console.dir(intersects);
on document click handler. In intersects variable not contain any value.
Is there any solution to apply mouse event for 3D model and control it?
It appears you need to rethink the approach a bit. Any 3D object in your scene exists exclusively as a 2D "drawing" of an object and itself can not have standard DOM event handlers attached to it.
What you want is a general event listener on the document itself to capture mouse clicks, like so:
document.addEventListener( 'click', detectIntersect, false );
Now, there are a ton of example right in Three.js example directory that can show you exactly how to "click your object", but in 3D terms it's refered to as object picking or raycasting an object. These terms might help when searching for examples/help. Have a look at these examples:
http://threejs.org/examples/webgl_interactive_cubes.html
http://threejs.org/examples/canvas_interactive_cubes_tween.html
One last note, it appears your using r57 or earlier of the Three.js library. I would suggest upgrading to the latest build as getting support from the community is easier when were all on the same page :)
Hope that helps, take care.
I'm now working on a painting app. It uses a html canvas. Users can draw shapes on the canvas.
Now a problem comes to me. I want to select the line that I drew on the canvas. When it is selected, I can drag it or delete it. How can I implement it ? Any good ideas?
It might be worth your while to have a look at https://github.com/canvimation/canvimation.github.com this contains the source code for a drawing application using canvas.
You should note that this application is being re-coded but there is not yet a working version using the new code on line. The new source code is in the stage1 branch. Hopefully this new code is easier to understand than the old code and the code referred to below comes from the stage1 branch.
Basically a shape object is created for each shape drawn which includes all data about eh shape, including path data and data giving the rectangular boundary around the shape. When the "boundarydrop" div is clicked then function checkBoundary is called and data about the shift key and cursor position are passed. Then for each shape the first check is to see if the cursor is within the boundary of the shape and if so then a more refined check is carried out. For a closed shape the check is if the cursor in inside the shape and for an open shape if the cursor is close to the path.
There are further complications depending whether the shift key is held down or not and which group the shape belongs to. However the basics are there.
Functions to check out
in index.html
shiftdown
getPosition
in scripts/drawboundary.js
checkBoundary
isIn
isOn
in scripts/shape.js
shape
A working online version of the application is at http://canvimation.github.com/ but this uses the older code in the master branch and there are some bugs but it will give you some idea of what the application does.
Hope this is of some help
There is a library called kinetic.js, with it you can keep track of the shapes you draw on the canvas with the select feature.
Here is the link: https://github.com/ericdrowell/KineticJS
Im looking for an easy to use method of assigning drag behavior to multiple objects (images, shapes etc) in canvas. Does anyone have a good way or know of any libraries for dragging objects around? Thanks
Creating your own mouse events takes a little work - ideally you should either create or use some kind of mini-library. I'm thinking of creating something like this in the near future. Anyway, I created a drag and drop demo on jsFiddle showing how to drag images - you can view it here.
You can create draggable images like this:
var myImage = new DragImage(sourcePath, x, y);
Let me know if you have any questions about this. Hope it helps.
EDIT
There was a bug when dragging multiple images. Here is a new version.
Another thing you might want to check out is easeljs it sort of in the style of AS3... mouseEvents dragging etc...
The HTML Canvas—unlike SVG or HTML—uses a non-retained (or immediate) graphics API. This means that when you draw something (like an image) to the canvas no knowledge of that thing remains. The only thing left is pixels on the canvas, blended with all the previous pixels. You can't really drag a subset of pixels; for one thing, the pixels that were 'under' them are gone. What you would have to do is:
Track the mousedown event and see if it's in the 'right' location for dragging. (You'll have to keep track of what images/objects are where and perform mouse hit detection.)
As the user drags the mouse, redraw the entire canvas from scratch, drawing the image in a new location each time based on the offset between the current mouse location and the initial mousedown location.
Some alternatives that I might suggest:
SVG
Pure HTML
Multiple layered canvases, and drag one transparent canvas over another.
The HTML Canvas is good for a lot of things. User interaction with "elements" that appear to be distinct (but are not) is not one of those things.
Update: Here are some examples showing dragging on the canvas:
http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
http://www.redsquirrel.com/dave/work/interactivecanvas/
http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html
None of these have created a separate library for tracking your shapes for you, however.
KineticJS is one such Javascript Library that u can use exclusively for animations
Heres the Link html5canvastutorials
Canvas and jCanvas
You're definitely gonna want to check out jCanvas. It's a super clean wrapper for Canvas, which kicks open a lot of doors without adding code complexity. It makes things like this a breeze.
For example, here's a little sandbox of something close to what you're after, with dragging and redrawing built right in:
Drawing an Arrow Between Two Elements.
I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality.
Hope that helps others, like me.
JP
As you create new objects whether they are windows, cards, shapes or images to be draggable, you can store them in an array of "objects currently not selected". When you click on them or select them or start dragging them you can remove them from the array of "objects not selected". This way you can control what can move in the event of a particular mousedown event or mousemove event by checking if it isn't selected. If it is selected it will not be in the "not selected" array and you can move the mouse pointer over other shapes while dragging shapes without them becoming dragged.
Creating arrays of objects you would like to drag also helps with hierarchy. Canvas draws the pixels belonging to the foremost object last. So if the objects are in an array you simply switch their instance as in element in the array say from objectArray[20] to objectArray[4] as you iterate through the array and draw the objects stored in the array elements you can change whether other objects are seen on top or behind other objects.