matting-editor/lib/matting.html

matting-editor

<div class="matting-container">
    <!-- header -->
    <div class="matting-header">
        <h2 class="matting-logo">
            <slot name="logo">
                <span class="logo-image">稿定抠图</span>
                <span class="matting-version">{{matting.version}}</span>
            </slot>
        </h2>

        <div class="matting-help_btn" v-if="enableHelp">
            <button class="matting-btn" @click="showHelp()">新手帮助</button>
        </div>
    </div>

    <!-- tools -->
    <matting-tools
        v-if="innerOptions.showToolbar"
    ></matting-tools>

    <!-- canvas -->
    <div class="matting-canvas" @contextmenu="onCanvasContextMenu">
        <div class="matting-canvas-panel matting-canvas-source" :class="[
            (!panToolLocked && isOverSprite) ? 'is-tool-' + this.currentTool : '',
            (panToolLocked && isOverSprite) ? 'is-tool-pan' : '',
        ]">
            <div class="matting-canvas-tips">原图</div>
            <div
                ref="sourceCanvasPanel"
                class="matting-canvas-main"
            >
                <canvas tabindex="-1" ref="sourceCanvas" :style="{
                    height: canvasSize.height + 'px',
                    width: canvasSize.width + 'px'
                }"></canvas>
            </div>

        <!-- brush -->
        <matting-brush
            :brush-colors-map="innerOptions.brushColorsMap"
            :brush-size="mattingData.brushSize"
            :current-tool="currentTool"
            :draging="draging"
            :is-over-sprite="isOverSprite"
            :pan-tool-locked.sync="panToolLocked"
        ></matting-brush>
        </div>
        <div class="matting-canvas-panel matting-canvas-result" :class="{'is-tool-pan': isOverSprite}">
            <div class="matting-canvas-tips">效果</div>
            <div
                ref="resultCanvasPanel"
                class="matting-canvas-main"
            >
                <canvas tabindex="-1" ref="resultCanvas" :style="{
                    height: canvasSize.height + 'px',
                    width: canvasSize.width + 'px'
                }"></canvas>
            </div>
            <div class="matting-loader" :class="{'is-loading': resultUpdating}"><span>生成中</span></div>
        </div>
    </div>

    <!-- footer -->
    <matting-footer
        :background-color="mattingData.backgroundColor"
        :brush-size="mattingData.brushSize"
        :feathering-radius="mattingData.featheringRadius"
        :swatches="innerOptions.swatches"
    ></matting-footer>

    <!-- guilder -->
    <matting-dialog
        class="matting-guider"
        v-if="guider.show"
        :visible.sync="guider.show"
    >
        <div slot="header" class="hd">
            <video height="300" width="680" src="https://cdn.dancf.com/gaodingx/www/guider.71c329.mp4" autoplay loop></video>
        </div>
        <div slot="footer" class="ft">
            <span v-if="guider.secondsBeforeClosed">
                {{guider.secondsBeforeClosed}}秒后可关闭
            </span>
            <button v-else @click="closeGuider()">我知道了</button>
        </div>
    </matting-dialog>

    <matting-popper
        ref="popperGuider"
        v-if="!popperGuider.finished"
        :text="popperGuider.text"
        @popperclick="popperClick"
    />

    <!-- help -->
    <matting-help
        v-if="enableHelp"
        :visible.sync="help.show"
    ></matting-help>

    <slot></slot>
</div>