clipping

Drag a zoomed image within a div clipping mask using jQuery draggable?

浪子不回头ぞ 提交于 2019-12-03 04:36:31
问题 I'm creating an interface to allow a user to zoom in on an image and drag the zoomed version around within a clipping mask div. I have a div 200px by 200px that I set overflow: hidden on. Then I load a std img ( <img src="etc"> ) into the div that is, say, 1000px by 1000px . Then I use jQuery $("#my-image").draggable({ containment: [-85,83,99,222] }); The numbers are hard coded. So far I can only find them by trial and error... The problem is that each time I make a change to the page (Ie

IE 8 absolute positioned element outside its parent clipping problem

不想你离开。 提交于 2019-12-02 22:53:00
I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools. I tried z-index, tried explicitly setting overflow:visible, no luck at all. UPDATE: I found out that the problem is caused by a filter defined in the parent div like this: -ms

Subtract one circle from another in SVG

吃可爱长大的小学妹 提交于 2019-12-02 21:57:11
I'm trying to find a way to subtract one shape from another in SVG, creating a hole in the middle or a bite out of the side of it. Kind of like a clipping path, but instead of showing the intersection, I want to show one of the parts outside the intersection. One solution involved using Adobe Flex, but I did not know how to implement it properly. I understand that there is a way to do this in Inkscape using boolean path operations, but I want to keep the circle elements the way they are instead of changing them into path elements. <defs> <subtractPath id="hole"> <circle r="50" cx="100" cy="100

Multiple Clipped Rects to Create Collage in Core Graphics

断了今生、忘了曾经 提交于 2019-12-02 19:48:06
I am creating a collage combined with elements from other images. Here is some ASCII art to explain what I am doing: Given images A, B and C, AAA, BBB, CCC AAA, BBB, CCC AAA, BBB, CCC I take part of A, part of B and part of C as columns: Axx, xBx, xxC Axx, xBx, xxC Axx, xBx, xxC ...and combine them in one image like this: ABC ABC ABC where the first 1/3rd of the image is a colum of A's pic, the middle is a column of B's pic and the last is a column of C's pic. I have some code written but it is only showing the first column and not the rest… I think I have to clear the clipping somehow, bt I

Drag a zoomed image within a div clipping mask using jQuery draggable?

为君一笑 提交于 2019-12-02 18:53:29
I'm creating an interface to allow a user to zoom in on an image and drag the zoomed version around within a clipping mask div. I have a div 200px by 200px that I set overflow: hidden on. Then I load a std img ( <img src="etc"> ) into the div that is, say, 1000px by 1000px . Then I use jQuery $("#my-image").draggable({ containment: [-85,83,99,222] }); The numbers are hard coded. So far I can only find them by trial and error... The problem is that each time I make a change to the page (Ie insert another element above my container div) the page size changes and my hard coded [x1, y1, x2, y2]

RectangleGeometry with relative dimensions… how?

谁说胖子不能爱 提交于 2019-12-01 16:17:11
I'm trying to replicate the nowadays so fashionable "reflex" effect on a controltemplate for buttons I'm creating. The basic idea is to create a rectangle with a gradient fill from white to transparent and then clip some of that semi-transparent rectangle with a rectanglegeometry. The problem is that I don't know how to define a relative rectangle geometry. I kind of worked around width by defining a large value (1000), but height is a problem. For example, it works good for buttons that have a 200 height, but doesn't do anything for smaller buttons. Any ideas? <Rectangle RadiusX="5" RadiusY=

Converting images to PDF with iTextSharp preserve clipping path

江枫思渺然 提交于 2019-12-01 12:57:01
We're looking to convert images in bulk to PDF, programmatically. So far it looks like we will be using iTextSharp but we have an issue with JPG images with clipping path. We are using the following code in our tests: using (FileStream fs = new FileStream(output, FileMode.Create, FileAccess.Write, FileShare.None)) { using (Document doc = new Document()) { using (PdfWriter writer = PdfWriter.GetInstance(doc, fs)) { doc.Open(); iTextSharp.text.Image image = iTextSharp.text.Image.GetInstance(source); image.SetAbsolutePosition(0, 0); doc.SetPageSize(new iTextSharp.text.Rectangle(0, 0, image.Width,

Understanding Android Canvas Clipping

与世无争的帅哥 提交于 2019-12-01 05:44:24
I am having trouble finding an answer to this. Consider the clipping code below: boolean is_ok = mycanvas.clipRect(clip_left, clip_top, clip_right+1, clip_bottom+1); mycanvas.getClipBounds(clipRect); if (!is_ok || clipRect.left != clip_left || clipRect.top != clip_top || clipRect.right != clip_right+1 || clipRect.bottom != clip_bottom+1) { Log.i("DEBUG", "setClipping failed"); } When the clip bounds are returned they don't match what was just set. For example if clip_left, clip_top, clip_right, clip_bottom are (100,50,109, 59) then I would expect the clipping bounds to be (100, 50, 110, 60)

WPF clipping even when no clipping is desired - how to turn it off?

我只是一个虾纸丫 提交于 2019-12-01 02:49:16
I need to float out some content out of the ListBox as specified in a DataTemplate for an ListBox.ItemTemplate . I am using RenderTransform but the content gets clipped on ListBox boundaries. ClipToBounds is False for the entire visual tree. I have read somewhere that WPF internally performs some clipping even when none is specified with dedicated clipping properties. I have also found out that using Canvas can sometimes cure the clipping problem but it does not help here. How can I overcome this problem? Here is some XAML that I want to fix. Please note the entire left part of rectangle is

How can I clip INSIDE a shape in HTML5 canvas?

那年仲夏 提交于 2019-11-30 13:03:24
问题 I've found a number of examples for clipping the outside region of an arc (e.g.: this example). I can't seem to figure out how to clip inside the arc shape instead. Here is an example of how I'm currently clipping the outside region, which is essentially the opposite of what I want: ctx.save(); ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2, false); ctx.clip(); ctx.beginPath(); ctx.lineWidth = 1; ctx.shadowBlur = 10; ctx.shadowOffsetX = shadowOffset; ctx.shadowColor = '#000000'; ctx