raphael multiple transformations on element - raphael

I'm trying to draw machinery from the bird's eye perspective.
Therefore, I draw rectangles. Theese rectangles may have angles (e.g. 90°, 270°). So i apply rotation transformation onto them. This way i can draw the whole plant.
Now if I apply scaling transformation onto the set, the elements are scaling. But the rotation transformations I previously applied, is running backwards.
Copy this to raphael's playground to see what i mean.
var rect1 = paper.rect(50,50,200,100).attr({fill: "green"});
var rect2 = paper.rect(250,50,200,100).attr({fill: "green"});
var rect3 = paper.rect(550,50,200,100).attr({fill: "green"});
rect3.transform("r90,550,50");
var set = paper.set();
set.push(rect1,rect2,rect3);
set.animate({'transform':"S0.5,0.5,50,50"}, 2000);
What I want now, is to prevent reversing the rotation and that the third elements alignment to second one stays as it is after rotation (some kind of "L").
Thanks in advance!

Allright, got it myself. Using "..." solved my problem.
var rect1 = paper.rect(50,50,200,100).attr({fill: "green"});
var rect2 = paper.rect(250,50,200,100).attr({fill: "green"});
var rect3 = paper.rect(550,50,200,100).attr({fill: "green"});
rect3.transform("r90,550,50...");
var set = paper.set();
set.push(rect1,rect2,rect3);
set.animate({'transform':"...S0.5,0.5,50,50"}, 2000);
Tried it this way yesterday, but somehow it didnt work. Today, its working just fine =)

Related

How to use IDirectManipulationViewport::SetViewportRect?

Here is the slightly modified Direct Manipulation Sample app from windows 8 classic samples. I removed all elements except the single Viewport and it's Content (checkered texture). When I set IDirectManipulationVewport::SetViewportRect() with offset to the origin (e.g. SetViewportRect(100, 100, client_rect.right, client_rect.bottom) I expect the content to be aligned at 100, 100. However the content is always aligned at the window (parent IDirectCompositionVisual) origin.
I also tried IDirectManipulationViewport::SetViewportTransform() with translation matrix, but the result is the same.
What is the correct way of positioning the viewport in the visual not at the origin? Is it possible? Or I should create another child IDirectCompositionVisual with viewport, position it with SetOffsetX/Y and add content to it?
Here is a link to documentation
UPD after Rita Han's answer:
If you make just the following modifications to the sample:
//modify viewport rectangle in CAppWindow::_SizeDependentChanges()
_viewportOuterRect.left = 100;
_viewportOuterRect.top = 100;
//align content at the center in HRESULT CAppWindow::_InitializeManagerAndViewport()
primaryContentOuter->SetHorizontalAlignment(DIRECTMANIPULATION_HORIZONTALALIGNMENT_CENTER);
primaryContentOuter->SetVerticalAlignment(DIRECTMANIPULATION_VERTICALALIGNMENT_CENTER);
//change zoom boundaries to enable zoom out
hr = primaryContentOuter->SetZoomBoundaries(0.1f, 5.0f);
If you zoom out, you will see the following:
red - actual incorrect viewport rectangle (_viewportOuterRect.left and top coordinates are ignored, however the size is changed).
green - expected viewport rectangle.
blue - expected content aligned position.
This sample works for me you can have a try. The related code I modified for your case:
::GetClientRect(_hWnd, &_viewportOuterRect);
_viewportOuterRect.left = 100;
_viewportOuterRect.top = 100;
if(SUCCEEDED(hr))
{
hr = _viewportOuter->SetViewportRect(&_viewportOuterRect);
}
The output:

Swift Imageview Circular

I am trying to get my profile picture to display as a circular view using swift 3. This is my code:
self.view.layoutIfNeeded()
self.profileImageView.image = image
self.profileImageView.layer.cornerRadius = self.profileImageView.frame.width/2.0
self.profileImageView.clipsToBounds = true
self.profileImageView.layer.masksToBounds = true
It works well on square images. But once the image is not square this doesn't display the image as circular. What do I need to do in order to get it to be display the imageview as a circle? Or is this feature only limited to square images?
Your code is making the corner radius half the width. This works fine when height == width (so radius also == height/2), but otherwise it won't work.
To fix this, add constraints to make your profileImageView square, then set the profileImageView.contentMode = .aspectFill.
Add self.view.layoutIfNeeded() line before you are set corner radius.
self.view.layoutIfNeeded()
self.profileImageView.layer.cornerRadius = self.profileImageView.frame.width/2.0
self.profileImageView.clipsToBounds = true

Is there a way to crop an image with Raphael.js?

I am trying to fit part of in image into a raphael object.
Scaling the image works perfectly, but when I try to translate it, it ends up returning the wrong part of the image.
I am scalling the image using "S1.5,1.5,0,0", that is, I am not scalling it around the middle point, so scalling it works beautifully.
But, as I try to offset the image, the resulting image fragment is offset.
Maybe there's another way to do it in Raphael.
What I am trying to accomplish is use a fragment of an image as an image object in Raphael and I need to copy a rectangle from an external image into it.
Something like:
copy original image fragment (x0 = 100, y0 = 120, width = 300, height = 250) to the image object, which has dimensions (width = 150 and 125).
I have been looking for an answer for some time, but nothing that really helps.
Edit:
The fiddle is
/w9XSf/12/
In the example above, I am grabbing a 100 x 60px area from the original image (which is 612 x 325px), and trying to display it on the output image, which is 500 x 300px.
The scale works, but the area it is grabbing is not the one I need.
It does work, if I grab from 0, 0.
But, as I move from the top left corner of the originsl image, the actual area it gives me is farther away from what I actually need :(.
Any ideas? (I have already tried swapping the order of the T and the S in the transform string).
Thanks.
Using Raphael, the following code creates a container, to be used to display an image, duly translated and scaled. A live version of the solution is also available at http://jsfiddle.net/s6DHf/. This is a forked version of the actual problem.
var outputW = 525,
outputH = 300;
sourceX = 100,
sourceY = 100,
scaleX = 1.5,
scaleY = 1.5,
paper = new Raphael("image", outputW, outputH),
bgImg = paper.image("http://cdn3.whatculture.com/wp-content/uploads/2013/04/MAN-OF-STEEL-e1365755036183.jpg", 0, 0, 350, 200)
.transform("t" + sourceX + "," + sourceY + "s" + scaleX +","+ scaleY + ",0,0");
Check the use of "s" and "t" (in lowercase), which denotes relative scaling and relative translation, respectively. The problem was due to the use of "S" and "T" (in uppercase), which is all about absolute scaling and translation, respectively.
Raphael reference: http://raphaeljs.com/reference.html#Element.transform
Hope this helps.

SetViewBox moving the paper

I am using the setViewBox() function in Raphael 2. The width and height is multiplied by a value like (1.2, 1.3 ...). This changes the magnification/ zooming properly but the x and y which I have given as 0,0 makes the paper display its contents after some offset. If i modify the x and y to some positive value after the rendering( using firebug!!) then the top left of the paper moves back and above to its right position. I want to know how will the value be calculated. I have no idea about how the x,y affect the viewbox. If anybody can give me any pointers for this it will be a real help.
I have tried giving the difference between the width/ height divided by 2. Also I must mention that I am not rendering an image but various raphael shapes e.g. rects, paths text etc. in my paper.
Looking forward to some help!
Kavita
this is an example showing how to calculate the setViewBox values, I included jquery (to get my SVG cocntainer X and Y : $("#"+map_name).offset().left and $("#"+map_name).offset().top) and after that I calculated how much zoom I need :
var original_width = 777;
var original_height = 667;
var zoom_width = map_width*100/original_width/100;
var zoom_height = map_height*100/original_height/100;
if(zoom_width<=zoom_height)
zoom = zoom_width;
else
zoom = zoom_height;
rsr.setViewBox($("#"+map_name).offset().left, $("#"+map_name).offset().top, (map_width/zoom), (map_height/zoom));
did you put the center of your scaling to 0,0 like:
element.scale(1.2,1.2,0,0);
this can scale your element without moving the coordinates of the top left corner.

Raphael creating circle relative to parent

I am making a clock using Raphael with my own. I created a big circle which is for clock, and i need to create the other three bullets for 12,3,6,9 hrs. now how can i create the circle, which is child of the big one. (how can i append the small circles to big one)?
i wrote this function to made that, but no use. it makes the small circles as absolute. how can i create the small circles as relative to parent?
my function :
window.onload = function(){
var paper = new Raphael ('clock',500,500);
var circle = paper.circle(250,250,200);
circle.node.id="clock";
circle.attr({
stroke:"#f00"
})
var num = new Raphael(document.getElementById('clock'),400,400);
var graydot = num.circle(10,100,5);
graydot.attr({fill:"#000"});
}
any one can help me? or let me know about parent child relation ship of svg... pls!
I don't think that Raphael caters for hierarchies of objects in the manner you speak of. The best you can do is group objects together into sets if you want to treat the objects as one.
As for creating the other three nodes, you can clone your first dot and rotate 90 degrees around the centre of your clock. Do that three times and you'll have your clockface.
Here's a fiddle that illustrates the idea.
First of all, you don't have to declare multiple different Raphael instances. Just use one on top of which you build your clock.
Moreover, there is no "parent child relation ship of svg" your two shapes are siblings( only if you insert them into the same Raphael instance).
The only thing that they have in common is that they are attached to the same svg - take a look at the resulting sgv :
<svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="overflow-x: hidden; overflow-y: hidden; position: relative; ">
<desc>Created with Raphaël 2.0.0</desc>
<defs></defs>
<circle cx="250" cy="250" r="200" fill="none" stroke="#ff0000" id="clock" style=""></circle>
<circle cx="10" cy="100" r="5" fill="#000000" stroke="#000" style=""></circle>
</svg>
What I'm trying to say is that it's normal for the circle to be positioned "absolute".
If you want to position the 4 circles relative to the big one, you should calculate their centers manually :
var paper = new Raphael('clock', 500, 500);
var circle = paper.circle(250, 250, 200);
var graydot = paper.circle(circle.attrs.cx - circle.attrs.r + 10, circle.attrs.cy, 10 );
Here's a live example : http://jsfiddle.net/gion_13/4p7Np/