renyicun
/
ZhongMianAdmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            *,
            ::before,
            ::after {
                -webkit-appearance: auto !important;
                -moz-appearance: auto !important;
                appearance: auto !important;
            }
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                overflow: hidden;
            }
            .scene {
                width: 100%;
                height: 100%;
            }
            #toolbar {
                position: absolute;
                left: 50%;
                top: 0;
                z-index: 10000;
                transform: translateX(-50%);
            }
            #toolbar > div.disable {
                opacity: 0.5;
                pointer-events: none;
            }
        </style>
    </head>
    <body>
        <div id="scene" class="scene"></div>
        <div id="toolbar">
            <button id="add" onclick="add()">添加</button>
            <button id="exit" disabled onclick="exit()">退出</button>
            <button id="confirm" disabled onclick="confirm()">确定</button>
            <button id="delete" onclick="remove()">删除</button>
            <div id="options" style="margin-top: 20px" class="disable">
                <label for="pen"><input type="radio" id="pen" name="s" onclick="setBrush('pen')" checked />马赛克</label>
                <label for="eraser"><input type="radio" id="eraser" name="s" onclick="setBrush('eraser')" /> 橡皮擦</label>
                <input type="range" onchange="setBrushSize(value)" value="20" min="0" max="100" />
            </div>
        </div>
        <script src="../../dist/sdk/kankan-sdk-deps.js"></script>
        <script src="../../dist/sdk/kankan-sdk.js"></script>
        <script>
            var kankan = new KanKan({
                dom: '#scene',
                num: 't-JKNqv1o',
                view:false
            })
            localStorage.setItem('token','eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxODgxOTI3MjIwOCIsInVzZXJOYW1lIjoiMTg4MTkyNzIyMDgiLCJpYXQiOjE2NjIwMDMzMjgsImp0aSI6IjI3MzMyNjZiLTM3YzktNGM1YS04ZjZiLWNhNzQ5ZTYyY2Y3MyJ9.oFLkFRluIv21PqR5JJSrKfyZIl0e2BXot3EgxiFVkQ8')
            kankan.use('Mosaic').then(mosaic => {
                // todo
            })

            kankan.render()

            function add() {
                kankan.RepairManager.mosaic.then(mosaic => {
                    mosaic.enter()
                    document.querySelector('#exit').removeAttribute('disabled')
                    document.querySelector('#confirm').removeAttribute('disabled')
                    document.querySelector('#options').classList.remove('disable')
                })
            }
            function exit() {
                kankan.RepairManager.mosaic.then(mosaic => {
                    mosaic.exit()
                })
                document.querySelector('#exit').setAttribute('disabled',true)
                document.querySelector('#confirm').setAttribute('disabled',true)
                document.querySelector('#options').classList.add('disable')
            }
            function confirm() {
                kankan.RepairManager.mosaic.then(mosaic => {
                    mosaic.save()
                })
                document.querySelector('#exit').setAttribute('disabled',true)
                document.querySelector('#confirm').setAttribute('disabled',true)
                document.querySelector('#options').classList.add('disable')
            }
            function remove() {
                kankan.RepairManager.mosaic.then(mosaic => {
                    if (mosaic.mosaics.length) {
                        mosaic.remove(mosaic.mosaics[0].panoId)
                    }
                })
            }
            function setBrush(type) {
                kankan.RepairManager.mosaic.then(mosaic => {
                    mosaic.setBrush(type)
                })
            }
            function setBrushSize(size) {
                kankan.RepairManager.mosaic.then(mosaic => {
                    mosaic.setBrushSize(size)
                })
            }
        </script>
    </body>
</html>