标签: image-clipping

我正在移植一个在图形环境中编写的应用程序,允许绘图发生在剪切矩形的边界之外.在Android中有什么办法吗？

我正在尝试将画布绘制操作剪切成弧形楔形.但是,在将剪切路径设置为画布后,我没有得到预期的结果.

为了说明,这是我正在做的事情:

path.reset();

//Move to point #1
path.moveTo(rect.centerX(), rect.centerY());

//Per the documentation, this will draw a connecting line from the current
//position to the starting position of the arc (at 0 degrees), add the arc
//and my current position now lies at #2.
path.arcTo(rect, 0, -30);

//This should then close the path, finishing back at the center point (#3)
path.close();

这是有效的,当我简单地绘制这个路径(canvas.drawPath(path, paint))时,它会绘制如上所示的楔形.但是,当我将此路径设置为画布的剪切路径并将其绘制到其中时:

//I've tried it with and without the Region.Op parameter
canvas.clipPath(path, Region.Op.REPLACE);
canvas.drawColor(Color.BLUE);

我得到以下结果(仅留下楔形以显示参考):

所以它似乎剪切到了它的边界矩形Path,而不是它 …

为了制作Photo Collage Maker,我使用具有基于对象剪辑功能的fabric js.此功能很棒但是剪切区域内的图像无法缩放,移动或旋转.我希望固定位置剪切区域和图像可以根据用户需要定位在固定剪切区域内.

我用Google搜索并找到非常接近的解决方案

var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10,10,150,150);
ctx.rect(180,10,200,200);
ctx.closePath();
ctx.stroke();
ctx.clip();

fabric js canvas上的多个剪辑区域

其中一个剪辑区域的图像出现在另一个剪辑区域中.我怎样才能避免这种情况,或者是否有另一种使用结构js实现此目的的方法.

我想将一个图像的一部分复制到另一个较小的图像中:换句话说,复制一个子矩形.

我有一个Graphics2D对象的源代码,我可以为目标做一个,我知道targetGraphics2D.drawImage(Image img,....),但是如何从sourceGraphics2D获取img？

答案(根据aioobe):源需要是图像而不是Graphics2D.

Image.subImage()是获取源的相关部分的方法.

我可以在raphael.js中使用clip-rect属性显示图像的矩形部分.

你能告诉我如何旋转那个剪裁矩形区域(不是图像).也许我应该使用clipPath svg attr？但它必须是raphael.js解决方案,所以IE的vml也会这样做吗？

我正在努力克服SVG剪辑路径缩放行为.我想缩放剪辑路径以适合它应用的元素大小.我一直在阅读有关clipPath单元的内容,但我无法解决这个问题.

这是一个我没有任何缩放的例子:http://jsfiddle.net/1196o7n0/1/

......和SVG(主要形状和clippath形状完全相同):

<svg width="800" height="600"  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <clipPath id="svgPath">
        <circle r="40" cy="50" cx="50" />
        <circle r="74.576" cy="235" cx="193.949" />
        <circle r="47.034" cy="108.305" cx="426.576" />
        <circle r="43.644" cy="255.763" cx="346.915" />
        <circle r="35.17" cy="82.882" cx="255.39" />
  </clipPath>
  <g fill="#000">
    <circle r="40" cy="50" cx="50" />
    <circle r="74.576" cy="235" cx="193.949" />
    <circle r="47.034" cy="108.305" cx="426.576" />
    <circle r="43.644" cy="255.763" cx="346.915" />
    <circle r="35.17" cy="82.882" cx="255.39" />
  </g>
</svg>

现在,如果我定义一个视图框并使SVG缩放以适合文档的宽度和高度,则剪辑路径似乎不会缩放:http://jsfiddle.net/1196o7n0/2/

我对如何使这项工作有任何想法？我错过了什么吗？

我需要使用自定义形状 SVG 来遮盖图像（它就像一个拱门，如下图所示）。下面是带有 SVG 形状路径的实际代码：

    img {
      clip-path: path('M451.715 154.05C451.79 152.468 451.828 150.88 451.828 149.286C451.828 66.8376 350.683 0 225.914 0C101.145 0 0 66.8376 0 149.286C0 150.88 0.0378114 152.468 0.112874 154.05H0V536H451.828V154.05H451.715Z');
    }

这是原始的 SVG：

<svg width="452" height="536" viewBox="0 0 452 536" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M451.715 154.05C451.79 152.468 451.828 150.88 451.828 149.286C451.828 66.8376 350.683 0 225.914 0C101.145 0 0 66.8376 0 149.286C0 150.88 0.0378114 152.468 0.112874 154.05H0V536H451.828V154.05H451.715Z" fill="#FF0809"/>
</svg>

这似乎可行，但我需要将形状置于图像的中心，并且必须保持其比例（不拉伸）。下面我附上一张图片，其中的细节比文字更能解释。

任何想法？

我觉得我可能需要一些转换器,但这就是我想要做的.我想要一个Image控件(因为它在一个绑定到实际数据的数据模板中),具有以下参数.

• 居中于90x90的空间(没有任何伸展).
• 具有半径为40像素(水平和垂直)的圆形剪裁.
• 如果图像大于9​​0x90,则它应居中于90x90空间内并从中间剪切40x40圆.
• 如果图像<90x90,则应该在90x90空间内居中.剪切圆应该没有效果,因为整个图像包含在剪辑区域内.

我的XAML代码如下.这对于精确90x90的图片(即它们不拉伸,它们使图像居中并且裁剪工作)可以正常工作.对于> 90x90的图像,裁剪工作正常但图像未居中.对于图像<90x90,图像居中但剪切似乎将图像放置在图像内容的左上区域中,因此剪辑剪辑图像的左上部分.

<Style x:Key="ImageStyle">
    <Setter Property="Width" Value="90" />
    <Setter Property="Height" Value="90" />
    <Setter Property="Stretch" Value="None" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Clip">
        <Setter.Value>
            <EllipseGeometry Center="45,45" RadiusX="40" RadiusY="40" />
        </Setter.Value>
    </Setter>
</Style>

<Grid>
    <!-- Other Stuff -->
    <Image Source="{Binding ImagePath}" Style="{StaticResource ImageStyle}" />
</Grid>

我可以通过包裹在网格中并在那里移动剪辑来摆脱第二个问题(小图像剪辑),但是大的东西不会居中:

<Grid>
    <!-- Other Stuff -->
    <Grid Width="90" Height="90">
        <Grid.Clip>
            <EllipseGeometry Center="45,45" RadiusX="40" RadiusY="40" />
        </Grid.Clip>
        <Image Source="{Binding ImagePath}" Style="{StaticResource ImageStyle}" />
    </Grid>
</Grid>

我的网站有导航,显示为带圆角的rectengular按钮列表.

每个按钮都应该有自己的自定义背景,这是一张照片.照片比按钮大,应该响应鼠标在此按钮上的移动而移动.我们有一种效果,就像我们透过窗户看一样.

导航具有以下HTML结构:"ul> li> a> img".

我认为,每个"ul> li"都应该是一个带圆角的矩形,并充当图像的剪贴蒙版.

设置"溢出:隐藏;" 不起作用,因为剪裁区域是没有圆角的简单矩形.

CSS属性(如下所示)可以在Webkit浏览器下运行,但不能在Firefox下运行.

mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;

什么是跨浏览器的方式呢？

我们有一个PHP工具,通过调用ImageMagick将PSD中的图像转换为其他格式.

为了有可能扩展工具的功能,我现在需要找出" ImageMagick将PSD文件转换为关于剪切路径的GIF,PNG和JPG文件的可能性 ",例如回答以下问题:

• ImageMagick可以将PSD文件转换为GIF/JPG/PNG并保持剪切路径以便以后进一步编辑吗？

• 或者ImageMagick只能将PSD文件转换为GIF/JPG/PNG,因此将剪切路径外的所有内容转换为透明区域？

• GIF,PNG和JPG的每种格式甚至支持 PSD文件支持它们的剪切路径吗？