Question

我有一个简单的脚本：

    <DataGrid ItemsSource="{Binding Path=Teams}"
      AutoGenerateColumns="False">
        <DataGrid.Columns>

            <DataGridTextColumn Header="Team" 
                                IsReadOnly="True"
                                Width="*"
                                 Binding="{Binding Name}" />

            <DataGridComboBoxColumn Header="Members" 
                                    Width="*"
                                    >

                <DataGridComboBoxColumn.ElementStyle>
                    <Style TargetType="ComboBox">
                        <Setter Property="ItemsSource" Value="{Binding Path=Members}" />
                    </Style>
                </DataGridComboBoxColumn.ElementStyle>

                <DataGridComboBoxColumn.EditingElementStyle>
                    <Style TargetType="ComboBox">
                        <Setter Property="ItemsSource" Value="{Binding Path=Members}" />
                    </Style>
                </DataGridComboBoxColumn.EditingElementStyle>
            </DataGridComboBoxColumn>

        </DataGrid.Columns>
    </DataGrid>

此处未调用fabric.Image.fromURL(url, function(oImg) { oImg.set({selectable:false}) oImg.clipTo = function(ctx) { console.log("ctx") console.log(ctx) } })函数。我想要剪切clipTo但不调用oImg。

这里有什么问题？

Answer 1

玩家，

这是工作代码：

var canvas = new fabric.Canvas('c1');
var src = "http://fabricjs.com/lib/pug.jpg";
canvas.backgroundColor = "#333";

var object;
fabric.util.loadImage(src, function (img) {
    object = new fabric.Image(img);
    object.set({
        left: 100,
        top: 100,
        selectable: false,
        clipTo: function(ctx) {
            console.log("ctx")
            console.log(ctx);
            ctx.rect(
                        2,
                        2,
                        430,
                        430
                    );
        }
    });
    object.hasRotatingPoint = true;
    object.scaleX = object.scaleY = 0.25;
    canvas.add(object);
    canvas.renderAll();
});

实际上，您的代码工作正常。我相信只与库版本有所区别。我使用1.7.1 我的猜测它对你不起作用，因为你的图像没有活动或没有加载到画布中，你试图剪辑它。

另外，我使用 fabric.util.loadImage 而不是 fabric.Image.fromURL

对于 fabric.Image.fromURL ，您应该创建一个活动对象，然后设置属性。要制作活动对象，您应该执行以下操作：

var objImg = null;
var image = fabric.Image.fromURL(img, function(oImg) {
                    oImg.set({width: oImg.width,
                              height: oImg.height,
                              left: 100,
                              top: 100,
                              originX: 'center',
                              originY: 'center',
                              selectable: false,
                              perPixelTargetFind: true,
                              transparentCorners: false});

                    canvas.setActiveObject(oImg);
                    objImg  = canvas.getActiveObject();
                    objImg.clipTo = function(ctx) {
                console.log("ctx")
                console.log(ctx);
                ctx.rect(
                            2,
                            2,
                            430,
                            430
                        );
            }
                    canvas.add(oImg);
});

fabricjs clipTo无法正常工作

1 个答案: