如何在网页中插入三角形状? [英] How to insert trigonometrical shape in webpage?

问题描述

我正在一个项目中，我必须在网页中插入数千个三角形状.基本上，我正在从事一个将html转换成古籍的项目.但是问题是-在Adobe illustrator或任何软件中绘制svg都很耗时，并且在一个html页面中管理成千上万的svg形状对我们来说似乎很困难.我已经在堆栈溢出中进行了大量搜索以快速绘制形状，并发现了此库，该库将latext转换为svg对我们来说似乎是一个很好的解决方案.在此处观看现场演示.我们只需在 Mathcha 中创建一个形状，然后复制该形状的latext并将其插入到我们的html页面中./p>

但是问题是当我们在HTML页面的开头导入 tikzax 库并插入该形状的latext代码时(如解决方案

我尝试设置示例并遇到两个问题.我将解释如何解决这些问题.但是，在执行此操作之前，请尝试再次打开您自己的示例.解决问题后，我回过头来更仔细地研究问题，但是..它起作用了.文件的维护者极有可能调整了 CORS -Headers，而我刚尝试过-所以也许您的问题解决了.如果这样对您不起作用，这是我解决了最初的问题的方法:

1. 该库不允许来自其他域的请求，因此您不能仅包含tikzjax.com的JS文件.为了解决这个问题，您必须下载源文件并将它们放在同一文件夹中. js文件本身还不够，您必须下载以下文件:
   https://tikzjax.com/v1/tikzjax.js
   https://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm . https://tikzjax.com/7620f557a41f2bf40820e76ba1fd4d89a484859d.gz 然后将您的脚本标签更改为该本地js文件:<script src="./tikzjax.js">

2. 当使用file://协议打开页面时，脚本使用fetch来获取其他文件，并且此操作不起作用(您将在控制台中看到以下错误消息:Fetch API cannot load file:///ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. URL scheme must be "http" or "https" for CORS request.
   因此，您必须设置一个本地网络服务器才能显示该页面，例如http://localhost:8080.如果您对命令行感到满意，则可以使用npm软件包 http-server 对于这种情况.如果尚未安装npm和/或节点，则可以从此处安装(npm与节点).然后运行命令npm install -g http-server.然后导航到html和js文件所在的文件夹(在终端中)并执行http-server.这将设置服务器，圆圈应在此处渲染.

I am working a project in which I have to insert thousands of trigonometrical shape in a webpage. Basically I'm working on a project of converting an ancient book in html. But the problem is- drawing a svg in Adobe illustrator or in any software is time consuming and managing thousands of svg shape in one html page seems very difficult for us. I have searched a lot in stack overflow to draw a shape quickly and I found this library which convert latext into svg which seemed to be a great solution for us. See a live demo here. We simply create a shape in Mathcha and copy the latext of the shape and insert it in our html page.

But the problem is when we import the tikzax Library in the head of our html page and insert the latext code of that shape (as instructed in the documentation) in the body like this:

<script type="text/tikz">
  \begin{tikzpicture}
\draw (0,0) circle (1in);
  \end{tikzpicture}
</script>

we can't get the ouptut. It only shows a blank html page . The latext code does not effect in any part of the html page. In short we are unable to render the latext in html. Can someone please explain how to render these latext into svg on a webpage. we are unable to find a way to get of it.

Can someone please explain how to render these tikz latext into svg format in a webpage ?

I've attached the screenshots of the html code and the output of it in the chrome browser.

Screenshot of Code:

Output of the Code in Google Chrome (Blank page) as I have told:

解决方案

I tried to setup the example and ran into two issues. I'll explain how to solve those. However, before you do this, try opening your own example again. After I fixed the issues, I went back to look more closely at the problems, but.. it worked. There is a small chance that the maintainer of the files adjusted the CORS-Headers just while I tried this out - so maybe your problem solved itself. In case it doesn't work for you just like that, here is how I solved the initial problems:

1. The library doesn't allow requests from other domains, so you can't just include the JS file from tikzjax.com. To solve this, you have to download the source files and put them in the same folder. The js file itself is not enough, you have to download these files:
   https://tikzjax.com/v1/tikzjax.js
   https://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. https://tikzjax.com/7620f557a41f2bf40820e76ba1fd4d89a484859d.gz
   Then change your script tag to that local js file: <script src="./tikzjax.js">

2. The script uses fetch to get other files, and this is not working, when opening the page with the file:// protocol (you'll get this error message in the console: Fetch API cannot load file:///ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm. URL scheme must be "http" or "https" for CORS request.
   So you have to setup a local webserver to show the page on e.g. http://localhost:8080. If you're comfortable with the command line, you can use the npm package http-server for such cases. If you haven't installed npm and/or node, you can install it from here (npm is installed with node). Then run the command npm install -g http-server. Then navigate to the folder where your html and js files are (in the terminal) and execute http-server. This will setup the server and the circle should render there.

这篇关于如何在网页中插入三角形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！