mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
514 lines
No EOL
14 KiB
HTML
514 lines
No EOL
14 KiB
HTML
<html>
|
|
<head>
|
|
<style></style>
|
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
<style>
|
|
html,body { margin: 0; padding: 0; }
|
|
.box canvas {
|
|
border-right: 1px solid #aaaaaa40;
|
|
border-bottom: 1px solid #aaaaaa40;
|
|
background-image:
|
|
linear-gradient(#aaaaaa40 1px, transparent 0),
|
|
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
|
|
linear-gradient(#aaa 1px, transparent 0),
|
|
linear-gradient(90deg, #aaa 1px, transparent 0);
|
|
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
|
|
}
|
|
.list {
|
|
width: 910px;
|
|
overflow: hidden;
|
|
border-top: 1px solid #f0f0f0;
|
|
border-left: 1px solid #f0f0f0;
|
|
}
|
|
.box {
|
|
width: 300;
|
|
min-height: 220;
|
|
float: left;
|
|
border-right: 1px solid #f0f0f0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 10px 0;
|
|
}
|
|
.box .title {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #000;
|
|
display: inline-block;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
width: 100%;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="list">
|
|
<div class="box" id="mount-1">
|
|
<div class="title">Text</div>
|
|
</div>
|
|
<div class="box" id="mount-2">
|
|
<div class="title">Rect</div>
|
|
</div>
|
|
<div class="box" id="mount-3">
|
|
<div class="title">Circle</div>
|
|
</div>
|
|
<div class="box" id="mount-4">
|
|
<div class="title">Image</div>
|
|
</div>
|
|
<div class="box" id="mount-5">
|
|
<div class="title">SVG</div>
|
|
</div>
|
|
<div class="box" id="mount-6">
|
|
<div class="title">HTML</div>
|
|
</div>
|
|
<div class="box" id="mount-7">
|
|
<div class="title">Element: click selected</div>
|
|
</div>
|
|
<div class="box" id="mount-8">
|
|
<div class="title">Element: lock</div>
|
|
</div>
|
|
<div class="box" id="mount-9">
|
|
<div class="title">Element: invisible</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../../packages/core/dist/index.global.js"></script>
|
|
<script type="module">
|
|
import event from '../../../scripts/browser/event.js';
|
|
import { getData } from './data.js';
|
|
window.event = event;
|
|
window.getData = getData;
|
|
</script>
|
|
<script>
|
|
const Core = window.iDrawCore;
|
|
var opts = {
|
|
width: 300,
|
|
height: 200,
|
|
contextWidth: 300,
|
|
contextHeight: 200,
|
|
devicePixelRatio: 4,
|
|
}
|
|
var config = {
|
|
elementWrapper: {
|
|
controllerSize: 4,
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
const mount = document.querySelector('#mount-1');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "text-001",
|
|
x: 20,
|
|
y: 20,
|
|
w: 200,
|
|
h: 60,
|
|
type: "text",
|
|
desc: {
|
|
fontSize: 16,
|
|
color: "#3f51b5",
|
|
text: "生活就像海洋，只有意志坚强的人，才能到达彼岸。",
|
|
fontFamily: 'monospace',
|
|
fontWeight: 'bold',
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
bgColor: '#c6e0f5',
|
|
},
|
|
})
|
|
core.addElement({
|
|
name: "text-001",
|
|
x: 40,
|
|
y: 100,
|
|
w: 240,
|
|
h: 80,
|
|
type: "text",
|
|
desc: {
|
|
fontSize: 16,
|
|
color: "#3f51b5",
|
|
text: "Life is like an ocean.\r\nOnly those with strong \nwill can \r\nreach the other shore.",
|
|
fontFamily: 'monospace',
|
|
textAlign: 'right',
|
|
fontWeight: 'bold',
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
bgColor: '#c6e0f5',
|
|
},
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function() {
|
|
const mount = document.querySelector('#mount-2');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "rect-001",
|
|
x: 20,
|
|
y: 20,
|
|
w: 200,
|
|
h: 60,
|
|
type: "rect",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
})
|
|
core.addElement({
|
|
name: "rect-002",
|
|
x: 50,
|
|
y: 100,
|
|
w: 200,
|
|
h: 80,
|
|
type: "rect",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function() {
|
|
const mount = document.querySelector('#mount-3');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "circle-001",
|
|
x: 20,
|
|
y: 20,
|
|
w: 100,
|
|
h: 100,
|
|
type: "circle",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
})
|
|
core.addElement({
|
|
name: "circle-002",
|
|
x: 50,
|
|
y: 100,
|
|
w: 200,
|
|
h: 80,
|
|
type: "circle",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function() {
|
|
const mount = document.querySelector('#mount-4');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "image-001",
|
|
x: 4,
|
|
y: 4,
|
|
w: 200,
|
|
h: 120,
|
|
type: "image",
|
|
desc: {
|
|
src: './../images/building-001.png'
|
|
},
|
|
});
|
|
core.addElement({
|
|
name: "image-002",
|
|
x: 120,
|
|
y: 80,
|
|
w: 120,
|
|
h: 120,
|
|
type: "image",
|
|
desc: {
|
|
src: './../images/building-002.png'
|
|
},
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function() {
|
|
const mount = document.querySelector('#mount-5');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "svg-001",
|
|
x: 4,
|
|
y: 4,
|
|
w: 120,
|
|
h: 120,
|
|
type: "svg",
|
|
desc: {
|
|
svg: '<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>'
|
|
},
|
|
});
|
|
core.addElement({
|
|
name: "svg-002",
|
|
x: 120,
|
|
y: 80,
|
|
w: 120,
|
|
h: 120,
|
|
type: "svg",
|
|
desc: {
|
|
svg: '<svg t="1622524835512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" width="200" height="200"><path d="M270.1 741.7c0 23.4 19.1 42.5 42.6 42.5h48.7v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h85v120.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V784.1h48.7c23.5 0 42.6-19.1 42.6-42.5V346.4h-486v395.3zM627.2 141.6l44.9-65c2.6-3.8 2-8.9-1.5-11.4-3.5-2.4-8.5-1.2-11.1 2.6l-46.6 67.6c-30.7-12.1-64.9-18.8-100.8-18.8-35.9 0-70.1 6.7-100.8 18.8l-46.6-67.5c-2.6-3.8-7.6-5.1-11.1-2.6-3.5 2.4-4.1 7.4-1.5 11.4l44.9 65c-71.4 33.2-121.4 96.1-127.8 169.6h486c-6.6-73.6-56.7-136.5-128-169.7zM409.5 244.1c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9z m208.4 0c-14.8 0-26.9-12-26.9-26.9 0-14.8 12-26.9 26.9-26.9 14.8 0 26.9 12 26.9 26.9-0.1 14.9-12.1 26.9-26.9 26.9zM841.3 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0.1-30.6-24.3-55.3-54.6-55.3zM182.7 344.8c-30.2 0-54.6 24.8-54.6 55.4v216.4c0 30.5 24.5 55.4 54.6 55.4 30.2 0 54.6-24.8 54.6-55.4V400.1c0-30.6-24.5-55.3-54.6-55.3z" p-id="9095" fill="#2aa515"></path></svg>'
|
|
},
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function() {
|
|
const mount = document.querySelector('#mount-6');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "html-001",
|
|
x: 4,
|
|
y: 4,
|
|
w: 120,
|
|
h: 60,
|
|
type: "html",
|
|
desc: {
|
|
html: `<style>
|
|
.btn-box {
|
|
margin: 10px 0;
|
|
}
|
|
.btn {
|
|
line-height: 1.5715;
|
|
position: relative;
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
background-image: none;
|
|
border: 1px solid transparent;
|
|
box-shadow: 0 2px #00000004;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
height: 32px;
|
|
padding: 4px 15px;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
color: #000000d9;
|
|
background: #fff;
|
|
border-color: #d9d9d9;
|
|
}
|
|
.btn-primary {
|
|
color: #fff;
|
|
background: #1890ff;
|
|
border-color: #1890ff;
|
|
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
|
box-shadow: 0 2px #0000000b;
|
|
}
|
|
</style>
|
|
<div>
|
|
<div class="btn-box" style="margin-top: 0;">
|
|
<button class="btn" >
|
|
<span>Button</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="btn-box">
|
|
<button class="btn btn-primary">
|
|
<span>Button Primary</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
},
|
|
});
|
|
core.addElement({
|
|
name: "html-002",
|
|
x: 120,
|
|
y: 80,
|
|
w: 120,
|
|
h: 60,
|
|
type: "html",
|
|
desc: {
|
|
width: 120,
|
|
height: 80,
|
|
html: `<style>
|
|
.btn-box {
|
|
margin: 10px 0;
|
|
}
|
|
.btn {
|
|
line-height: 1.5715;
|
|
position: relative;
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
background-image: none;
|
|
border: 1px solid transparent;
|
|
box-shadow: 0 2px #00000004;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
height: 32px;
|
|
padding: 4px 15px;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
color: #000000d9;
|
|
background: #fff;
|
|
border-color: #d9d9d9;
|
|
}
|
|
.btn-primary {
|
|
color: #fff;
|
|
background: #1890ff;
|
|
border-color: #1890ff;
|
|
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
|
box-shadow: 0 2px #0000000b;
|
|
}
|
|
</style>
|
|
<div>
|
|
<div class="btn-box" style="margin-top: 0;">
|
|
<button class="btn" >
|
|
<span>Button</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="btn-box">
|
|
<button class="btn btn-primary">
|
|
<span>Button Primary</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
},
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script type="module">
|
|
(function() {
|
|
const mount = document.querySelector('#mount-7');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "rect-001",
|
|
x: 20,
|
|
y: 20,
|
|
w: 200,
|
|
h: 60,
|
|
type: "rect",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
})
|
|
core.addElement({
|
|
name: "rect-002",
|
|
x: 50,
|
|
y: 100,
|
|
w: 200,
|
|
h: 80,
|
|
type: "rect",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
});
|
|
setTimeout(() => {
|
|
event.mouseDown({ x: 100, y: 560 })
|
|
}, 100);
|
|
})();
|
|
</script>
|
|
|
|
<script type="module">
|
|
(function() {
|
|
const mount = document.querySelector('#mount-8');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "rect-001",
|
|
x: 20,
|
|
y: 20,
|
|
w: 200,
|
|
h: 60,
|
|
operation: {
|
|
lock: true,
|
|
},
|
|
type: "rect",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
})
|
|
core.addElement({
|
|
name: "rect-002",
|
|
x: 50,
|
|
y: 100,
|
|
w: 200,
|
|
h: 80,
|
|
type: "rect",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
});
|
|
setTimeout(() => {
|
|
event.mouseDown({ x: 340, y: 560 })
|
|
}, 100);
|
|
})();
|
|
</script>
|
|
|
|
<script type="module">
|
|
(function() {
|
|
const mount = document.querySelector('#mount-9');
|
|
const core = new Core(mount, opts, config);
|
|
core.addElement({
|
|
name: "rect-001",
|
|
x: 20,
|
|
y: 20,
|
|
w: 200,
|
|
h: 60,
|
|
type: "rect",
|
|
operation: {
|
|
invisible: true,
|
|
},
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
})
|
|
core.addElement({
|
|
name: "rect-002",
|
|
x: 50,
|
|
y: 100,
|
|
w: 200,
|
|
h: 80,
|
|
type: "rect",
|
|
desc: {
|
|
bgColor: "#c6e0f5",
|
|
borderRadius: 8,
|
|
borderWidth: 2,
|
|
borderColor: "#2196f3",
|
|
},
|
|
});
|
|
setTimeout(() => {
|
|
event.mouseDown({ x: 340, y: 560 })
|
|
}, 100);
|
|
})();
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |