I'm trying to use cocos2d js. While I was working I needed to draw a polygon which I've already done using DrawNode. But now I need to run different actions on that polygon such we run actions on sprites. I was searching for any way to run actions on the polygon but couldn't be able to do so.
Please help if anybody knows how to work with polygons as sprites.
You have to apply the actions to the DrawNode that contains the polygon. In this example, I draw a polygon and then I rotate it by 10 degrees each second (pivoting on the default anchor point 0,0).
var dn = new cc.DrawNode();
this.addChild(dn, 500);
dn.drawPoly([cc.p(50,50), cc.p(100, 70), cc.p(110, 100), cc.p(120, 80), cc.p(70, 40)], cc.p(500,500), cc.color(249,255,115), 100, cc.color(249,255,115));
dn.runAction(
cc.repeatForever(
cc.rotateBy(1, 10)
)
);
Related
I'm trying to create an overlay in ArcGIS that has moving graphics/symbols which are updated by coordinates received from roving devices. I'm able to display a simple symbol initially but cannot get it to move on the map. My test code is
GraphicsOverlay machineOverlay = new GraphicsOverlay();
MainMapView.GraphicsOverlays.Add(machineOverlay);
MapPointBuilder rdLocation = new MapPointBuilder(150.864119200149, -32.3478640837185, SpatialReferences.Wgs84);
SimpleMarkerSymbol sRD1234 = new SimpleMarkerSymbol()
{
Color = System.Drawing.Color.Red,
Size = 10,
Style = SimpleMarkerSymbolStyle.Circle
};
Graphic graphicWithSymbol = new Graphic(rdLocation.ToGeometry(), sRD1234);
machineOverlay.Graphics.Add(graphicWithSymbol);
// here the red circle is displayed correctly on the map
rdLocation.SetXY(150.887115, -32.357600);
rdLocation.ReplaceGeometry(rdLocation.ToGeometry());
// here I expect the red circle to move but it doesn't
Do I need to trigger an event to "re-render" or refresh the overlay, or what do I need to do to get the graphic to move on my map?
There was a similar question here and the answer was "just update the geometry" which is what I'm attempting to do, but with no success.
If there is an entirely different or better approach to moving markers on a map please suggest, I'm just getting started in the ArcGIS runtime.
Thanks
After a lot of searching I replaced one line of code and its now working
//rdLocation.ReplaceGeometry(rdLocation.ToGeometry());
graphicWithSymbol.Geometry = rdLocation.ToGeometry();
It seems I misunderstood the function of ReplaceGeometry(). Any clarification on this would be helpful.
I am doing a spinning animation after an action on a button. But to know where the animation needs to stop (the final angle) I need to do a call to backend. So I start the animation and when I receive the response from the backend I update the animation. Here is the code :
const anim = scene.tweens.add({
targets: [targetContainer],
angle: angle,
duration: WHEEL_ROTATION_DURATION,
ease: 'Cubic.easeOut',
})
And the update :
anim.data[0].end += newAngle
It works properly but the moment the angle is updated the animation produce a "glitch/jump" that is not nice to see.
Any idea on how to make it smooth ?
Answer from Antriel on phaser forums :
Best way to make it smooth would be to manually update the angle in
update, using constant speed (so something like container.angle +=
angleSpeed * dt). Then afterwards, when you get the backend response,
just start the easeOut tween with the correct end position, and
specify speed rather than the duration.
Works very well.
I'm making a Drone simulator with OSGEarth. I never used OSG before so I have some troubles to understand cameras.
I'm trying to move a Camera to a specific location (lat/lon) with a specific roll, pitch and yaw in OSG Earth.
I need to have multiple cameras, so I use a composite viewer. But I don't understand how to move the particular camera.
Currently I have one with the EarthManipulator which works fine.
class NovaManipulator : publicosgGA::CameraManipulator {
osg::Matrixd NovaManipulator::getMatrix() const
{
//drone_ is only a struct which contains updated infomations
float roll = drone_->roll(),
pitch = drone_->pitch(),
yaw = drone_->yaw();
auto position = drone_->position();
osg::Vec3d world_position;
position.toWorld(world_position);
cam_view_->setPosition(world_position);
const osg::Vec3d rollAxis(0.0, 1.0, 0.0);
const osg::Vec3d pitchAxis(1.0, 0.0, 0.0);
const osg::Vec3d yawAxis(0.0, 0.0, 1.0);
//if found this code :
// https://stackoverflow.com/questions/32595198/controling-openscenegraph-camera-with-cartesian-coordinates-and-euler-angles
osg::Quat rotationQuat;
rotationQuat.makeRotate(
osg::DegreesToRadians(pitch + 90), pitchAxis,
osg::DegreesToRadians(roll), rollAxis,
osg::DegreesToRadians(yaw), yawAxis);
cam_view_->setAttitude(rotationQuat);
// I don't really understand this also
auto nodePathList = cam_view_->getParentalNodePaths();
return osg::computeLocalToWorld(nodePathList[0]);
}
osg::Matrixd NovaManipulator::getInverseMatrix() const
{
//Don't know why need to be inverted
return osg::Matrix::inverse(getMatrix());
}
};
Then I install the manupulator to a Viewer. And when I simulate the world, The camera is on the good place (Lat/Lon/Height).
But the orientation in completely wrong and I cannot find where I need to "correct" the axis.
Actually my drone is in France but the "up" vector is bad, it still head to North instead of "vertical" relatively to the ground.
See what I'm getting on the right camera
I need to have a yaw relative to North (0 ==> North), and when my roll and pitch are set to zero I need to be "parallel" to the ground.
Is my approach (by making a Manipulator) is the best to do that ?
Can I put the camera object inside the Graph node (behind a osgEarth::GeoTransform (it works for my model)) ?
Thanks :)
In the past, I have done a cute trick involving using an ObjectLocator object (to get the world position and plane-tangent-to-surface orientation), combined with a matrix to apply the HPR. There's an invert in there to make it into a camera orientation matrix rather than an object placement matrix, but it works out ok.
http://forum.osgearth.org/void-ObjectLocator-setOrientation-default-orientation-td7496768.html#a7496844
It's a little tricky to see what's going on in your code snippet as the types of many of the variables aren't obvious.
AlphaPixel does lots of telemetry / osgEarth type stuff, so shout if you need help.
It is probably just the order of your rotations - matrix and quaternion multiplications are order dependent. I would suggest:
Try swapping order of pitch and roll in your MakeRotate call.
If that doesn't work, set all but 1 rotation to 0° at a time, making sure each is what you expect, then you can play with the orders (there are only 6 possible orders).
You could also make individual quaternions q1, q2, q3, where each represents h,p, and r, individually, and multiply them yourself to control the order. This is what the overload of MakeRotate you're using does under the hood.
Normally you want to do your yaw first, then your pitch, then your roll (or skip roll altogether if you like), but I don't recall off-hand whether osg::quat concatenates in a pre-mult or post-mult fashion, so it could be p-r-y order.
I need help with fabricjs, objects are not rendering properly while I clone and shrink to another canvas.
If I do only with text object there is not problem kindly look the below fiddle (after save)
enter code hereFIDDLE
If I load an image then the objects not aligning properly.
enter code hereFIDDLE
Kindly help to resolve form this.
Thank You.
Your problem for the image not respecting the zoom is that the image loads asyncronously. So you load from json, you do the zoom logic, some microseconds later the image finish loading and sets its own width and height.
Other than this you have to use zoom the right way.
Everyone is scaling manually and changing left and top using division or multiply with scale factor.
The good way is using
canvas.setZoom(scale);
This will save a lot of headaches to you.
$(function () {
scale = 0.5;
canvas1 = new fabric.Canvas('c1');
canvas1.setDimensions({
"width": canvas.getWidth() * scale,
"height": canvas.getHeight() * scale
})
var json = localStorage.getItem('save');
canvas1.loadFromJSON(json, function () {
canvas1.renderAll();
});
canvas1.setZoom(scale);
canvas1.renderAll();
});
chek updated fiddle
https://jsfiddle.net/asturur/Lep9w01L/11/
I need to create speed gauge with SVG. As the speed changes, a needle is rotated to indicate the proper speed on the gauge, and an arc is drawn around the gauge's circumference following the tip of the needle.
I have attempted to use three different libraries (VelocityJS, SnapSVG, and GSAP) to solve issues with the needle's rotation, but I have not succeeded yet in finding an implementation that works.
My initial attempts were with Velocity. I got it working in all browsers except IE. In IE, all attempts to change transform-origin failed.
Then I tried both SnapSVG and GSAP, but two issues keep coming up:
The needle's rotation mostly works well, but occasionally it rotates in the wrong direction, under the gauge, no doubt following the shortest distance to the point.
In IE, stroke-dashoffset causes unpredictable results.
I have created a CodePen that shows the gauge's behaviour when driven by either of these three libraries.
Any help?
Snap version works fine for me, but I'm guessing the problem as mentioned is stroke-dashoffset which I can't test in IE.
One possibility if stroke-dashoffset is not possible, is to rebuild the path string each time. Uses a bit more resources, but I think may be ok.
Otherwise you could try drawing a mask or clip the same size as the arc over it, and animate that, but it will use more resources as well.
Here is a Snap solution, rebuilding the arc path each time.
Amended code...
var arc = Snap.select('#gauge-arc');
var arcLength = arc.getTotalLength();
var arcString = arc.attr('d');
arc.attr({ d: ''})
Snap.animate(0,arcLength, function( val ) {
var arcSubPath = Snap.path.getSubpath(arcString,0,val) ;
arc.attr({ d: arcSubPath });
}, 100, function() {
Snap.animate(arcLength,0, function( val ) {
var arcSubPath = Snap.path.getSubpath(arcString,0,val) ;
arc.attr({ d: arcSubPath });
},500);
})
},
Example fiddle (note, the other buttons probably won't work as I've removed the stroke-dashoffset in the svg markup).