如何解决如何在iframe中使用画布添加添加形状?
请有人可以帮助我解决我的问题。
当我单击按钮时,我想在iframe中添加形状(圆形,矩形,正方形,文本,图像),然后可以拖动并调整iframe中的形状,文本和图像的大小。
我发现了一些库,这些库允许我在canas中添加形状以移动它们并调整大小,但是我无法在iframe中添加它们。
<html><head>
<title> mes objects</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<script type="text/javascript">
jQuery(function($){
var iframe = document.getElementById('theiframe');
var iframediv = iframe.contentWindow.document;
iframediv.body.innerHTML += '<canvas id="thecanvas"></canvas>';
var c = iframediv.getElementById('thecanvas');
var canvas = new fabric.Canvas('c');
$("#addCircle").click(function(){
canvas.add(new fabric.Circle({
radius: 20,fill: 'green',left: 100,top: 100
}));
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="editor">
<input type="button" id="addCircle" value="Add Circle">
<input type="button" id="addsquare" value="Add square">
<input type="button" id="addrectangle" value="Add rectangle">
<input type="button" id="addtriangle" value="Add triangle">
<input type="button" id="addimage" value="Add image">
<input type="button" id="addtext" value="Add text"></div>
<p>
</p>
<iframe name="moniframe" id="theiframe" src="http://localhost:7007/page1/" frameborder= 10 width="600" height="300" onclick="addCircle"> <canvas id="c" width="700" height="700"></canvas></iframe>
</div>
</body>
</html>
预先感谢您的建议。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。