Two.js不能画虚线、不能嵌入图片的解决方案
2019-10-16 14:41
148 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/shenjuntao520/article/details/102585260
仔细阅读过Two.js的api后,就会发现,类库并不支持画虚线和嵌入图片的功能,那么如何画虚线图形和嵌入图片呢。答案是,利用原生的svg,然后覆盖在Two.js的画布上。
[code] <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg"> <g stroke="#75afff" fill="transparent" stroke-width="2"> <circle id="circle1" stroke-dasharray="10,4"></circle> </g> <image x="180" y="240" width="32" height="32" xlink:href="../img/abc.png"/> </svg>
这里的g标签就是定义了stroke(边框颜色)、fill(填充颜色)、stroke-width(边框宽度)。而circle中的stroke-dasharray则是定义了虚线的样式,这里接收一个num1,num2的格式,其中num1代表实线的长度,num2代表实线间的间隔长度,也可以放多个数字,用逗号隔开,就是第一组实现长度、第一组间隔长度、第二组实现长度、第二组间隔长度这样循环。image标签的x,y为中心坐标,width、height为宽高,xlink:href为图片路径。
其中的css为:
[code]#svg{ width:100%; height:100%; display: block; position: absolute; z-index:-1; }
这样svg画布就是一个全屏,并且沉在下面一层的样式了,和Two.js画布可以重叠显示。
相关文章推荐
- Django 的图片、css、js等文件不能使用 的解决方案
- Spring mvc中不能引入js等静态文件问题的解决方案
- swt 嵌入 xulrunner 中文目录不能正常执行js调用java
- 浏览器中的js不能同步更新的解决方案
- struts2框架下Tomcat不能加载css、js和图片等静态资源的解决办法
- myeclipse 中js文件乱码不能保存解决方案
- 关于从相册取出图片后,图片不能按原来角度显示的问题解决方案
- IE6支持透明PNG图片解决方案:DD_belatedPNG.js
- Ext.Window中嵌入jsp,js不能运行
- JS等比例缩放图片并构建图片水平垂直居中解决方案
- Struts2 访问Action和Jsp页面出现的路径问题解决方案之 ---- 为jsp、图片、js、css等获取Web工程的绝对路径的方法
- idea中spring boot 修改静态资源(js,html) 和 java 不能立即生效,必须重启的解决方案
- HTML5页面嵌入APP不能正常显示解决方案
- gif格式的图片不能存在与包含js目录的路径中?
- js 判断图片是否存在 解决方案[兼容多浏览器]
- commons FileUpload 上传图片,服务器文件夹不能自动刷新的解决方案
- ie6不能正常显示png24透明图片解决方案_完善中...
- 关于MO打印时不能正确打印用DC自己画出来的图片的问题的解决方案
- Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js
- js 里不能使用${pageContext.request.contextPath}解决方案