How can i drag and drop a 2d svg icon/object on the viewer and move it on the page as well #autodesk-forge #autodesk-viewer - autodesk-forge

drag and drop a 2d svg icon/object on the viewer and move it on the page as well
i'm having a list of svg icons that i need to choose one and then drag it over to the viewer and also i can move it over the page using mouse moves
please help me with regards it any help is appericiated!
requirement

Related

Trying to render 2d image inside the forge viewer with 3d model

My current use case is to align a 2d image to a 3d model inside the forge viewer allowing zoom as well as panning functionalities. I have tried the following implementations -
Adding the 2d image as an overlay scene on the forge viewer but the problem there is that I can't position the model on the image precisely even though i have tried translating, rotating and scaling the model programatically.
Loading two different viewers on top of each other and then using viewer.getState() and viewer.restoreState() to sync the state between the two viewers on Autodesk.Viewing.CAMERA_CHANGE_EVENT.
Placing the image inside the HTML beneath the forge viewer and then disabling the pointer events on the viewer and using Javascript to zoom both the viewer and the image in sync. But the problem there is that the measure tool doesn't seem to work right.
What am i missing?
I assume that you simply want to insert a 2D raster image into the viewer scene. That can certainly be done using the 1st approach you suggested. Use an overlay scene or the SceneBuilder extension to add a custom three.js mesh into the scene, and then apply your image as a texture to the mesh.
Regarding the placement of the mesh in the viewer scene, that really depends on your use case and the type of models you're working with. For example, if you wanted to place the image under the 3D model (perhaps the picture contains some satellite imagery), you could find the bounding box of the model using the viewer APIs (viewer.model.getBoundingBox()), and place the three.js object with your image at the bottom side of it.

HTML CSS show image on polygon mouse over

I am pretty new to web development and need to create an interactive map where various info pops up on mouse over certain areas.
Is it possible to have an image appear or change visibility on mouse over a SVG polygon?
I would greatly appreciate any assistance.

I have trouble drawing on some pages of the photo gallery

I have a photo gallery and want to enable mouse or touch drawing for only some pages.
In the Adobe Animate program I put a page code in the gallery, but when I get to the page whose frame contains the drawing code, the drawing becomes effective on that page and all pages and I cannot stop the mouse from drawing in the rest of the gallery pages.
How do I customize the code for drawing only on specific pages?
Link to the file I'm working on : the FLA file.
The pages to be assigned to the drawing are 10 and 14.

Can VideoView be implemented inside InfoWindow marker?

I'm trying to add videoView inside a infoWindow,is it possible?Can anyone give me an example. Thank you
From GoogleMap Api Docs... An info window is not a live View, rather the view is rendered as an image onto the map. As a result, any listeners you set on the view are disregarded and you cannot distinguish between click events on various parts of the view. You are advised not to place interactive components — such as buttons, checkboxes, or text inputs — within your custom info window. Sadly,it seems like it means no video on infowindow marker
hopefully someone prove me wrong

Can I draw lines on top of an "gif" image using the <canvas> function?

I'm having difficulty drawing lines on top of an uploaded "map.gif" image.
Basically I've upload a small outline map and use the "area" function to create defined areas (cities, roads, etc). When I click on a city a snall pop up gets displayed with the word "hey, you've just click on Dallas" (or where ever). All that works just fine.
My problem is that my map is actually just a blank outline with no actual cities or roads drawn on it.
Therefore I tried using the "canvas" function to draw the cities (circles) and roads (lines).
The only problem is that they appear below the map rather than on top of it.
Any ideas as to how I can get the lines to appear on the map?
Many thanks,
Pete
You might just have to try playing with the CSS z-index values of the image and canvas.
Do make sure you set the canvas to be transparent.
An other possibility is to replace the image with the canvas (or just load the image in the canvas to begin with).
For some hints on how to use images with canvas take a look here.
I would load the gif directly in the canvas memory, and then do all the rest inside the canvas itself.
The gif is not animated, right?
Some reference about loading: https://developer.mozilla.org/en/Canvas_tutorial/Using_images