对一个绿色方块做了一个反色滤镜，方块拖拽到边缘区域，反色滤镜效果失效

[28715836]

// #自定义滤镜 [blur 滤镜] import { Leafer, Rect, Filter } from 'leafer-ui' import '@leafer-in/filter' // 导入滤镜插件

// 注册自定义滤镜 Filter.register('invert', { apply(filter, _ui, worldBounds, currentCanvas, _orginCanvas, _shape) { const ctx = currentCanvas.context; const imageData = ctx.getImageData(0, 0, currentCanvas.width, currentCanvas.height); const data = imageData.data; const intensity = filter.intensity !== undefined ? filter.intensity : 1; // 反色强度，0-1之间

    for (let i = 0; i < data.length; i += 4) {
        // 反转RGB值
        data[i] = 255 - data[i] * intensity - data[i] * (1 - intensity);       // R
        data[i+1] = 255 - data[i+1] * intensity - data[i+1] * (1 - intensity); // G
        data[i+2] = 255 - data[i+2] * intensity - data[i+2] * (1 - intensity); // B
        // Alpha通道保持不变
    }
    
    ctx.putImageData(imageData, 0, 0);
},
getSpread(filter) {
    return filter.spread || 0;
}

})

// 使用滤镜 const leafer = new Leafer({ view: window })

const rect = new Rect({ width: 100, height: 100, cornerRadius: 30, fill: 'rgba(50,205,121,0.7)', draggable: true, filter: { // 支持多个滤镜 [filter, filter] type: 'invert' } })

leafer.add(rect)

[Xdy1579883916]

你试试这个

// #自定义滤镜 [blur 滤镜]
import { Leafer, Rect, Filter } from 'leafer-ui'
import '@leafer-in/filter' // 导入滤镜插件

// 注册自定义滤镜
Filter.register('invert', {
  apply(filter, _ui, worldBounds, currentCanvas, _orginCanvas, _shape) { // 应用自定义滤镜
        currentCanvas.filter = `invert(${filter.intensity || 1})`
        currentCanvas.resetTransform()
        currentCanvas.copyWorld(currentCanvas, worldBounds, worldBounds, "copy")
        currentCanvas.filter = 'none'
    },
    getSpread(filter) { // 扩展元素的渲染边界
        return filter.blur
    }
})

// 使用滤镜
const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    draggable: true,
    filter: { // 支持多个滤镜 [filter, filter]
        type: 'invert',
        intensity: 1
    }
})

leafer.add(rect)

[Xdy1579883916]

需要使用 pixelWidth、pixelHeight

// #自定义滤镜 [blur 滤镜]
import { Leafer, Rect, Filter } from 'leafer-ui'
import '@leafer-in/filter' // 导入滤镜插件

// 注册自定义滤镜
Filter.register('invert', {
apply(filter, _ui, worldBounds, currentCanvas, _orginCanvas, _shape) {
    const ctx = currentCanvas.context;
    const imageData = ctx.getImageData(0, 0, currentCanvas.pixelWidth, currentCanvas.pixelHeight);
    const data = imageData.data;
    const intensity = filter.intensity !== undefined ? filter.intensity : 1; // 反色强度，0-1之间

    for (let i = 0; i < data.length; i += 4) {
        // 反转RGB值
        data[i] = 255 - data[i] * intensity - data[i] * (1 - intensity);       // R
        data[i+1] = 255 - data[i+1] * intensity - data[i+1] * (1 - intensity); // G
        data[i+2] = 255 - data[i+2] * intensity - data[i+2] * (1 - intensity); // B
        // Alpha通道保持不变
    }
    
    ctx.putImageData(imageData, 0, 0);
},
getSpread(filter) {
    return filter.spread || 0;
}
})

// 使用滤镜
const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    draggable: true,
    filter: { // 支持多个滤镜 [filter, filter]
     type: 'invert'
    }
})

leafer.add(rect)

[Xdy1579883916]

另外，你的反色计算不对，应改为：

// #自定义滤镜 [blur 滤镜]
import { Leafer, Rect, Filter } from 'leafer-ui'
import '@leafer-in/filter' // 导入滤镜插件

// 注册自定义滤镜
Filter.register('invert', {
apply(filter, _ui, worldBounds, currentCanvas, _orginCanvas, _shape) {
    const ctx = currentCanvas.context;
    const imageData = ctx.getImageData(0, 0, currentCanvas.pixelWidth, currentCanvas.pixelHeight);
    const data = imageData.data;
    const intensity = filter.intensity !== undefined ? filter.intensity : 1; // 反色强度，0-1之间

    // 反色滤镜
    for (let i = 0; i < data.length; i += 4) {
        data[i] = 255 - data[i] * intensity;       // R
        data[i + 1] = 255 - data[i + 1] * intensity; // G
        data[i + 2] = 255 - data[i + 2] * intensity; // B
        // Alpha通道保持不变
    }

    ctx.putImageData(imageData, 0, 0);
},
getSpread(filter) {
    return filter.spread || 0;
}
})

// 使用滤镜
const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    draggable: true,
    filter: { // 支持多个滤镜 [filter, filter]
     type: 'invert',
     intensity: 1
    }
})

leafer.add(rect)

[28715836]

感谢老板，靠谱的很