如何解决Two.js中文本的阴影效果和边框
我正在使用two.js库,我需要绘制一个标签,该标签固定到也在two.js中呈现的其他对象。所以这个标签看起来像这样:
我要获得的最重要的效果是阴影,two.js中的矩形对象没有这样的属性
我的第一个想法是创建文本和矩形:
const labelText = renderer.makeText(text,positionX,positionY);
const labelBorder = renderer.makeRectangle(positionX,positionY,width,height);
不幸的是,我找不到为该矩形制作阴影的解决方案... 有什么方法可以在two.js中创建阴影效果,还是可以创建一个对象并为其添加CSS样式?
这是一个由two.js呈现的HTML对象:
<g id="two-77" transform="matrix(1 0 0 1 0 0)" opacity="1">
<text transform="matrix(1 0 0 1 240.915 356.295)" font-family="sans-serif" font-size="11" line-height="17" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" font-style="normal" font-weight="500" text-decoration="none" fill="black" stroke="transparent" stroke-width="1" opacity="1" class="" visibility="visible" id="two-78">Some text
</text>
<path transform="matrix(1 0 0 1 240.915 356.295)" d="M -29.75 -7.5 L 29.75 -7.5 L 29.75 7.5 L -29.75 7.5 Z " fill="#fff" stroke="black" stroke-width="1" stroke-opacity="0.3" fill-opacity="0.3" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" id="two-79">
</path>
</g>
我也尝试过向渲染的labelBorder添加样式,但是什么也没发生:
<path transform="matrix(1 0 0 1 240.915 356.295)" d="M -29.75 -7.5 L 29.75 -7.5 L 29.75 7.5 L -29.75 7.5 Z " fill="#fff" stroke="black" stroke-width="1" stroke-opacity="0.3" fill-opacity="0.3" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" id="two-79"
style="
-webkit-box-shadow: 3px 5px 6px 3px rgba(150,139,150,0.42);
-moz-box-shadow: 3px 5px 6px 3px rgba(150,0.42);
box-shadow: 3px 5px 6px 3px rgba(150,0.42);
"></path>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。