JS輕量編輯器怎么使用

本文小編為大家詳細介紹“JS輕量編輯器怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JS輕量編輯器怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一款純 JS 實現的輕量化圖片編輯器

如果上面的場景是你所遇見的, 也想輕量快速的處理一些圖片, 這個項目就是為你而準備的

• 支持多圖操作

• 支持圖片拖拽添加

• 支持所有屬性的動態配置

• 支持一鍵復制修改后的結果

• 支持畫筆、文字、矩形、圓形、箭頭、線條、圖像的添加

Optimizer 框架特點

• 事件、畫圖、交互 全局管理

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

• 基于面向對象, 高度抽象代碼

• 簡單易用, 能快速開發出各種效果

• Optimizer 框架使用

啟動

首先需要場景管理器, 通過繼承 GenScene 來創建場景, 場景里對于頁面中的多個控制器進行管理

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

全局使用 instance 獲取實例, 加載場景管理器, 最簡單的 Optimizer 程序就啟動了

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

場景管理器 (Scene)

事件 (Event)

頁面事件

...
<div class='gen-auto-button-area'>
    <button class='gen-auto-button' data-value='config.arg1'>text</button>
</div>
...
// 注冊頁面 class, 全局可用
this.registerPageClass({
    "buttonArea": 'gen-auto-button-area',
    ...
})
// 注冊全局事件       
this.registerGlobalEvents([     
    {
        eventName: "click",
        // 事件綁定的元素區域
        className: sc.pageClass.buttonArea,
        // 在 所有 configToEvents 響應之 前 觸發
        after: function(bindVar, target) {
            // bindVar: 綁定的變量
            // target: 事件觸發的目標
        },        
        // 在 所有 configToEvents 響應之 后 觸發
        before: function(bindVar, target) {
            // bindVar: 綁定的變量
            // target: 事件觸發的目標
        },
        // 事件響應
        configToEvents: {
            // 自定義綁定的變量: 事件觸發后的響應
            "config.arg1": function(target) {
                
            },
            "action.arg1": function(target) {
                
            },
            ...
        }
    },
    ...
])

鼠標事件

this.resgisterMouse(function(event, action) { 
    // event 是鼠標點擊的事件
    // action 為鼠標點擊的事件名稱    
    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' 時, 表示按下, 為 'up' 時, 表示松開
    console.log("Backspace", status)
})
this.registerAction("s", status => {
    // status 為 'down' 時, 表示按下, 為 'up' 時, 表示松開
    console.log("s", status)
})

組件 (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

讀到這里，這篇“JS輕量編輯器怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。