Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-23 17:48:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update core example

Browse source
This commit is contained in:
chenshenhai 2021-05-28 10:43:42 +08:00
parent 30c322a41f
commit 7d43756d1f
3 changed files with 76 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/features/core.md
View file

@ -10,8 +10,8 @@
- [] Circle
- [] Image
- [] Point
- [] Drag elements
- [x] Drag elements
- [] Move elements' index
- [] Rotate elements
- [] Transform elements's size
- [x] Transform elements's size
- [] Undo action record

52
packages/core/example/css/index.css Normal file
View file

@ -0,0 +1,52 @@
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#mount canvas {
/* border-right: 1px solid #aaaaaa40; */
border: 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;
}
.dashboard {
display: flex;
width: 100%;
flex-direction: column;
}
.dashboard .row {
margin-top: 20px;
display: flex;
width: 100%;
flex-direction: row;
}
.dashboard .row .col {
display: flex;
flex: 1;
width: 100%;
}
.center {
justify-content: center;
align-items: center;
}
.transform {
display: flex;
margin-top: 10px;
}
.transform input {
width: 100px;
margin-right: 12px;
}

52
packages/core/example/index.html
View file

@ -2,39 +2,31 @@
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
#mount 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;
}
.transform {
margin-top: 10px;
}
.transform input {
width: 100px;
margin-right: 12px;
}
</style>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="mount"></div>
<div id="action">
<div class="transform">
<span>scale:</span>
<input id="scale" type="number" value="1"/>
<span>scrollX:</span>
<input id="scrollX" type="number" value="0"/>
<span>scrollY:</span>
<input id="scrollY" type="number" value="0"/>
<div class="dashboard">
<div class="row">
<div class="col center">
<div id="mount"></div>
</div>
<div class="col">
<div class="elem-list" id="elem-list"></div>
</div>
</div>
<div class="row">
<div class="col center">
<div class="transform">
<span>scale:</span>
<input id="scale" type="number" value="1"/>
<span>scrollX:</span>
<input id="scrollX" type="number" value="0"/>
<span>scrollY:</span>
<input id="scrollY" type="number" value="0"/>
</div>
</div>
<div class="col"></div>
</div>
</div>