I am creating a diagram creation tool for constructing flowchart using mxGraph, with the dynamictoolbar.html as a base template. So far, I have been able to add in the images of all the shapes in the toolbar and have it draggable across the graph. The shapes are as follows: Ellipses, Hexagon, Rectangle, and Diamond. The only issue I found is implementing the Parallelogram shape.
I tried this code so far:
addVertex('editors/images/parallelogram.gif', 40, 40, 'shape=parallelogram');
But to no avail
I later found out after opening the diagrameditor.xml that mxGraph has no parallelogram shape. The closest shape was Rhombus, but the user has to rotate it and make it larger to make it look like a parallelogram, which is inadvisable.
Please someone suggest me how to accomplish this.
Related
I would like to draw a rectangle with the mouse and after that be able to edit it is a quadrilateral (polygon) by dragging the corners (to be clear about editing, I found a similar behavior on Konva.js: https://codesandbox.io/s/oxwx9q9ko6 and Fabric.js - click the "Toggle editing polygon" button: http://fabricjs.com/custom-controls-polygon)
I didn't find a ready-made solution and decided implement it myself.
And I have 2 options how to do it:
I can use Rect for drawing, after convert Rect to Line by points and continue to work with shape like as Line, as in the example: https://codesandbox.io/s/oxwx9q9ko6
I can use Line for draw and edit corners like in the example above: https://codesandbox.io/s/oxwx9q9ko6
But in this case, I have to implement the drawing of the rectangle myself, like as Rect
Could you help me with these 2 options and share your opinion and experience?
Maybe I can implement it in simpler way (with Transformer, for example) and I don't know about it.
P.S. I have a React web application and plan to use the react-konva package
Thank you!
I'm working on a canvas-based heatmap using a library called simpleheat (https://github.com/mourner/simpleheat). I've got the heatmap effect working, but does anyone here know how I'd be able to achieve a glow affect like the image below? I've tried implementing this effect with Pixi filters, but haven't had any luck so far.
If you do this manually, or point by point based on xy coordinates for a map that you might have, you could just make a canvas overlay for the map and then draw points on the canvas as overlays. I think you can also set the canvas colors as rgba to make them slightly transparent.
(srry i was gonna make this a comment but i dont have enough reputation for that lol)
hope this helps
When I create a point using Three.js it looks like a square. How can I make it look round? I saw in the documentation some blending factors but I did not quite understand how to use them on my points and I don't even know whether it is the right way to do it.
One trick I used is to create an SVG circle element, render it to a canvas with canvg, and render that canvas to a texture to use in a point cloud.
By applying gradients on the circle, I can give the illusion of shininess on a 3D sphere with a 2D circle.
There's too much code to post into an answer but I have a project over at Github you can look at, if interested, which demonstrates the idea. See: https://github.com/alexpreynolds/cubemaker and the associated demo at: http://alexpreynolds.github.io/cubemaker/
If you just want circles and no "shiny" effect, you could remove the gradients. Or draw a circle directly to a canvas element and skip SVG altogether.
Alex Reynolds' answer is correct. I add this one to give more details : as far as I know there are two ways to customize your points' look.
As the docs suggets, using textures (THREE.PointsMaterial({map:texture})):
The most intuitive is to use an image of yours :
var texture=THREE.ImageUtils.loadTexture('url-to-my-image');
You can also draw something in a canvas and use it as a texture. This includes raw drawing in the canvas, SVG importing as Alex Reynolds suggests, or any other technique. You can check his link and look for threejs examples. This is particularly used to render 2D text on sprites, you will find more examples with that.
var texture=THREE.Texture(canvas);
Check three.js examples for more details on using textures on Points
Using shaders :
If you know about shaders, you can write a small fragment shader that will result in the lightest and most precise of those solutions.
I am working with Cesium and I am using the Cesium.WallGeometry and I would like to thicken my walls to make them more visible when viewed from a distance because at certain angles the wall disappears. The only thing I can seem to do is change the maximum and minimum heights to lengthen the wall but no way to widen it. Anyone know either an attribute function that I missed or a way to modify the cesium source to change this? I am working with the full b-29 version of Cesium right now.
Walls in Cesium have no thickness; if you would like to draw a thick wall you should be using either Corridor or Polygon geometry. There are several other types of geometry that may provide what you are looking for as well; those links have more.
I am trying to achieve the following with javascript:
draw a scatter plot with many (~10,000) points
allow the user to draw a curved shape on top of the plot to select a region (I am open to exactly how the shape is designed: an ellipse would be fine, or a polygon, or a path defined by bezier curves)
get a list of the points inside the selected area and do something with them.
Obviously, it is step 2 that is causing the problem. I have previously used jqplot to something similar to the above using a rectangular selection, but it is vital for the purposes of this project that the user be able to select an elliptical region.
Can anybody give any hint as to which javascript library would allow this?
I know that you can create paths using Raphael. I would have though that the most difficult part of this would be the last, but I did find this (yes, I know it's VB, but it gives a basis that can be applied to JavaScript).