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.
Related
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:
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
Can I change the scrollregion on a Python turtle canvas? I want the drawing to move with it, not just the coordinates to shift. The appearance I'm going for is side-scroller like, where the screen's display region moves to center the turtle onscreen.
I've tried using turtle.setworldcoordinates(llx, lly, urx, ury), but, from the documentation, "This performs a screen.reset()". I've also looked at this SO question , but this involves scroll bars, will not center the turtle easily, and has a limited canvas space. What I'm looking for is something that:
Moves the display region to center the turtle
Also moves the drawing
Has an infinite scroll region
does not display scroll bars
can be called quickly with a function
My best guess would be to be able to have an infinite scrolled canvas somehow, then hide the scroll bars and set them according to turtle position.
Is this possible in Python 2.7? I don't mind if it uses tkinter as well.
EDIT: 6-3-15
I found the canvas.xview and canvas.yview functions, but they don't seem to work once I define screen = turtle.TurtleScreen(canvas), and TurtleScreen has no xview or yview functions. I can't seem to make this work.
Then I found turtle.ScrolledCanvas(). This seems ideal except it has no methods for setting scroll manually from the program. Can I set the scroll manually on a turtle.ScrolledCanvas()???
The position of a canvas can be changed without a reset using canvas.place() method. It will move the turtle and the drawings too, so the turtle needs to be relocated after every move.
The next code moves the canvas with Left and Right arrows and draws a circle with Space, while keeping the turtle in the center. No ScrolledCanvas needed, just a very large standard canvas:
import turtle
import Tkinter as tk
def keypress(event):
global xx, canvas, t, speed
ev = event.keysym
if ev == 'Left':
xx += speed
else:
xx -= speed
canvas.place(x=xx)
t.setposition((-canvas.winfo_width() / 4) - (xx + 250), 0)
return None
def drawCircle(_):
global t
t.pendown()
t.fillcolor(0, 0, 1.0)
t.fill(True)
t.circle(100)
t.fill(False)
t.fillcolor(0, 1, 0)
t.penup()
# Set the main window
window = tk.Tk()
window.geometry('500x500')
window.resizable(False, False)
# Create the canvas. Width is larger than window
canvas = turtle.Canvas(window, width=2000, height=500)
xx = -500
canvas.place(x=xx, y=0)
# Bring the turtle
t = turtle.RawTurtle(canvas)
t.shape('turtle') # nicer look
t.speed(0)
t.penup()
t.setposition((-canvas.winfo_width() / 4) - (xx + 250), 0)
# key binding
window.bind('<KeyPress-Left>', keypress)
window.bind('<KeyPress-Right>', keypress)
window.bind('<KeyPress-space>', drawCircle)
drawCircle(None)
speed = 3 # scrolling speed
window.mainloop()
Having a real infinite scrolling would require to redraw every item in the canvas every time with the required offset, instead of actually moving or scrolling the canvas. Functions like create_image() can give the illusion of movement with static backgrounds, but it resets the drawings.
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.
I have a line chart that I've created with gRaphael. It has axes and tick marks, but I'd like to have grid lines. Is there built-in way to achieve this or an add on library that can help me?
gRaphael does not have a built-in way to add grid lines, but it is pretty easy to draw them, either by editing the source code or manipulating your graph object after you create it.
I had found an extension called RaphAlytics and used its drawGrid() function in cases where I needed a bounding box with a grid.
You can adapt this function for any gRaphael graph as needed to draw gridlines. On a line chart, I needed to draw horizontal gridlines that were aligned with the left axis marks on a line chart, so I used the function as an example like this:
// Draw horizontal gridlines
for (var i = 0; i < g.axis[1].text.items.length; i++) {
r.path(['M', x, g.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
stroke : '#EEE'
}).toBack();
}
Here's a working fiddle to illustrate that example: http://jsfiddle.net/KM3BB/1/
I tried doing this yesterday. Short answer: gRaphaël can't do this for you with any linechart options nor axis options, you have to do-it-yourself with Raphaël.
Something like:
var r = Raphael("holder"), txtattr = { font: "12px sans-serif" };
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5');
r.linechart(10, 10, 300, 220, x, [y, y2, y3]);
This means under my linechart draw a path which starts from 15,200.5 and draws a straight line to 310,200.5 moves to 15,180.5 and draws a line to 310,180.5. Don't ask me why but the .5 is important for getting the stroke to actually be 1px wide and solid black. Otherwise it seems to get aliased to 2px wide at 50% opacity. You have to calculate the exact placement in regards to your linechart yourself.
You can also play with the path function in the playground by changing r to paper.
You might also consider looking at Google Chart Tools if your looking for things like defining the exact range of the axis (as opposed to just the min and max of the input).