I wanted to draw border around Kendo donut chart. is there any options available to achieve the same. For detail please refer attached image.
Thanks
I got the solution and I am posting the answer if someone wants the same functionalities.
we can override default series visual
this.$('.chartview').kendoChart({
series.visual = this.overrideSeries.bind(this),
...
});
funtion overrideSeries(e){
let origin = e.center;
let radius = e.radius;
var draw = kendo.drawing;
var geom = kendo.geometry;
var circleGeometryOuter = new geom.Circle(origin, radius + 5);
var circleOuter = new draw.Circle(circleGeometryOuter).stroke(CssConst.DONUT_BORDER_COLOR, .5);
var circleGeometryInner = new geom.Circle(origin, radius - 5);
var circleInner = new draw.Circle(circleGeometryInner).stroke('#cdcdcd', .5);
var visual = new draw.Group();
visual.append(circleOuter, e.createVisual(), circleInner);
return visual
}
Related
I'm developing an app with blazor client-side and I need to render a 3D scene.
I have an issue and I guess it is material-related.
I have a composition of parallelepipeds where one of them is fully opaque and the others are transparent.
Depending on the camera angle, the transparent ones completely disappear:
Example where everything is visible:
Example with 2 missing:
Example with all missing:
Code for transparent parallelepipeds
var geometry = new THREE.CubeGeometry(item.xDimension * _scene.normalizer, item.yDimension * _scene.normalizer, item.zDimension * _scene.normalizer);
var material = new THREE.MeshBasicMaterial();
var box = new THREE.Mesh(geometry, material);
box.material.color = new THREE.Color("gray");
box.material.opacity = 0.8;
box.material.transparent = true;
Code for the camera:
var camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 100);
camera.position.set(1.3, 1.3, 1.3);
camera.lookAt(0, 0, 0);
I'm using OrbitControls and every object size is between 0 an 1 (_scene.normalizer is for that purpose)
Do you know why this is happening?
Edit:
I found it being a material depth function issue. Do you know which should I use?
Thanks,
Transparency is tricky with WebGL because a transparent object writes to the depthmap, and then the renderer assumes that subsequent objects behind it are occluded so it skips drawing them. You could avoid this by playing with the material's .depthTest and .depthWrite attributes (see the docs):
box.material.color = new THREE.Color("gray");
box.material.opacity = 0.8;
box.material.transparent = true;
box.material.depthWrite = false;
How does one crop a RenderTargetBitmap? The equivalent of:
RenderTargetBitmap bmp = new RenderTargetBitmap();
await bmp.RenderAsync(element , cropRect );
This question seems simple enough, yet there seems to be no real way of doing it. The above semantically sums up my usage case. I want to render part of a Xaml tree. It's a perfectly legit use case.
Saving to a file, which seems to be the most common way of cropping, is really not a good answer. Sure, maybe one day I will save a cropped image into my media library, but not today.
There are BitmapTransform and BitmapDecoder classes, which among other functions allow you to crop images. But I failed to make them work with RenderTargetBitmap, each time bumping on HRESULT: 0x88982F50 exception when trying to pass pixel data from one source to another.
As for different approach, I can think of bringing big guns and implementing it with Win2D. It might not be the most convenient solution, but it does work:
var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(element, width, height);
var pixels = await renderTargetBitmap.GetPixelsAsync();
var currentDpi = DisplayInformation.GetForCurrentView().LogicalDpi;
var device = CanvasDevice.GetSharedDevice();
var imageSource = new CanvasImageSource(device, width, height, currentDpi);
using (var drawingSession = imageSource.CreateDrawingSession(Colors.Transparent))
using (var bitmap = CanvasBitmap.CreateFromBytes(
drawingSession, pixels.ToArray(), width, height,
DirectXPixelFormat.B8G8R8A8UIntNormalized, drawingSession.Dpi))
{
var cropEffect = new CropEffect
{
Source = bitmap,
SourceRectangle = cropRect,
};
drawingSession.DrawImage(cropEffect);
}
ResultImage.Source = imageSource;
Note that I'm not Win2D expret and someone more knowledgeable might want to make corrections to this code.
I have a scene with 2 renderers sized exactly the same and put on top of each other sharing the same Perspective Camera like this:
var renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(Params.win.w, Params.win.h);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = '-9999';
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(Params.win.w, Params.win.h);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
cssRenderer.domElement.style.zIndex = '-9998';
document.body.appendChild(cssRenderer.domElement);
var cssScene = new THREE.Scene();
//animate loop
renderer.render(scene, camera);
cssRenderer.render(cssScene, camera);
CSS Objects can be placed directly over objects in the WebGL Scene simply by referencing their positions and setting the position of the CSS Objects.
However when I add this effect:
var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (Params.win.w), 1 / (Params.win.h));
effectFXAA.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.setSize(Params.win.w, Params.win.h);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(effectFXAA);
And call the composer to render instead like this composer.render();
My CSS Objects are no longer placed correctly.
The perspective is off since zooming will slide the CSS Objects around while the WebGL Objects retain their positions.
Any idea why the extra shader passes might be changing the perspective in the WebGL rendering resulting in the CSS Objects not staying aligned properly and sliding around?
So I figured out that despite the fact that only the composer is calling render, the original renderer also needs to have it's size reset in whatever resize method you have.
The composer is based on the original renderer, and I had commented out the resizing of this object and only resized the composer.
This is something I must have overlooked, hope this helps others!
camera.aspect = Params.win.w / Params.win.h;
camera.updateProjectionMatrix();
//MUST ALSO UPDATE RENDERER SIZE
renderer.setSize(Params.win.w, Params.win.h);
cssRenderer.setSize(Params.win.w, Params.win.h);
//composer
effectFXAA.uniforms['resolution'].value.set(1 / Params.win.w, 1 / Params.win.h);
composer.setSize(Params.win.w, Params.win.h);
I use Dojo Toolkit 1.7.2 from http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
I need to show scrollable (with help touch) content inside dialog. Also, if possible, I will need to have transition between views inside dialog like at mobile too.
What I do (simplified version of code):
var dialog = new Dialog();
var view = new ScrollableView({
selected: true
});
//add some content inside view. Content heigh is greater than height of dialog.
If I do this, the dialog tries to fit the whole height of the content.
Next attempt:
var dialog = new Dialog({
style: {
width: 600,
height: 400
}
});
or
dialog.resize({w: 600, h: 400});
Now dialog has fixed height, but inner ScrollableView instance won't scroll to bottom of its content.
When I dig into the source, I find that ScrollableView inherits from dojox/mobile/_ScrollableMixin which inherits from dojox/mobile/scrollable.
The resize() function of dojox/mobile/scrollable uses window height in order to calculate scrolling functionality.
Is there some way to have what I need without implementating my own version of ScrollableView?
Solution:
var dialogRect = domGeometry.getMarginBox(dialog.domNode);
var headerRect = domGeometry.getMarginBox(dialog.titleBar);
var containerNodePaddingTop = domStyle.get(dialog.containerNode, "paddingTop");
var containerNodePaddingBottom = domStyle.get(dialog.containerNode, "paddingBottom");
var viewHeight = dialogRect.h - headerRect.h - containerNodePaddingTop - containerNodePaddingBottom;
var view = new ScrollableView({
selected: true,
height: viewHeight.toString() + "px"
});
// or
// view.set("height", viewHeight.toString() + "px");
Fixed it this way:
var Name = 'yourdialogid';
dojo.query("#"+Name+" .dijitDialogPaneContent").forEach(function(node, index, arr){
dojo.style(node,"overflow","auto");
dojo.style(node,"height",(dojo.position(dijit.byId(Name).domNode).h-80)+"px");
});
I can't seem to figure out how to do subject.
What I would like is to have some buttons which are not round-rect buttons.
The iPad AppStore has e.g. the search controls which mimics a dropdown known from e.g. the web select box or dropdown from Windows.
How do I create a button that looks more like a UIBarButtonItem than a RoundRect UIButton, and still being able to place it anywhere?
I'm working in MonoTouch, but answers can come in any flavour, how to do it through Interface builder or programmatically in objective-c or MonoTouch, or even just a pseudo description - im just hoping to get a hint.
Hope someone out there can lead me in the right direction...
/Anders
Just create a custom button. Here's an example to create a real ugly custom button using some features of UIView and CALayer.
var btn = UIButton.FromType(UIButtonType.Custom);
btn.Frame = new RectangleF(100, 100, 150, 30);
btn.SetTitle("Button", UIControlState.Normal);
// Custom backround image.
btn.SetBackgroundImage(UIImage.FromFile("./images/barbuttonbackground.png"), UIControlState.Normal);
// Custom border color.
btn.Layer.BorderColor = UIColor.Orange.CGColor;
// Custom border width.
btn.Layer.BorderWidth = 2.0f;
// Custom rounded corners (does not really work well together with the background image).
btn.Layer.CornerRadius = 10.0f;
// Transparency.
btn.Alpha = 0.6f;
window.AddSubview(btn);
Adjust it to your needs. If you want to have your buttons look differently, go ahead.
There are some custom controls in the web that you can use for your purpose, e.g. MAConfirmButton which replicates the App Store's "Buy Now" buttons.
Heres my sample of how I do it in MonoTouch at the moment.
Since i'm not using colors I have commented out the section with the colorlayer - but kept it for reference.
public static UIButton GetNewButton(RectangleF frame)
{
var btn = UIButton.FromType(UIButtonType.Custom);
btn.Frame = frame;
btn.Layer.BorderWidth = 1.0f;
btn.Layer.BorderColor = UIColor.FromRGB(200,200,200).CGColor;
btn.Layer.CornerRadius = 4.0f;
btn.SetTitleColor(UIColor.Black, UIControlState.Normal);
btn.TitleLabel.TextAlignment = UITextAlignment.Right;
btn.TitleLabel.BackgroundColor = UIColor.Clear;
btn.Layer.NeedsDisplayOnBoundsChange = true;
SetupLayers(btn);
return btn;
}
private static void SetupLayers(UIButton btn){
CAGradientLayer bevelLayer = new CAGradientLayer();
bevelLayer.Frame = new RectangleF(new PointF(0,0), btn.Frame.Size);
bevelLayer.Colors = new CGColor[]{UIColor.White.CGColor, UIColor.FromRGB(218,218,218).CGColor};
bevelLayer.CornerRadius = 4.0f;
bevelLayer.NeedsDisplayOnBoundsChange = true;
/* CALayer colorLayer = new CALayer();
colorLayer.Frame = new RectangleF(0f,1f, btn.Frame.Width, btn.Frame.Height -2);
colorLayer.BorderColor = UIColor.FromWhiteAlpha(0, 0.1f).CGColor;
colorLayer.BackgroundColor = UIColor.FromRGBA(0.220f, 0.357f, 0.608f, 1).CGColor;
colorLayer.BorderWidth = 1.0f;
colorLayer.CornerRadius = 4.0f;
colorLayer.NeedsDisplayOnBoundsChange = true;
*/
CAGradientLayer colorGradient = new CAGradientLayer();
colorGradient.Frame = new RectangleF(0f,1f, btn.Frame.Width, btn.Frame.Height -2);
colorGradient.Colors = new CGColor[]{UIColor.FromWhiteAlpha(1f, 0.1f).CGColor, UIColor.FromWhiteAlpha(0.2f, 0.1f).CGColor/*, null*/};
colorGradient.Locations = new NSNumber[]{NSNumber.FromFloat(0.0f), NSNumber.FromFloat(1.0f)};
colorGradient.CornerRadius = 4.0f;
colorGradient.NeedsDisplayOnBoundsChange = true;
btn.Layer.AddSublayer(bevelLayer);
// btn.Layer.AddSublayer(colorLayer);
btn.Layer.AddSublayer(colorGradient);
btn.BringSubviewToFront(btn.TitleLabel);
}