怎么用純JS實(shí)現(xiàn)輕量化圖片編輯器

本篇內(nèi)容主要講解“怎么用純JS實(shí)現(xiàn)輕量化圖片編輯器”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用純JS實(shí)現(xiàn)輕量化圖片編輯器”吧!

Optimizer 框架特點(diǎn)

• 事件、畫(huà)圖、交互 全局管理

• 支持注冊(cè)自定義組件, 可自定義配置管理

• 基于面向?qū)ο? 高度抽象代碼

• 簡(jiǎn)單易用, 能快速開(kāi)發(fā)出各種效果

Optimizer 框架使用

啟動(dòng)

首先需要場(chǎng)景管理器, 通過(guò)繼承 GenScene 來(lái)創(chuàng)建場(chǎng)景, 場(chǎng)景里對(duì)于頁(yè)面中的多個(gè)控制器進(jìn)行管理

class MainScene extends GenScene {
    constructor(optimizer) {
        super(optimizer)
    }
}

全局使用 instance 獲取實(shí)例, 加載場(chǎng)景管理器, 最簡(jiǎn)單的 Optimizer 程序就啟動(dòng)了

GenOptimizer.instance(function(o){
    let scene = MainScene.new(o)
    o.runWithScene(scene)
})

場(chǎng)景管理器 (Scene)

頁(yè)面事件Event

...
<div class='gen-auto-button-area'>
    <button class='gen-auto-button' data-value='config.arg1'>text</button>
</div>
...

// 注冊(cè)頁(yè)面 class, 全局可用
this.registerPageClass({
    "buttonArea": 'gen-auto-button-area',
    ...
})
// 注冊(cè)全局事件       
this.registerGlobalEvents([     
    {
        eventName: "click",
        // 事件綁定的元素區(qū)域
        className: sc.pageClass.buttonArea,
        // 在 所有 configToEvents 響應(yīng)之 前 觸發(fā)
        after: function(bindVar, target) {
            // bindVar: 綁定的變量
            // target: 事件觸發(fā)的目標(biāo)
        },        
        // 在 所有 configToEvents 響應(yīng)之 后 觸發(fā)
        before: function(bindVar, target) {
            // bindVar: 綁定的變量
            // target: 事件觸發(fā)的目標(biāo)
        },
        // 事件響應(yīng)
        configToEvents: {
            // 自定義綁定的變量: 事件觸發(fā)后的響應(yīng)
            "config.arg1": function(target) {
            },
            "action.arg1": function(target) {
            },
            ...
        }
    },
    ...
])

鼠標(biāo)事件

this.resgisterMouse(function(event, action) { 
    // event 是鼠標(biāo)點(diǎn)擊的事件
    // action 為鼠標(biāo)點(diǎn)擊的事件名稱    
    if (action == 'mouseleave') {
        console.log('mouseleave canvas')
    } else if (action == 'up') {
        console.log('up canvas')
    } else if (action == 'down') {
        console.log('down canvas')
    } else if (action == 'move') {
        console.log('move canvas')
    }
})

鍵盤事件

this.registerAction("Backspace", status => {
    // status 為 'down' 時(shí), 表示按下, 為 'up' 時(shí), 表示松開(kāi)
    console.log("Backspace", status)
})
this.registerAction("s", status => {
    // status 為 'down' 時(shí), 表示按下, 為 'up' 時(shí), 表示松開(kāi)
    console.log("s", status)
})

注冊(cè)組件 Component

class MyComponent extends GenComponent {
    constructor(control) {
        super(control.scene)
        this.control = control
    }
    ...
}
this.bindComponent('attribute', MyComponent.new(this))

使用組件

// 全局可使用組件
let data = ...
this.getComponent('attribute').buildWith(data)

到此，相信大家對(duì)“怎么用純JS實(shí)現(xiàn)輕量化圖片編輯器”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！