腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >生成带有坐标的图像

问生成带有坐标的图像
EN

Stack Overflow用户

提问于 2020-01-30 12:18:20

回答 4查看 126关注 0票数 0

我希望你能帮我解决我的问题。

我想构建一个像这样的在线学习类型测试：

http://till.schnupp.net/honey-mumfort/

问题是用德语写的，脚本是用JS写的。我得到了几乎所有的东西，以及这个脚本的作者是如何通过构建问题和可视化问题来解决部分问题的。现在我不明白的是，他是如何使用用户输入来可视化用户输入的。用户输入用于在坐标系中生成4个点。

我如何在PHP或JS中做到这一点？

http://till.schnupp.net/honey-mumfort/result.php?14&4&5&20

14、4、5、20例如是用户输入，然后将其从js传送到resulat.php

例如，现在您可以看到这张图片。

Example Picture from the Site

你可以参考一下php或者js，我可以用它们来解决这个问题吗？

coordinates

javascript

php

image

回答 4

Stack Overflow用户

发布于 2020-01-30 12:35:05

“他如何能够使用用户输入，以可视化用户输入”

如果您查看HTML，您将看到：

<input type="checkbox" name="yes80" value="P" onclick="onoff(80,yes80,no80)">

和

<input type="checkbox" name="yes80" value="A" onclick="onoff(80,yes80,no80)">

每个checkbox被赋予一个值A，P，R或T。JavaScript只是简单地循环通过复选框，将所有的A，P的R和T相加，然后将这些值传递给php代码。

票数 1

Stack Overflow用户

发布于 2020-01-30 12:45:40

Dmitriy

非常感谢您的贡献。

@Jeff

我不知道的是这些值是如何用来绘制这个坐标系的。有没有一个php函数可以绘制图片并使用这些值作为点？

@m.dmitriy

有没有可能使雷达看起来像一个坐标系，有两个轴？

我想如果我只定义了4个标签，它应该是这样画的吗？

谢谢

票数 0

Stack Overflow用户

发布于 2020-01-30 15:40:37

您可以尝试使用SVG来做到这一点。(codepen here)

为了简单起见，我会试着根据图画来解释我的想法：

紫色区域是svg容器本身
蓝色区域是div容器
橙色区域是相对于紫色svg容器中心的对称多边形，例如
黄色多边形是可以通过输入

<>G211更改的元素

如fig.1所示，svg系统的起点位于左上角的(0,0)。因为您希望将图形保留在center中，所以坐标将具有width的一半或height的一半

基本上，这个(x,y)坐标是按顺时针顺序排列的

top : x/2，input
right : input，y/2
bottom: x/2，input
left : input，y/2

如你所见，顶部和底部是相同的，区别是中心线，在它上面或后面，如图2所示。我们没有x和y轴，所以我们使用现有的width和height轴，因此所有计算都是相对于W和H的。与在fig.3中一样，右侧和左侧相对于蓝线，如果输入小于x/2，则点将在左侧。

let svgElement = document.getElementById("mySvg")
let svgWidth = svgElement.getAttribute("width");
let svgHeight = svgElement.getAttribute("height");

//             x     ,  y  |  x  ,    y      |     x     ,  y  |  x  ,    y
// points: svgWidth/2,input input,svgHeight/2 svgHeight/2,input input,svgHeight/2
document.getElementById("newSvg").addEventListener("click", function(){
  let topValue = document.getElementById("top").value;
  let rightValue = document.getElementById("right").value;
  let bottomValue = document.getElementById("bottom").value;
  let leftValue = document.getElementById("left").value;

  let svgNewPoints = svgWidth/2 +"," + topValue + " " + rightValue +"," + svgHeight/2 + " " + svgHeight/2 + "," + bottomValue + " " + leftValue + "," + svgHeight/2

  console.log(svgNewPoints)

  document.getElementById("myPolygon").setAttribute("points", svgNewPoints);
});

#conatainer{
  width: 350px;
  height: 350px;
  background-color: #3458eb;
}
#mySvg{
  background-color: #4b3a8c;
}

.warning{
  color: red;
} 

.textAxis{
  color: white
}

<div id="conatainer"> <!-- blue -->
  <svg id="mySvg" width="300" height="300" version = "1.1">
    <!-- perfect polygon as example -->
    <polygon points = "150,10  290,150 150,290 10,150 " fill="#ff8000" stroke = "black" stroke-width = "2"/> 
    <!-- your yellow editable polygon -->
    <polygon id="myPolygon" points = "150,20 190,150 150,250 70,150 " fill = "#ffb300" stroke = "black" stroke-width = "2"/> 
    <text x="170" y="20" fill: "white" >Y</text>
    <line x1="150" y1="0" x2="150" y2="300" stroke="black" /> <!-- y axis -->
    <text x="290" y="140" fill: "white" >X</text>
    <line x1="0" y1="150" x2="300" y2="150" stroke="black" /> <!-- x axis -->
  </svg>
</div>

<div id="controls" >

  <div class ="myInput">
    <label for="top">Top</label>
    <input id="top" value="20">
    <label class="warning"  for="male"> smaller than height/2</label>
  </div>

  <div class ="myInput">
    <label for="right">Right</label>
    <input id="right" value="190">
    <label class="warning"  for="male"> bigger than width/2</label>
  </div>

  <div class ="myInput">
    <label for="bottom">Bottom</label>
    <input id="bottom" value="250">
    <label class="warning" for="male"> bigger than height/2</label>
  </div>

  <div class ="myInput">
    <label for="left">Left</label>
    <input id="left" value="70">
    <label class="warning"  for="male">smaller than width/2</label>
  </div>

  <button id="newSvg"> Resize </button>
</div>