仔细阅读过Two.js的api后,就会发现,类库并不支持画虚线和嵌入图片的功能,那么如何画虚线图形和嵌入图片呢。答案是,利用原生的svg,然后覆盖在Two.js的画布上。
<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为:
#svg{
width:100%;
height:100%;
display: block;
position: absolute;
z-index:-1;
}
这样svg画布就是一个全屏,并且沉在下面一层的样式了,和Two.js画布可以重叠显示。