Using different texture on Cube created with HelixWpf toolkit - wpf

I've a simply box as follows:
BoxVisual3D box = new BoxVisual3D();
box.Width = Convert(panel.Width);
box.Length = Convert(panel.Length);
box.Height = Convert(panel.Thickness);
box.Center = new Point3D(quotaX, quotaY, quotaH);
string matType = panel.Material == SvBaseboardMaterial.MDF ? "mv-pannello-mdf.jpg" : "mv-pannello-base.jpg";
box.Material = MaterialHelper.CreateImageMaterial(new BitmapImage(new Uri(#"" + matType, UriKind.Relative)), 1, false);
viewport.Children.Add(box);
I would like to apply different texture on each side of the box. Any hints? there're lack of information on the project site

You need to use TextureCoordinates on each side of your cube to sample different part of your image.

Related

Hide some points in Oxyplot Line series

I need to show/hide some data points in oxyplot line series. Is it possible?
Though some markers are invisible, the line should go through the invisible markers.
You could make use of two series to achieve this. The first one would draw the complete points (and line) without the marker. The second series would draw the visible points(with marker,but with line style set to none). For Example
DataPoint[] points = new DataPoint[]
{
new DataPoint(1,12),
new DataPoint(2,10),
new DataPoint(3,9),
new DataPoint(4,13),
new DataPoint(5,14),
new DataPoint(6,10)
};
var seriesComplete = new OxyPlot.Series.LineSeries();
seriesComplete.Points.AddRange(points);
var seriesVisible = new OxyPlot.Series.LineSeries();
seriesVisible.Points.AddRange(points.Where(x => x.Y % 2 == 0));
seriesVisible.MarkerFill = OxyColors.Blue;
seriesVisible.MarkerType = MarkerType.Circle;
seriesVisible.MarkerSize = 10;
seriesVisible.LineStyle = LineStyle.None;
this.MyModel.Series.Add(seriesComplete);
this.MyModel.Series.Add(seriesVisible);
Result is attached as image

Geometry.Combine doesn't work for curves

I want to combine 2 curves like this:
Then here is my code:
// Create a path to draw a geometry with.
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
var gmy1 = (StreamGeometry)StreamGeometry.Parse("M100,100C110,118.333333333333 138.333333333333,206.666666666667 160,210 181.666666666667,213.333333333333 205,123.333333333333 230,120 255,116.666666666667 280,186.666666666667 310,190 340,193.333333333333 396.666666666667,156.666666666667 410,140 423.333333333333,123.333333333333 393.333333333333,98.3333333333333 390,90");
var gmy2 = (StreamGeometry)StreamGeometry.Parse("M180,241.25L180,241.25 230,290 300,246.66667175293 330,160");
var gmy = Geometry.Combine(gmy1, gmy2, GeometryCombineMode.Union, null);
myPath.Data = gmy;
// Add path shape to the UI.
this.panel1.Children.Add(myPath);
But the result is this:
How to combine the curves in WPF?
And because of the project limitation, we have to implement this without layout and xaml. That means we need the result type is Geometry.
More general than concatenating path strings:
If you have a set of arbitrary Geometries and want to group them, use a GeometryGroup:
Geometry gmy1 = ...;
Geometry gmy2 = ...;
var gmy = new GeometryGroup();
gmy.Children.Add(gmy1);
gmy.Children.Add(gmy2);
myPath.Data = gmy;
Easy:
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
var gmy1 = (StreamGeometry)StreamGeometry.Parse("M100,100C110,118.333333333333 138.333333333333,206.666666666667 160,210 181.666666666667,213.333333333333 205,123.333333333333 230,120 255,116.666666666667 280,186.666666666667 310,190 340,193.333333333333 396.666666666667,156.666666666667 410,140 423.333333333333,123.333333333333 393.333333333333,98.3333333333333 390,90");
var gmy2 = (StreamGeometry)StreamGeometry.Parse("M180,241.25L180,241.25 230,290 300,246.66667175293 330,160");
var gmy = (StreamGeometry)StreamGeometry.Parse(gmy1.ToString() + gmy2.ToString());
myPath.Data = gmy;
// Add path shape to the UI.
this.panel1.Children.Add(myPath);
The path definition language is a language. Use it as one. StreamGeometry.ToString() unparses a Geometry back to its Path Definition Language representation, which you can then merge with another one.
Note that this works because each starts with a M for Move command: It starts a new line. I don't think there's any realistic case where you'd run into any trouble with that (and it won't let you start with L for Line), but theory's not exactly my strongest subject.
Just add both of them to a Grid or Canvas, Combine does a intersecting combination, you just seem to want to overlay them. Alternatively add both of them to a GeometryGroup and add that to your panel.

clipped image not visible on Tablet EaselJS + sourceRect used

i am working on a Mobile project (iPad with iOS 8.0.2);
I want to make clipping of my immage in order to display less from it.
When displaying on PC it works perfectly well, while we test it on the tablet the clipped image is not displayed at all.
Do you have any suggestions
this.background = new createjs.Bitmap('some_image.png');
//create a clipping of drawn image!
var dims = this.background.getBounds();
this.background.sourceRect = new createjs.Rectangle(0, 15, dims.width, dims.height);
this.background.x = 248;
this.background.y = 86;
this.stage.addChild(this.background);
I met the same trouble like this.I have given up using Bitmap to clipping the image. I have found another solution ,here is "
easeljs splitting an image into pieces
".Good luck.
I am working out, the code like this:
var img, stage;
function init() {
//wait for the image to load
img = new Image();
img.onload = handleImageLoad;
img.src = "./res/image.png";
}
function handleImageLoad(evt) {
// create a new stage and point it at our canvas:
stage = new createjs.Stage("canvas");
// create a new Bitmap, and slice out one image from the sprite sheet:
var bmp = new createjs.Bitmap(evt.target).set({x:200, y:200});
bmp.sourceRect = new createjs.Rectangle(916, 101, 84, 84);
//x,y,width,height
stage.addChild(bmp);
stage.update();
}
This is the example:
https://github.com/CreateJS/EaselJS/blob/master/examples/Filters_animated.html

Silverlight programmatically binding from C# code

I have a Canvas and a custom control called BasicShape
After I add two BasicShape controls on the Canvas, I want programatically to connect them with a Line and I want to do this using the Binding class.
I want to connect the Bottom side of first shape with the Top side of the second one.
Initially i tried to connect only the X1 property of the Line with the Canvas.Left attached property of the fisrt BasicShape but this doesn't work. Line X1 property is not updated when I change the Canvas.SetLeft(basicShape1) value
BasicShape bs1 = canvas.Children[0] as BasicShape;
BasicShape bs2 = canvas.Children[1] as BasicShape;
Line line = new Line();
line.StrokeThickness = 1;
line.Stroke = new SolidColorBrush(Colors.Red);
line.X1 = 100;
line.Y1 = 100;
line.X2 = 200;
line.Y2 = 200;
canvas.Children.Add(line);
Binding b = new Binding("AnyName");
b.Source = bs1;
b.Path = new PropertyPath(Canvas.LeftProperty);
line.SetBinding(Line.X1Property, b);
I'm trying to create a simple UML diagram like this one
alt text http://www.invariant-corp.com/omechron/images/uml_diagram.gif
I just did it other way, without binding
This will be a permanent link
http://calciusorin.com/SilverlightDiagrams/
I decided to manually update all lines on shape Location or Size changed
private void basicShape_BasicShapeLocationSizeChangedEvent(BasicShape sender)
{
foreach (CustomLine customLine in lines)
{
if (customLine.StartFromShape(sender))
{
Point point = sender.GetLinePoint(customLine.GetStartSide());
customLine.SetStartPoint(point);
}
if (customLine.EndInShape(sender))
{
Point point = sender.GetLinePoint(customLine.GetEndSide());
customLine.SetEndPoint(point);
}
}
}
I am sure that the Binding solution is more elegant. Anyone interested in my solution, with SL Controls that can be resized, connected with lines, just contact me.

Silverlight specific Image shifting to the right

I am generating a set images to form a human body so that I can use for a physics engine.
The images generated are in a specific user control in where I set the dimentions and co-ordinates of each image. That usercontrol is then loaded in another user control but for some reason when the images are loaded, one specific image which I named (rightBicep) is shifting to the right. Here is a screenshot :
alt text http://img193.imageshack.us/img193/592/imageshift.jpg
I illustrated the positions of the images with dotted lines, the green dotted line is refering to where the image should be located, and the red dotted line is where the image is being shown.
The weird thing is the image beneath it (called rightForearm) take's it's LeftPosition from it, and when during debugging they have the exact same leftProperty value. Here's the syntax :
public void generateRightBicep(string imageUrl)
{
rightBicep = new Image();
rightBicep.Name = CharacterName + "rightbicep";
Uri imageUri = new Uri(imageUrl, UriKind.Relative);
LayoutRoot.Children.Add(rightBicep);
rightBicep.Source = new BitmapImage(imageUri);
rightBicep.ImageOpened += new EventHandler<RoutedEventArgs>(bodyPart_ImageOpened);
}
public void rightBicepLoaded()
{
var bi = waitTillImageLoad(rightBicep.Name);
rightBicep.Height = elbowToArmpit + (2 * palm);
rightBicep.Width = ratio(bi.PixelHeight, bi.PixelHeight, rightBicep.Height); // to be determined
Vector2 topVector;
topVector.X = (float)(Convert.ToDouble(torso.GetValue(Canvas.LeftProperty)) - palm);
topVector.Y = (float)(Convert.ToDouble(neck.GetValue(Canvas.TopProperty)) + neck.Height);
if (!faceRight)
{
perspectiveVectorHeight(ref topVector, ref rightBicep, torso.Width);
rightBicep.Width = ratio(bi.PixelHeight, bi.PixelHeight, rightBicep.Height);
}
rightBicep.SetValue(Canvas.LeftProperty, Convert.ToDouble(topVector.X));
rightBicep.SetValue(Canvas.TopProperty, Convert.ToDouble(topVector.Y));
rightBicep.SetValue(Canvas.ZIndexProperty, rightBicepZindex);
generateRightShoulder();
}
public void generateRightForearm(string imageUrl)
{
rightForearm = new Image();
rightForearm.Name = CharacterName + "rightforearm";
Uri imageUri = new Uri(imageUrl, UriKind.Relative);
LayoutRoot.Children.Add(rightForearm);
rightForearm.Source = new BitmapImage(imageUri);
rightForearm.ImageOpened += new EventHandler<RoutedEventArgs>(bodyPart_ImageOpened);
}
public void rightForearmLoaded()
{
var bi = waitTillImageLoad(rightForearm.Name);
rightForearm.Height = (elbowToHandTip - handLength) + palm;
rightForearm.Width = ratio(bi.PixelHeight, bi.PixelWidth, rightForearm.Height);
Vector2 topVector;
if (faceRight)
{
topVector.X = (float)(Convert.ToDouble(rightBicep.GetValue(Canvas.LeftProperty)));
topVector.Y = (float)(Convert.ToDouble(rightBicep.GetValue(Canvas.TopProperty)) + rightBicep.Height - palm);
}
else
{
topVector.X = (float)(Convert.ToDouble(leftBicep.GetValue(Canvas.LeftProperty)));
topVector.Y = (float)(Convert.ToDouble(leftBicep.GetValue(Canvas.TopProperty)) + leftBicep.Height - palm);
perspectiveVectorHeight(ref topVector, ref rightForearm, torso.Width);
rightForearm.Width = ratio(bi.PixelHeight, bi.PixelWidth, rightForearm.Height);
}
rightForearm.SetValue(Canvas.LeftProperty, Convert.ToDouble(topVector.X));
rightForearm.SetValue(Canvas.TopProperty, Convert.ToDouble(topVector.Y));
rightForearm.SetValue(Canvas.ZIndexProperty, rightForearmZIndex);
generateRightElbow();
}
Now all the values I am adding together are a group of doubles I preset, and the property faceRight is to dertmine if the human body is facing right or left to determine where the positions of the body parts (since if the right hand looks on the left hand side when the human body turns the other way).
If you notice the rightforearm is taking the leftproperty of the rightbicep, so technically it should display direcrly underneath which it isn't. I also debugged the user control and both have the left property of -3.
PS. I call the methods rightbicepLoaded and rightforearmLoaded when an event is called when all the imageOpened events all have been triggered.
Any ideas on why this is happening?
Found out why , in my method ratio it should take hieght and width, and I put and i put 2 hieghts instead

Resources