如何使用 gojs 画笔图案使图像仅在高度而不是宽度上重复

Question

我用的是矩形，我想用图片填充它，让图片垂直重复，水平拉伸。

我的代码是：

 $(go.Shape, "Rectangle", {
                fill: $(go.Brush, "Pattern", { pattern: img }),
                stroke: null,
                width:x,
                height:34,
                position: new go.Point(0,14)
 })

Answer 1

调整元素的大小不会有任何效果。我认为您需要实际拉伸文件中的图像，使其具有您想要的自然宽度。在本例中为 45 像素。

Answer 2

我使用 canvas，并且在加载函数中，我将图像宽度更改为类似于包装的 graphObject


     $(go.Shape, "Rectangle", {
                    fill: $(go.Brush, "Pattern", {
                        pattern: getPattern()
                    }),
                    stroke: null
                },
                    new go.Binding("width", "", () => {
                      ...;
                    }),
                    new go.Binding("height", "", (data) => {
                        return ...;
                    }),
                    new go.Binding("position", "", () => {
                        return new go.Point(..., ...);
                    }))
    
    ---
    
     function getPattern() {
            let width = cabinetWidth;
            var patternCanvas = document.createElement('canvas');
            patternCanvas.width = width;
            patternCanvas.height = 2;
            var pctx = patternCanvas.getContext('2d');
            var img = new Image();
            img.src = "../../../../assets/images/xxx.png";
            img.onload = function () {
                pctx.drawImage(img, 0, 0, patternCanvas.width, patternCanvas.height);
            }
            return patternCanvas;

    }

如何使用 gojs 画笔图案使图像仅在高度而不是宽度上重复

How to use gojs brush pattern so that an image is repeated only at height and not in width

gojs