图像绘制

Author: Linho1219

src/App.vue

@@ -1,15 +1,52 @@
+<template>
+  <Navbar />
+  <div id="content">
+    <div id="editor" @click="graphData.push({ fn: 'sin(x)' })">{{ graphData }}</div>
+    <Graph :graphData="graphData" />
+  </div>
+</template>
+
 <script setup lang="ts">
 import Navbar from "./components/nav.vue";
-import Editor from "./components/editor.vue";
 import Graph from "./components/graph.vue";
-</script>
+import type { FunctionPlotDatum } from "function-plot";
 
-<template>
-  <Navbar />
-  <Editor />
-  <Graph />
-</template>
+import { reactive, ref, watch } from "vue";
+const graphData = ref([{ fn: 'x^2' }]);
+const cnt = ref(0);
+watch(graphData, () => cnt.value++,{deep:true});
+</script>
 
 <style>
+#app {
+  position: fixed;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+}
+#content {
+  width: 100vw;
+  flex-grow: 1;
+  display: flex;
+}
+#navbar {
+  height: 50px;
+  width: 100vw;
+  background: #fff3;
+  position: relative;
+}
 
+#editor {
+  width: 40vw;
+}
+#graph {
+  width: 60vw;
+  position: relative;
+}
 </style>

src/components/editor.vue

@@ -2,7 +2,4 @@
   <div id="editor"></div>
 </template>
 <style>
-#editor {
-  height: 80px;
-}
 </style>

src/components/graph.vue

@@ -1,3 +1,59 @@
 <template>
-	<div id="graph"></div>
-</template>
+  <div id="graph" ref="shellRef">
+    {{ width }},{{ height }},{{ cnt }}
+    <div id="graphRender" ref="plotRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
+import functionPlot from "function-plot";
+import type { FunctionPlotDatum } from "function-plot";
+const { graphData } = defineProps<{ graphData: FunctionPlotDatum[] }>();
+const shellRef = ref<HTMLDivElement | null>(null);
+const plotRef = ref<HTMLDivElement | null>(null);
+const width = ref(0),
+  height = ref(0);
+const cnt = ref(0);
+const handleResize = () => {
+  if (shellRef.value) {
+    width.value = shellRef.value.clientWidth;
+    height.value = shellRef.value.clientHeight;
+  }
+};
+onMounted(() => {
+  handleResize();
+  window.addEventListener("resize", handleResize);
+  watch(
+    [width, height, () => graphData],
+    () => {
+			cnt.value++
+      if (plotRef.value && width.value && height.value) {
+        functionPlot({
+          data: JSON.parse(JSON.stringify(graphData)),
+          target: plotRef.value,
+          width: width.value,
+          height: height.value,
+        });
+        cnt.value++;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+});
+onUnmounted(() => window.removeEventListener("resize", handleResize));
+watch(
+  () => graphData,
+  () => cnt.value++
+);
+</script>
+
+<style>
+#graphRender {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+</style>

src/components/nav.vue

@@ -1,3 +1,20 @@
 <template>
-	<div id="navbar"></div>
-</template>
+  <div id="navbar">
+    <span class="nav-title">function-plot-GUI</span>
+  </div>
+</template>
+
+<style>
+.nav-title {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 15px;
+  height: fit-content;
+  text-align: left;
+  margin: auto;
+  font-size: 20px;
+  font-weight: bold;
+}
+</style>