Question

对于SVG路径，我将背景填充与包含可缩放和翻译的图像的滤镜组合。

以下是一个函数的完整代码，它关注修改可能包含图像的pathes列表：

if (slots.image.length < 1) {
    return;
}

jQuery.each(slots.image, function (index, slot) {
    var imageSlot = slot.slotRef;
    var svg = slot.svg;

    var svgRoot = svg.root();
    var defsElements = jQuery('defs', svgRoot);
    var defs = defsElements.length > 0 ? defsElements.first() : svg.defs('customDefinitions');

    imageSlot.parent().show();
    imageSlot.show().attr('class', '');

    var sectionNumber = (index+1);
    var customImage = settings.customImages[sectionNumber];

    var bgColour = customImage.bgColour;
    imageSlot.css('fill', bgColour);

    var scale = customImage.scale;
    var moveX = customImage.moveX;
    var moveY = customImage.moveY;

    if (sectionNumber == getActiveImageArea()) {
        jQuery('#showScale').text(scale + '%');
        jQuery('#showMoveX').text(moveX);
        jQuery('#showMoveY').text(moveY);
    }

    if (customImage.file == '' || customImage.file == 'none') {
        return true; // continue;
    }

    var imageFile = customImage.file;
    var imageWidth = customImage.width;
    var imageHeight = customImage.height;

    jQuery('#customImage' + sectionNumber + 'Filter').remove();
    var filter = svg.filter(defs, 'customImage' + sectionNumber + 'Filter',
        0, 0, scale + '%', scale + '%',
        {
            filterUnits: 'objectBoundingBox'
        }
    );

    // add the image
    var outputSlot = 'customImage' + sectionNumber;
    svg.filters.image(filter, outputSlot, imageFile);
    // move it
    svg.filters.offset(filter, 'movedImage' + sectionNumber, outputSlot, moveX, moveY);
    // combine image with path for clipping
    svg.filters.composite(filter, 'clip' + sectionNumber, 'in', 'movedImage' + sectionNumber, 'SourceGraphic');
    // mix both images
    svg.filters.blend(filter, '', 'normal', 'clip' + sectionNumber, 'SourceGraphic');

    imageSlot.attr('filter', 'url(#customImage' + sectionNumber + 'Filter)');
});

这仍有一个问题：如果缩小图像，背景也会缩小。移动图像时也会发生同样的情况。这可能导致背景不再覆盖整个路径。

当背景始终应用于整个路径时，是否可能仅缩放和翻译图像？

Answer 1

问题原因是我缩放了整个过滤器。最好使用preserveAspectRatio

之类的

error:Optional(<CKError 0x17005eea0: "Server Record Changed" (14/2037); "Error saving record <CKRecordID: 0x1458bb9c0; FASVSE10761FDM:(_defaultZone:__defaultOwner__)> to server: Protection data didn't match">)

属性

避免图像翻译+路径背景缩放

1 个答案: