如何纠正 LeaderLine 中的倒置标签？
[英]How to correct upside-down label in LeaderLine?
问题描述
我正在使用LeaderLine并想在input和button之间画一条带有标签的线。 该button位于input的右侧。
目前标签是颠倒的，我希望它是正面朝上的。 我在文档中找不到任何旋转或翻转文本的方法，我不想更改任一元素的位置。
我怎样才能使行上的文本不再颠倒？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.5/leader-line.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { new LeaderLine( document.getElementById("btn"), document.getElementById("text"), {color: "red", size: 8, startLabel: LeaderLine.pathLabel("This is a label")} ); }); </script> </head> <body> <label for="text">Text: </label> <input id="text" type="text"> <button id="btn" type="button" style="margin-left:500px;">Click me</button> </body> </html>
2 个解决方案
解决方案1
3 已采纳 2020-02-26 10:06:13
您需要更换pathLabel与captionLabel 。 https://anseki.github.io/leader-line/#captionlabel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.5/leader-line.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { new LeaderLine( document.getElementById("btn"), document.getElementById("text"), {color: "red", size: 8, startLabel: LeaderLine.captionLabel("This is a label")} ); }); </script> </head> <body> <label for="text">Text: </label> <input id="text" type="text"> <button id="btn" type="button" style="margin-left:500px;">Click me</button> </body> </html>
解决方案2
2 2020-02-26 10:23:38
另一种解决方案是交换开始和结束，将startPlug设置为"arrow1" （或您想要使用的任何其他插头）并将endPlug为"behind" 。
这样就可以保持文本随路径弯曲的效果。 然而，它不如在 Nicolae Maties 解决方案中使用captionLabel直观。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.5/leader-line.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { new LeaderLine( document.getElementById("text"), // start and end were switched document.getElementById("btn"), {color: "red", size: 8, endLabel: LeaderLine.pathLabel("This is a label"), startPlug: "arrow1", endPlug: "behind"} ); }); </script> </head> <body> <label for="text">Text: </label> <input id="text" type="text"> <button id="btn" type="button" style="margin-left:500px;">Click me</button> </body> </html>
WebGL2 3D Texture Image 上下颠倒，如何翻转output？
[英]WebGL2 3D Texture Image coming upside-down, how to flip the output?
执行超时（12000 毫秒）：如何优化 JS kata 以更快地运行？ [颠倒数字-挑战版]
[英]Execution Timed Out (12000 ms): How can I optimize JS kata to run faster? [Upside-Down Numbers - Challenge Edition]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.