36:null 37:["$","title",null,{"children":"SVG | zq | Observable"}] 3d:T8fe,html``3e:Tb0a,html``3f:Tbb5,{ const constructor = html`

` Vue.createApp({ data(){ return { showPoint:true, strokeWidth:2, maxWidth:100, maxHeight:150, arcHeight:20,//圆弧高度，短直径 height:50 } }, template:`

height: arcHeight:

` }).mount(constructor) return constructor }40:Td53,{ const container = html`

贝塞尔曲线控制

M200 250 C141.5 130 421.5 146 500 250

闭合 *双击可添加控制点

鼠标轨迹

闭合 *双击可添加控制点

` $(function(){ $('#svgMain',container).dblclick(function(e){ var cx = e.pageX-$(this).parent().offset().left; var cy = e.pageY-$(this).parent().offset().top; var circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", cx); circle.setAttribute("cy", cy); circle.setAttribute("r", 5); circle.setAttribute("data-type", $('#selType').val()); $(this).append(circle); setPoints($(circle)); setPolyline(); setPath(); }); $('#svgMain circle',container).each(function(){ setPoints($(this)); }); $('#chkZ').change(function(){ setPolyline(); setPath(); }); setPolyline(); setPath(); }); function setPoints(obj) { var mouseDown=false; obj.mousedown(function(){ mouseDown=true; }); obj.parent().mouseup(function(){ mouseDown=false; }); obj.parent().mousemove(function(e){ e.preventDefault(); if(mouseDown) { obj.attr('cx',e.pageX-obj.parent().offset().left); obj.attr('cy',e.pageY-obj.parent().offset().top); setPolyline(); setPath(); } }); } function setPolyline() { var points = ''; $('#svgMain circle').each(function(){ points += $(this).attr('cx') + ',' + $(this).attr('cy') + ' '; }); $('#svgMain polyline').attr('points', points); } function setPath() { var d = ''; var lastType = ''; $('#svgMain circle').each(function(){ var cx = $(this).attr('cx'); var cy = $(this).attr('cy'); var t = $(this).data('type'); if (lastType != t || t == 'M'){ d += t; } if (t == 'H') { d += cx + ' '; } else if (t == 'V') { d += cy + ' '; } else { d += cx + ' ' + cy + ' '; } lastType = t; }); if ($('#chkZ')[0].checked) { d += ' Z'; } $('#svgMain path').attr('d', d); } return container; }42:[] 3b:{"id":"721a053756464ea9","slug":"untitled/4","title":"SVG","thumbnail":"e56a3c318a0ba8b44d3a55da8b6084f575035f688e5726e8b4d39998777dfd2f","access_level":"public","create_time":"$D2021-05-08T01:27:11.410Z","update_time":"$D2023-03-14T09:51:39.636Z","view_time":null,"first_public_time":"$D2021-05-08T01:29:07.579Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":234,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG","cells":[{"id":0,"value":"md`# SVG`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"appContainer = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"controller = {\n return Vue.createApp({\n components:{\n grid:grid\n },\n data(){\n return {\n title:\"标题\",\n gridoption:{\n data:[\n {x:30,y:20,value:10},\n {x:30,y:20,value:10}\n ]\n }\n }\n }\n }).mount(appContainer)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"series = ({\n data(){\n return {}\n },\n template:`\n\n\n`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"grid = ({\n props:{\n top:{default:0},\n left:{default:0},\n width:{default:100},\n height:{default:100},\n data:{default:function(){return []}},\n xasix:{default:function(){\n return {\n max:100,\n min:0,\n reverse:false\n }\n }},\n yasix:{default:function(){\n return {\n max:100,\n min:0,\n reverse:false\n }\n }}\n },\n data(){return {}},\n computed:{\n xscale(){\n return [this.xasix.min,this.xasix.max,this.left,this.width+this.left]\n },\n yscale(){\n return [this.yasix.min,this.yasix.max,this.top,this.height+this.top]\n }\n },\n methods:{\n x2pix(v){\n return vue2pix(v,this.xscale)\n },\n y2pix(v){\n return vue2pix(v,this.yscale)\n }\n },\n template:`\n\n\n\n\n\n`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"\nfunction vue2pix(d,ops){\n return (d-ops[0])/(ops[1]-ops[0]) * (ops[3]-ops[2]) + ops[2];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n## Text\n\n* text-anchor=\"start\" start|middle|end\n* dominant-baseline=\"hanging\" hangin|middle\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"svg`\nsss\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function svg(){\n console.log(arguments);\n return 333\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"test = {\n \n console.log(1)\n console.log(html)\n return 3333\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`## 圆柱`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`## 路径编辑器`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Vue = require('vue@3.0.11/dist/vue.global.js').catch(()=>window[\"Vue\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$$ = require(\"jquery\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1"}} 3c:"$3b:body"