您的位置:首页 > Web前端 > JavaScript

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画布可以重叠显示。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: