免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 发帖

tikzjax 能脱离服务器用吗?

如题。tikzjax的网址如下:
http://tikzjax.com

就是在网页上显示tikz图片的那种javascript,网址上面画了一个圆。但我下载之后,发现只能引用那个网址里的javascript,下载到电脑里就不能用了。怎么才能在自己的电脑里直接用呢?
另外我很喜欢tkz-euclide这个包,不知道这个能不能也一起在网页里显示。
分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友

回复 4# kuing

我就是把整个网页都下载下来了,然后直接打开,但也显示不了。问了网友,说是cors的问题,在以前好像是可以的,然后近几年安全性提升了,就不行了。然后我就搜索有关的内容,好像是谷歌有一个什么插件,能直接让它生效这种,但还没弄明白。

其实用这个,并且想用tkz-euclide,就是已经熟悉它了,不想再换别的了,要是换别的,还得再学一套新的东西。如果能直接在网页上显示,然后在真的latex里也能用,那就最好了,什么都不用改,在真的latex里画好了就能直接发到网页上,或者在网页上测试,等完全画好了直接粘贴到真的latex里,那就最方便了。

TOP

本帖最后由 abababa 于 2020-6-10 14:03 编辑

回复 5# kuing

论坛上能不能用我就更不会了,但刚才不知怎么弄的,在我的电脑上就可以了,是安装了插件,安装的这个:
Moesif Orign & CORS Changer
然后浏览器上有一个图标,初始时是off,然后点进去变成on,再刷新我的tikzjax网页就能用了。

我先在这里试一试:

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


看来这里是显示不了,那个script什么的没识别出来。

TOP

回复 10# kuing

这个所说的插件我也不太懂,只是按网友说的下载了这么一个,就什么都不需要改,直接就能看了。网友的原话是:插件解决了那个cors问题,当自己无法取得对应的js脚本时可以用插件解决,当能取得js脚本时可以修改脚本,绕过cors问题。
我在想是不是这个tikzjax就是属于那种能取得js脚本的,就是下载下来一个js文件,然后改这个文件就可以了。

TOP

SVG代码太多了,我觉得就是像latex这样,打出画图的代码,然后在网页上直接显示,这样就很好。

TOP

这个在我的电脑上弄明白了,用Chrome浏览器,然后发送一个快捷方式到桌面上,再右键点那个快捷方式,有一个“属性”,在目标(蓝色)那里填入:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=~/chromeTemp
就是.exe"后面那些,然后双击这个快捷方式,就能打开文档了。我上传一个index.html的文档,打开这个就能看到一个圆。
index.html (317 Bytes)
无标题.gif
2021-9-13 18:14

TOP

回复 18# kuing

这个能不能用js动态来替换?另外我发现4楼的网址里,那个能显示出来图,它的源代码就是直接引用了自己服务器上的,而不是引用了其它服务器上的。那这样的话,能不能把tikzjax.js这个的整个源代码复制过来,然后粘贴到论坛里的一个地方,就是在论坛里新建一个script,专门放那个画图的源代码,这样应该就不会有所说的“跨域”问题了吧,因为现在都是在自己的一个域里。版主能不能建立一个测试论坛专门试一下看看好不好用。

TOP

本帖最后由 abababa 于 2021-10-1 18:54 编辑

回复 19# abababa

果然,我试了,我把tikzjax.js整个复制下来,然后在index.html里,就不引用网站的那个js,而是直接写上
<script src="tikzjax.js"></script>

这样就不用调浏览器了,直接就能显示了。我放了两个附件,下载下来放在同一个文件夹里,然后打开index.html就能显示出一个圆了。
index.html (297 Bytes) tikzjax.js (953.26 KB)

TOP

本帖最后由 abababa 于 2021-10-2 08:57 编辑

回复 23# kuing

一开始就是那个“跨域”的问题弄得显示不了,我就想如果是在同一个域里,那就不用引用别的域名了,就不会有问题,所以试了一下果然就好用了。那个https是不是就变成安全链接了,也没有这个问题了。
加载慢的话,把js代码复制过来,放在自己的网页里就好了吧,加载就是在自己网页里加载。
但是我用geogebra画了一个y=x^2的抛物线,然后导出tikz,粘贴到网页里,显示的还是不正确,在x<0处的图变成y=-x^2的图了,还有坐标轴的x,y标的地方也和geogebra里不一样。

TOP

本帖最后由 abababa 于 2021-10-2 18:44 编辑

回复 25# kuing
  1. <script type="text/tikz">
  2.   \begin{tikzpicture}
  3.     \draw (0,0) circle (1in);
  4.        
  5.         \draw[->,color=black] (-2.52,0) -- (2.24,0);
  6. \foreach \x in {-2,2}
  7. \draw[shift={(\x,0)},color=black] (0pt,2pt) -- (0pt,-2pt) node[below] {\footnotesize $\x$};
  8. \draw[->,color=black] (0,-1.02) -- (0,3.12);
  9. \foreach \y in {,2}
  10. \draw[shift={(0,\y)},color=black] (2pt,0pt) -- (-2pt,0pt) node[left] {\footnotesize $\y$};
  11. \clip(-2.52,-1.02) rectangle (2.24,3.12);

  12. \draw [samples=50,rotate around={0:(0,0)},xshift=0cm,yshift=0cm] plot (\x,\x^2/2/0.5);
  13.   \end{tikzpicture}
  14. </script>
复制代码
如上代码,先是画了一个圆,然后下边的那些,是从Geogebra里导出tikz后复制的。

那如果不引用js文件呢,而是编辑那个论坛的模板,直接加一段script上去,把js文件里的内容全复制粘贴过去,不就是变成本域名下面了吗,这样就可以用了吧。不过如果像上面那样抛物线的效果不太好,用着还是不行。

TOP

回复 27# kuing

果然如此,那还是不用其它软件导出,直接写tikz代码方便。要是这个能用tkz-euclide就更好了,画平面几何图简单,好像也能自定义命令吧,像那个网页版的katex一样,自定义出那些命令就应该都能用了。

TOP

本帖最后由 abababa 于 2021-10-4 17:26 编辑

这个如果把
  1. var scripts = document.getElementsByTagName('script');
  2.   var tikzScripts = Array.prototype.slice.call(scripts).filter(e => e.getAttribute('type') === 'text/tikz');
复制代码
这两行的第一行,改成
  1. var scripts = document.getElementsByTagName('tikz');
复制代码
然后在index.html页面里,就不用写<script>这样的脚本了,而是写
  1. <tikz type="text/tikz">
  2.   \begin{tikzpicture}
  3.     \draw (0,0) circle (1in);
  4.   \end{tikzpicture}
  5. </tikz>
复制代码
标签变成tikz了,这样就属于安全的了吧,因为听说script可能不安全。
tikzjax1.js (953.26 KB) index.html (707 Bytes)

TOP

回复 34# kuing

那这样的话,是不是能新建一个标签,比如叫[tikzimg] [/tikzimg],然后就像草稿本那样,运行一个javascript脚本,把这个标签里的反斜线跟换行符都替换了,这样不就能正确显示了。如果那个网站坏了,那只要把这个替换的脚本删除,不做替换,就恢复成原来的tikz代码了,复制一下就能在自己电脑上直接编译了。

TOP

本帖最后由 abababa 于 2021-11-15 19:07 编辑

回复 36# hbghlyj
哦,原来有这样一个函数可用,谢谢。

回复 37# kuing
那能不能换成标签那种呢?就是尖括号的那种。我做了一个html文档,画的就是之前画的两个图,是用javascript替换的。

index2.html (1018 Bytes)

或者单独新建一个BBCode标签,比如叫[tikzimg],然后是在帖子里,那么帖子内容应该也有一个html的标签,然后就还是用document.getElementsBy...这样的函数取得帖子的标签,然后再把帖子里的文本做一下替换,就替换[tikzimg]里面那些,不过那个after的函数我就不知道怎么用了,好像只能是对尖括号的标签这样的东西用。

TOP

回复 41# hbghlyj

这样改了之后,BBCode还能嵌套吗?比如加粗的斜体这种。

TOP

回复 49# kuing

整个替换会不会太慢,而且会不会在有些地方有问题?我觉得可以只替换帖子内容部分,就是div class="postmessage"的那个,这个是不是也能做?

TOP

[i=s] 本帖最后由 abababa 于 2021-11-16 17:36 编辑 [/i]

发一个试试

[tikz]\begin{tikzpicture}[line cap=round,line join=round,>=triangle 45,x=1.0cm,y=1.0cm]
\clip(-5.76,-6.46) rectangle (17.2,2.72);
\draw [line width=1.2pt,color=qqwuqq] (0,0) circle (2cm);
\draw [line width=1.2pt,color=qqwuqq] (0,2)-- (1.45,-1.38);
\draw [line width=1.2pt,color=qqwuqq] (0,2)-- (-1,-1.73);
\draw [line width=1.2pt,color=qqwuqq] (0,2)-- (0,-2);
\draw [line width=1.2pt,color=qqwuqq] (0,-2)-- (-2.84,-2);
\draw [line width=1.2pt,color=qqwuqq] (-2.84,-2)-- (0.66,0.46);
\draw [line width=1.2pt,color=qqwuqq] (-2.84,-2)-- (1.45,-1.38);
\begin{scriptsize}
\fill [color=qqqqff] (0,0) circle (1.5pt);
\draw[color=qqqqff] (0.16,0.26) node {$O$};
\fill [color=qqqqff] (0,2) circle (1.5pt);
\draw[color=qqqqff] (0.08,2.3) node {$A$};
\fill [color=qqqqff] (1.45,-1.38) circle (1.5pt);
\draw[color=qqqqff] (1.82,-1.54) node {$B$};
\fill [color=qqqqff] (-1.45,5.38) circle (1.5pt);
\draw[color=qqqqff] (-5.66,2.86) node {$B'$};
\fill [color=qqqqff] (0,-2) circle (1.5pt);
\draw[color=qqqqff] (0.08,-2.18) node {$P$};
\fill [color=qqqqff] (-1,-1.73) circle (1.5pt);
\draw[color=qqqqff] (-1.1,-1.44) node {$C$};
\fill [color=qqqqff] (-2.84,-2) circle (1.5pt);
\draw[color=qqqqff] (-3.04,-2.08) node {$T$};
\fill [color=qqqqff] (0.66,0.46) circle (1.5pt);
\draw[color=qqqqff] (0.88,0.72) node {$N$};
\fill [color=qqqqff] (-0.66,-0.46) circle (1.5pt);
\draw[color=qqqqff] (-0.88,-0.26) node {$M$};
\end{scriptsize}
\end{tikzpicture}[/tikz]

TOP

回复 52# abababa

怎么这么多乱码?

TOP

回复 54# kuing

原来如此。那替换的时候,把tikz里的<br>都替换了就好了吧。不过看后面还有font什么的,不知道是什么。

TOP

回复 56# kuing
再试一下去掉color的,那些颜色是用Geogebra画图时加了颜色,然后软件自动生成的一些颜色,在前面有\definecolor{qqwuqq}{rgb}{0,0.39,0}这样的定义,如果去掉这些定义,在真的latex里就不能编译了,但在这里就是全变成黑色。
[tikz]\begin{tikzpicture}[line cap=round,line join=round,>=triangle 45,x=1.0cm,y=1.0cm]
\clip(-3.68,-2.76) rectangle (2.5,2.58);
\draw [line width=1.2pt] (0,0) circle (2cm);
\draw [line width=1.2pt] (0,2)-- (1.45,-1.38);
\draw [line width=1.2pt] (0,2)-- (-1,-1.73);
\draw [line width=1.2pt] (0,2)-- (0,-2);
\draw [line width=1.2pt] (0,-2)-- (-2.84,-2);
\draw [line width=1.2pt] (-2.84,-2)-- (0.66,0.46);
\draw [line width=1.2pt] (-2.84,-2)-- (1.45,-1.38);
\begin{scriptsize}
\fill  (0,0) circle (1.5pt);
\draw (0.16,0.26) node {$O$};
\fill  (0,2) circle (1.5pt);
\draw (0.08,2.3) node {$A$};
\fill  (1.45,-1.38) circle (1.5pt);
\draw (1.82,-1.54) node {$B$};
\fill  (0,-2) circle (1.5pt);
\draw (0.08,-2.18) node {$P$};
\fill  (-1,-1.73) circle (1.5pt);
\draw (-1.1,-1.44) node {$C$};
\fill  (-2.84,-2) circle (1.5pt);
\draw (-3.04,-2.08) node {$T$};
\fill  (0.66,0.46) circle (1.5pt);
\draw (0.88,0.72) node {$N$};
\fill  (-0.66,-0.46) circle (1.5pt);
\draw (-0.88,-0.26) node {$M$};
\end{scriptsize}
\end{tikzpicture}[/tikz]

TOP

返回列表 回复 发帖