Cesium has the ability to make circles (such as by creating an Entity with ellipse defined, for one), and arcs (polylines). But I haven't been able to find the way to create partial, filled-in, circles.
We use Cesium to display bar charts and other report details overlaid on a map.
We now have a request to display pie charts over the map. To do this, we'd need to be able to create, say, 50%, 30%, 20%, or some other arbitrary percentage of a circle, filled in with a given color. Is there a way to do this in Cesium?
I could just create an arc and two connecting lines, to create a partial circle outline, but I can't find a way to create a partial circle with a fill color (similar to what EllipseGraphics itself allows for.)
As of version 1.62, CesiumJS includes modifications I made to allow drawing partial ellipsoids. You should be able to leverage this to get what you want. For example,
let viewer = new Cesium.Viewer('cesiumContainer');
viewer.entities.add({
name: 'Pie piece',
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0),
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
innerRadii: new Cesium.Cartesian3(1, 1, 1),
minimumClock: Cesium.Math.toRadians(0),
maximumClock: Cesium.Math.toRadians(270),
minimumCone : Cesium.Math.toRadians(89.8),
maximumCone : Cesium.Math.toRadians(90.2),
material: Cesium.Color.RED,
}
});
Related
I am using Autodesk.Viewing.Markupscore extension to draw a polygon in 3D view in top view (orthographic)
I want to see only those elements which are inside the polygon
For which I am using the cutplanes concept because bounding box logic is taking too long to process.
So Please suggest a way to apply cut planes along these lines.
Try programmatically cutplanes with an array of vector4s specifying the four sides say:
vectorArray.push(new THREE.Vector4 (0.9999999999999998, 0, 0, 0.06520926952362059)) //x,y,z,w
viewer.setCutPlanes(vectorArray)
See documentation here
I am trying to simply change the colour of a model in autodesk forge. I am using the following code.
Creation of the material
var material = new THREE.MeshPhongMaterial
({
color: new THREE.Color("rgb(255, 0, 0)"),
transparent: false
});
Adding it to the list of materials
materials.addMaterial(
'NewMaterial',
material,
true)
Line of code that actually sets the material
fragList.setMaterial(fragId, material);
This works almost perfectly. The colour of the model changes to red as it should but as you move the view around, what looks like the underlying grey of the model seems to be showing through the red like its clipping through in certain areas.
I have been through https://threejs.org/docs/#api/materials/MeshPhongMaterial and messed with a bunch of properties of the material and while they changed the look of the material especially the lighting properties however nothing would stop the grey clipping through. Any suggestions on what could be causing this or where to look would be appreciated
Not sure if there is a down side to using this method but I used the setThemingColour that was demonstrated in the easter code sample.
https://forge.autodesk.com/blog/happy-easter-setthemingcolor-model-material
var red = new THREE.Vector4(1, 0, 0, 0.5);
viewer.setThemingColor(dbId, red);
Changed the colour, doesnt show through other models like overlays and doesnt have the clipping issue I had.
use this extension from Autodesk forge instead of working on three.js directly.
https://forge.autodesk.com/cloud_and_mobile/2015/12/change-color-of-elements-with-view-and-data-api.html
It is very simple, you just have to write few lines:
viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Color');
viewer.setColorMaterial([objectIds],colorcodes);
I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}
I need to render a simple chart and I want the points to be glassy looking circles/orbs in the chart area. I can find tons of examples of drawing these with Photoshop, but I don't want to use stock images; I'd prefer to draw them in my HTML5 canvas. I am no artist, though!
There are many HTML5 canvas questions, but I don't see anything that leads me to this solution.
A point in the right direction would be most appreciated.
All you have to do is create one or more radial gradients to fit the properties of the glassy object that you want. It's easy to do!
Just one gradient:
// Create some gradient
var gradient = ctx.createRadialGradient(105, 105, 20, 120, 120, 50);
gradient.addColorStop(0, 'rgba(250,250,255,0)');
gradient.addColorStop(0.75, 'rgba(230,250,255,1.0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');
// draw the gradient (note that we dont bother drawing a circle, this is more efficient and less work!)
// but make sure it covers the entire gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);
Can make this:
Live example:
http://jsfiddle.net/GTbjk/
Maybe you want to reign in that fuzzy edge:
gradient.addColorStop(0.8, 'rgba(0,0,255,0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');
http://jsfiddle.net/GTbjk/1/
I'm not going to make one to your specification, since you didn't provide one and thats not what we're here for anyway. Making these will almost exclusively be the work of well-placed radial gradients, so go experiment!
As j08691 points out this is a really inefficent way of making these unless you want them to be dynamic or scalable, you are better off just making images and use ctx.drawImage
I have made a C++ Builder XE form with rounded corner with the help of the following code
BorderStyle = bsNone;
void __fastcall TForm1::FormCreate(TObject *Sender)
{
HRGN frmrgn;
frmrgn = CreateRoundRectRgn (0, 0, ClientWidth, ClientHeight,12,12);
SetWindowRgn(Handle,frmrgn,true);
}
It looks cool but the border is missing, I tried many thing but not get good result
so please help me to draw border of color RGB(96,96,96)
And I want to make whole form dragable.
1. Painting a dark grey border
This one's easy, depending on how complex you want the border to look. If you just want an outline in dark grey, either draw it using a combination of lines and arcs, or use the FrameRgn function to draw an outline around your region with a specific brush. Doing this is the best solution since you already have a region you've used to define the shape of the window.
However, the MSDN documentation for SetWindowRgn says, "After a successful call to SetWindowRgn, the system owns the region specified by the region handle hRgn. The system does not make a copy of the region. Thus, you should not make any further function calls with this region handle." You'll need to create your region again for the paint method.
Some code for your paint method:
HRGN hRegion = ::CreateRoundRectRgn (0, 0, ClientWidth, ClientHeight,12,12);
Canvas->Brush->Style = bsSolid;
Canvas->Brush->Color = RGB(96, 96, 96);
::FrameRgn(Canvas->Handle, hRegion, Canvas->Brush->Handle, 2, 2);
::DeleteObject(hRegion); // Don't leak a GDI object
2. Making the window draggable without its title bar
The short summary is that you need to handle the WM_NCHITTEST message. Windows sends this to see if the mouse is over the title bar ('NC' stands for 'non-client'; it's actually testing to see if it's anywhere in the non-client area, which can be any window border, not just the top one.) You can make your window draggable by saying 'yes, the mouse is in the caption right now' even when it isn't. Some code:
// In the 'protected' section of your form's class declaration
virtual void __fastcall WndProc(Messages::TMessage &Message);
// The implementation of that method:
void __fastcall TForm1::WndProc(Messages::TMessage& Message) {
TForm::WndProc(Message); // inherited implementation
if (Message.Msg == WM_NCHITTEST && Msg.Result == htClient) {
Msg.Result = htCaption;
}
}
You can perform some hit testing of your own to restrict what parts of your window appear to be the title bar, in order to create a title bar of your own.
Example Delphi code.
A good article about using this message, and things to be aware of / traps not to fall into.