/*online-demo*/
<!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="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk-deps.js"></script>
<script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk.js"></script>
<script>
var kankan = new KanKan({
dom: '#scene',
num:'KJ-JYo2ZZyKKJ'
})
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 => {
var saveData = mosaic.confirm()
console.log(saveData)
})
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>
