ImageLighter

光速引擎 · Image Lighter —— 让大图浏览编辑丝滑流畅。

📆 更新日志

当前为 v1.0.0-beta.2，查看更新日志。

📦 安装插件（本地安装）

本插件不发布于公开 NPM 仓库，通过本地 .tgz 文件安装使用，需 购买插件 授权后才能使用。

第一步：获取插件包

购买后，你将获得一个名为 pxgrow-image-lighter-1.0.0-beta.2.tgz 的安装包。

将该文件放置在你的项目根目录下的 pxgrow 文件夹中统一管理，安装后请勿删除。

第二步：本地安装命令

根据你使用的包管理器，选择以下方式之一：

npm

npm install ./pxgrow/pxgrow-image-lighter-1.0.0-beta.2.tgz

pnpm

pnpm add ./pxgrow/pxgrow-image-lighter-1.0.0-beta.2.tgz

yarn

yarn add ./pxgrow/pxgrow-image-lighter-1.0.0-beta.2.tgz

bun

bun add ./pxgrow/pxgrow-image-lighter-1.0.0-beta.2.tgz

将在 package.json 中自动增加本地依赖:

"@pxgrow/image-lighter": "file:pxgrow/pxgrow-image-lighter-1.0.0-beta.2.tgz"

---

或通过 script 标签引入，使用全局变量 PxGrow.imageLighter 访问插件内部功能。

需解压 pxgrow-image-lighter-1.0.0-beta.2.tgz 文件，复制 package/dist/image-lighter.js 使用。

web

<script src="/lib/pxgrow/image-lighter.js"></script>
<script>
  const { ImageLighter } = PxGrow.imageLighter
</script>

示例

大图流畅操作

// #Image Lighter [大图流畅操作]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/view'

import { ImageLighter } from '@pxgrow/image-lighter'

const app = new App({ view: window, editor: {}, fill: '#333' })

new ImageLighter(app.tree, {}) // 图片加速

const rect = new Rect({
    width: 8000,
    height: 8000,
    placeholderColor: 'white',
    fill: {
        type: 'image',
        url: '/image/large.png', // 原图为 8000 * 8000px 的大图
        mode: 'stretch',
        showProgress: 'gray',
    },
    editable: true
})

app.tree.add(rect)

app.waitReady(() => {
    app.tree.zoom('fit')
})

大长图流畅操作

// #Image Lighter [大长图流畅操作]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/view'

import { ImageLighter } from '@pxgrow/image-lighter'

const app = new App({ view: window, editor: {} })

new ImageLighter(app.tree, {}) // 图片加速

const rect = new Rect({
    fill: {
        type: 'image',
        url: '/image/long-large.png', // 原图为 2000 * 50000px 的大长图
        mode: 'stretch',
        showProgress: 'gray',
    },
    pixelRatio: devicePixelRatio,
    placeholderColor: 'white',
    editable: true
})

app.tree.add(rect)

// app.waitViewCompleted(() => {
//     app.tree.move(0, -100)
// })

超大图流畅操作

// #Image Lighter [超大图流畅操作]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/view'

import { ImageLighter } from '@pxgrow/image-lighter'

const app = new App({ view: window, editor: {} })

new ImageLighter(app.tree, {}) // 图片加速

const rect = new Rect({
    width: 20000,
    height: 20000,
    placeholderColor: 'white',
    fill: {
        type: 'image',
        url: '/image/super-large.png', // 原图为 20000 * 20000px 的超大图
        mode: 'stretch',
        showProgress: 'gray',
    },
    editable: true
})

app.tree.add(rect)

app.waitReady(() => {
    app.tree.zoom('fit')
})

1 千张不同的图片流畅操作

// #Image Lighter [1千张不同的图片流畅操作]
import { IGroup } from '@leafer-ui/interface'
import { App, Image, Group, Resource } from 'leafer-ui'
import '@leafer-in/viewport'
import '@leafer-in/view'
import '@leafer-in/editor'

import { ImageLighter } from '@pxgrow/image-lighter'

const app = new App({ view: window, editor: {} })

new ImageLighter(app.tree, {}) // 图片加速

createImages(app.tree, 1) // 1千张图片

app.waitReady(() => {
    app.tree.zoom('fit')
})


function createImages(view: IGroup, num: number) {
    var group
    var groupSize = 10 * 100 * 1.5
    var column = num > 25 ? 10 : 5

    for (var i = 0; i < num; i++) {
        group = new Group()
        group.x = groupSize * (i % column)
        group.y = groupSize * 0.6 * Math.floor(i / column)
        view.add(group)
        createGroup(group, i, 0, 0, `hsl(${i * 3},60%,50%)`)
    }
}

function createGroup(group: IGroup, num: number, startX: number, startY: number, color: string) {
    var y, image

    for (var i = 0; i < 100; i++) {
        if (i % 10 === 0) startX += 10
        y = startY
        for (var j = 0; j < 10; j++) {
            if (j % 10 === 0) y += 10
            image = new Image()
            image.x = startX
            image.y = y
            image.width = 10
            image.height = 6
            image.editable = true
            createUrl(image, num * 10000 + i * 10 + j + 1, color)
            group.add(image)
            y += 8
        }
        startX += 10 + 2
    }
}

// 模拟不重复的图片（每张1000 * 600px）
function createUrl(image: Image, count: number, color: string): void {
    setTimeout(() => {
        const canvas = new OffscreenCanvas(1000, 600)
        const context = canvas.getContext('2d')

        context.fillStyle = color
        context.fillRect(0, 0, 1000, 600)

        for (let i = 0; i < 10; i++) {
            context.fillStyle = `hsl(${Math.round(10 + Math.random() * 100)},70%,50%)`
            context.beginPath()
            context.arc(Math.random() * 1000, Math.random() * 600, 10 + Math.random() * 100, 0, Math.PI * 2)
            context.fill()
        }

        context.fillStyle = 'rgba(255,255,255,0.8)'
        context.font = `bold 150px Arial`
        context.textAlign = 'center'
        context.textBaseline = 'middle'
        context.fillText(count.toString(), 500, 300)

        const bitmap = canvas.transferToImageBitmap()
        image.url = Resource.setImage('leafer://' + count + '.jpg', bitmap).url
    }, count * 5)
}

复杂 SVG 图片流畅编辑

// #Image Lighter [复杂 SVG 图片流畅编辑]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/view'

import { ImageLighter } from '@pxgrow/image-lighter'

const app = new App({ view: window, editor: {} })

new ImageLighter(app.tree, {}) // 图片加速

const rect = new Rect({
    width: 500,
    fill: {
        type: 'image',
        url: '/image/large.svg',
        mode: 'stretch'
    },
    editable: true
})

app.tree.add(rect)

app.waitViewCompleted(() => {
    app.tree.zoom('fit')
})