0
236
VistasRellene el área de intersección entre el círculo y la función en JSXGraph
Tengo un círculo y una función simple Math.cos(x)
Quiero que el círculo se llene cuando se cruce con esa función (llene solo el lado superior). Pero no está funcionando.
Guion:
// circle var point1 = app.board.create('point', [0,0], {size: 2, strokeWidth:2 }) var point2 = app.board.create('point', [6,0], {size: 2, strokeWidth:2 }) var circle = app.board.create('circle', [point1,point2], {strokeColor: "#f00", strokeWidth: 2 }) // function var func = app.board.create('functiongraph',[function(x){ return Math.cos(x)}]); // intersection var curve = app.board.create('curve', [[], []], {strokeWidth: 0, fillColor: "#09f", fillOpacity: 0.8}) curve.updateDataArray = function() { var a = JXG.Math.Clip.intersection(circle, func, this.board); this.dataX = a[0]; this.dataY = a[1] }; app.board.update()Producción
Salida esperada (lo hice en Paint)
Gracias de antemano :)
2 Respuestas
Responde la pregunta0
En el siguiente ejemplo, estoy creando el atributo d para la ruta usando Math.cos(). Supongo que su función puede ser diferente. Tenga en cuenta que al final del atributo d, la ruta cierra la parte superior del lienzo svg. Estoy usando el pth dentro de un clipPath y estoy recortando el círculo con él.
let d ="M"; for(let x = -50; x<=50; x+=1){ d+=`${x}, ${5*Math.cos(x/5)} ` } d+="L50,-50L-50,-50z" pth.setAttribute("d",d); <svg viewBox="-50 -50 100 100" width="200"> <clipPath id="clip"> <path id="pth"/> </clipPath> <circle r="45" clip-path="url(#clip)" fill="blue"/> </svg>Para comprender mejor cómo estoy construyendo la ruta, eche un vistazo al siguiente ejemplo:
let d ="M"; for(let x = -50; x<=50; x+=1){ d+=`${x}, ${5*Math.cos(x/5)} ` } d+="L50,-50L-50,-50z" pth.setAttribute("d",d); <svg viewBox="-50 -50 100 100" width="200"> <circle r="45" fill="blue"/> <path id="pth" fill="rgba(250,0,0,.4)"/> </svg>0
Esto se puede realizar fácilmente con la próxima versión de JSXGraph que se lanzará la próxima semana: con el elemento de inequality se puede marcar el área sobre la curva del coseno. El elemento de desigualdad es una curva cerrada y puede intersecarse con un círculo. En v1.2.3, la intersección no funciona debido a un pequeño error.
Para el recorte, la próxima versión contiene nuevos elementos curveintersection , curveunion , curvedifference que facilitan el uso de los métodos de JXG.Math.Clip, pero por supuesto su enfoque con JXG.Math.Clip seguirá funcionando.
Aquí está el código:
var f = board.create('functiongraph', ['cos(x)']); var ineq = board.create('inequality', [f], { inverse: true, fillOpacity: 0.1 }); var circ = board.create('circle', [[0,0], 4]); var clip = board.create('curveintersection', [ineq, circ], { fillColor: 'yellow', fillOpacity: 0.6 }); 
En realidad, el elemento desigualdad hace lo mismo que enxaneta "a mano".