【发布时间】:2016-04-05 22:10:35
【问题描述】:
我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Literally Canvas</title>
<link href="css/literallycanvas.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="react-with-addons.min.js"></script>
<script src="underscore-min.js"></script>
<script src="js/literallycanvas-core.min.js"></script>
<script src="js/literallycanvas.js"></script>
</head>
<body>
<div class="literally"></div>
<form class="controls export">
<input type="submit" data-action="export-as-png" value="Export as PNG">
</form>
<script>
$(document).ready(function(){
//initial without jQuery
var lc = LC.init(
document.getElementsByClassName('literally')[0],{
imageURLPrefix:'img',
primaryColor:'#fff',
backgroundColor:'#ddd',
toolbarPosition:'top',
tools:
[
LC.tools.Pencil,
LC.tools.Eraser,
LC.tools.Line,
LC.tools.Rectangle,
LC.tools.Text,
LC.tools.Polygon
]
});
//export as png
$('.controls.export [data-action=export-as-png]').click(function(e) {
e.preventDefault();
window.open(lc.getImage().toDataURL());
});
});
</script>
</body>
</html>
我已经下载了 literallycanvas-0.4.11 并将css/ 和img/ 下的文件添加到我的项目中,以及来自js/ 的相应文件。
我可以看到最初的工作,因为我可以看到 primaryColor 已更改,但我找不到我的工具。
我关注了literally canvas,但它仍然有问题。
有人可以帮帮我吗??
【问题讨论】:
-
嗨,这里是 Literally Canvas 维护者。您应该包含literallycanvas.js 或 literalcanvas-core.js,而不是同时包含两者。尝试删除“核心”版本,然后重试。
-
如果只包含字面意义上的canvas-core.js,则工具栏不可用。
标签: html canvas drag-and-drop drawing