/** Turns a List<CubicCurve2D.Float> into a SVG Element representing a sketch of that spline. */ Element splineToSketch(SVGDocument document, List<CubicCurve2D.Float> spline) { String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI; // <g> is an SVG group // TODO: add a random(ish) rotation to the group Element group = document.createElementNS(svgNS, "g"); // For each curve in the path, draw along it using a "brush". In // our case the brush is a simple circle, but this could be changed // to something more advanced. for (CubicCurve2D.Float curve : spline) { // TODO: magic number & step in loop guard for (double i = 0.0; i <= 1.0; i += 0.01) { Point2D result = evalParametric(curve, i); // Add random jitter at some random positive or negative // distance along the unit normal to the tangent of the // curve Point2D n = vectorUnitNormal(evalParametricTangent(curve, i)); float dx = (float) ((Math.random() - 0.5) * n.getX()); float dy = (float) ((Math.random() - 0.5) * n.getY()); Element brush = document.createElementNS(svgNS, "circle"); brush.setAttribute("cx", Double.toString(result.getX() + dx)); brush.setAttribute("cy", Double.toString(result.getY() + dy)); // TODO: magic number for circle radius brush.setAttribute("r", Double.toString(1.0)); brush.setAttribute("fill", "green"); brush.setAttributeNS(null, "z-index", Integer.toString(zOrder.CONTOUR.ordinal())); group.appendChild(brush); } } return group; }
@Override public SVGDocument toSVG(ConcreteDiagram cd) { /* * Use a Plain drawer to generate an SVG Document, then * "post-process" any SVG circles in the document to convert them * into "sketches". */ SVGDocument document = (new PlainCircleSVGDrawer()).toSVG(cd); // return document; // find each circle in the document and turn it into a sketch. We // need to keep track of the circles and their eventual replacements // as each circle is replaced by 10's of smaller circles, thus the // DOM updates and we get the 10's of circles in our NodeList circles. NodeList circles = document.getElementsByTagName("circle"); List<Node> replaceable = nodeListToList(circles); for (Node n : replaceable) { Node circleAsSketch = circleToSketch(document, (SVGCircleElement) n); n.getParentNode().replaceChild(circleAsSketch, n); } return document; }
public static void main(String[] args) throws Exception { // Create an SVG document. DOMImplementation impl = SVGDOMImplementation.getDOMImplementation(); String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI; SVGDocument doc = (SVGDocument) impl.createDocument(svgNS, "svg", null); // Create a converter for this document. SVGGraphics2D g = new SVGGraphics2D(doc); // Do some drawing. Shape circle = new Ellipse2D.Double(0, 0, 50, 50); g.setPaint(Color.red); g.fill(circle); g.translate(60, 0); g.setPaint(Color.green); g.fill(circle); g.translate(60, 0); g.setPaint(Color.blue); g.fill(circle); g.setSVGCanvasSize(new Dimension(180, 50)); // Populate the document root with the generated SVG content. Element root = doc.getDocumentElement(); g.getRoot(root); Writer out = new OutputStreamWriter(System.out, "UTF-8"); g.stream(out, true); // Display the document. JSVGCanvas canvas = new JSVGCanvas(); JFrame f = new JFrame(); f.getContentPane().add(canvas); canvas.setSVGDocument(doc); f.pack(); f.setVisible(true); }
/** * Draws a concreteDiagram as an SVG. * * <p>This approach is wholly declarative. It currently knows nothing about the on screen * rendering of the diagram. To make decisions based on the on screen rendering (such as better * label placement) we will, in future, have to build a GVT (from the Batik library) of the * SVGDocument. * * @returns An SVGDocument DOM structure representing the SVG. */ @Override public SVGDocument toSVG(ConcreteDiagram cd) { // Get a DOMImplementation. DOMImplementation domImpl = SVGDOMImplementation.getDOMImplementation(); // Create an instance of org.w3c.dom.Document. String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI; SVGDocument document = (SVGDocument) domImpl.createDocument(svgNS, "svg", null); // Get the root element (the 'svg' element). Element svgRoot = document.getDocumentElement(); // Set the width and height attributes on the root 'svg' element. svgRoot.setAttributeNS(null, "width", Integer.toString(cd.getSize())); svgRoot.setAttributeNS(null, "height", Integer.toString(cd.getSize())); // Draw the shaded zones for (ConcreteZone z : cd.getShadedZones()) { Element path = document.createElementNS(svgNS, "path"); path.setAttributeNS(null, "d", toSVGPath(z.getShape(cd.getBox()))); path.setAttributeNS(null, "fill", "#cccccc"); // grey path.setAttributeNS(null, "z-index", Integer.toString(zOrder.SHADING.ordinal())); svgRoot.appendChild(path); } // TODO: Concrete* should return themselves as DocumentFragments for (CircleContour c : cd.getCircles()) { // Draw the circle Element circle = document.createElementNS(svgNS, "circle"); circle.setAttributeNS(null, "cx", Double.toString(c.get_cx())); circle.setAttributeNS(null, "cy", Double.toString(c.get_cy())); circle.setAttributeNS(null, "r", Double.toString(c.get_radius())); circle.setAttributeNS(null, "z-index", Integer.toString(zOrder.CONTOUR.ordinal())); // Not pretty, but it works. Color strokeColor = c.color(); circle.setAttributeNS( null, "stroke", (null == strokeColor) ? "black" : "#" + toHexString(c.color())); circle.setAttributeNS(null, "stroke-width", "2"); circle.setAttributeNS(null, "fill", "none"); svgRoot.appendChild(circle); // TODO: Put this text in a path around the circle // alternatively come up with some better label placement // algorithm Element text = document.createElementNS(svgNS, "text"); text.setAttributeNS(null, "x", Double.toString(c.get_cx())); text.setAttributeNS(null, "y", Double.toString(c.get_cy() + c.get_radius())); text.setAttributeNS(null, "text-anchor", "middle"); text.setAttributeNS( null, "fill", (null == strokeColor) ? "black" : "#" + toHexString(c.color())); text.setAttributeNS(null, "z-index", Integer.toString(zOrder.LABEL.ordinal())); Text textNode = document.createTextNode(c.ac.getLabel().getLabel()); text.appendChild(textNode); svgRoot.appendChild(text); } for (ConcreteSpider cs : cd.getSpiders()) { for (ConcreteSpiderFoot f : cs.feet) { // Draw the foot Element circle = document.createElementNS(svgNS, "circle"); circle.setAttributeNS(null, "cx", Double.toString(f.getX())); circle.setAttributeNS(null, "cy", Double.toString(f.getY())); circle.setAttributeNS(null, "r", Double.toString(ConcreteSpiderFoot.FOOT_RADIUS)); circle.setAttributeNS(null, "z-index", Integer.toString(zOrder.SPIDER.ordinal())); circle.setAttributeNS(null, "stroke", "black"); circle.setAttributeNS(null, "stroke-width", "2"); circle.setAttributeNS(null, "fill", "black"); svgRoot.appendChild(circle); } for (ConcreteSpiderLeg l : cs.legs) { Element line = document.createElementNS(svgNS, "line"); line.setAttributeNS(null, "x1", Double.toString(l.from.getX())); line.setAttributeNS(null, "y1", Double.toString(l.from.getY())); line.setAttributeNS(null, "x2", Double.toString(l.to.getX())); line.setAttributeNS(null, "y2", Double.toString(l.to.getY())); line.setAttributeNS(null, "z-index", Integer.toString(zOrder.SPIDER.ordinal())); line.setAttributeNS(null, "stroke", "black"); line.setAttributeNS(null, "stroke-width", "2"); line.setAttributeNS(null, "fill", "black"); svgRoot.appendChild(line); } } return document; }
/** * creates a new image * * @param svgHandle a svg handle * @param resourceId the id of the resource from which the image will be created */ protected void createNewImage(SVGHandle svgHandle, String resourceId) { if (svgHandle != null && resourceId != null && !resourceId.equals("")) { Element resourceElement = null; resourceElement = svgHandle.getScrollPane().getSVGCanvas().getDocument().getElementById(resourceId); final String fresourceId = resourceId; if (resourceElement != null) { final SVGHandle fhandle = svgHandle; // creating the canvas and setting its properties final JSVGCanvas canvas = new JSVGCanvas() { @Override public void dispose() { removeKeyListener(listener); removeMouseMotionListener(listener); removeMouseListener(listener); disableInteractions = true; selectableText = false; userAgent = null; bridgeContext.dispose(); super.dispose(); } }; // the element to be added Element elementToAdd = null; canvas.setDocumentState(JSVGComponent.ALWAYS_STATIC); canvas.setDisableInteractions(true); // creating the new document final String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI; final SVGDocument doc = (SVGDocument) resourceElement.getOwnerDocument().cloneNode(false); // creating the root element final Element root = (Element) doc.importNode(resourceElement.getOwnerDocument().getDocumentElement(), false); doc.appendChild(root); // removing all the attributes of the root element NamedNodeMap attributes = doc.getDocumentElement().getAttributes(); for (int i = 0; i < attributes.getLength(); i++) { if (attributes.item(i) != null) { doc.getDocumentElement().removeAttribute(attributes.item(i).getNodeName()); } } // adding the new attributes for the root root.setAttributeNS(null, "width", imageSize.width + ""); root.setAttributeNS(null, "height", imageSize.height + ""); root.setAttributeNS(null, "viewBox", "0 0 " + imageSize.width + " " + imageSize.height); // the defs element that will contain the cloned resource node final Element defs = (Element) doc.importNode(resourceElement.getParentNode(), true); root.appendChild(defs); if (resourceElement.getNodeName().equals("linearGradient") || resourceElement.getNodeName().equals("radialGradient") || resourceElement.getNodeName().equals("pattern")) { // the rectangle that will be drawn final Element rect = doc.createElementNS(svgNS, "rect"); rect.setAttributeNS(null, "x", "0"); rect.setAttributeNS(null, "y", "0"); rect.setAttributeNS(null, "width", imageSize.width + ""); rect.setAttributeNS(null, "height", imageSize.height + ""); elementToAdd = rect; // setting that the rectangle uses the resource String id = resourceElement.getAttribute("id"); if (id == null) { id = ""; } rect.setAttributeNS(null, "style", "fill:url(#" + id + ");"); // getting the cloned resource node Node cur = null; Element clonedResourceElement = null; String id2 = ""; for (cur = defs.getFirstChild(); cur != null; cur = cur.getNextSibling()) { if (cur instanceof Element) { id2 = ((Element) cur).getAttribute("id"); if (id2 != null && id.equals(id2)) { clonedResourceElement = (Element) cur; } } } if (clonedResourceElement != null) { // getting the root element of the initial resource // element Element initialRoot = resourceElement.getOwnerDocument().getDocumentElement(); // getting the width and height of the initial root // element double initialWidth = 0, initialHeight = 0; try { initialWidth = EditorToolkit.getPixelledNumber(initialRoot.getAttributeNS(null, "width")); initialHeight = EditorToolkit.getPixelledNumber(initialRoot.getAttributeNS(null, "height")); } catch (DOMException ex) { ex.printStackTrace(); } if (resourceElement.getNodeName().equals("linearGradient")) { if (resourceElement.getAttributeNS(null, "gradientUnits").equals("userSpaceOnUse")) { double x1 = 0, y1 = 0, x2 = 0, y2 = 0; // normalizing the values for the vector to fit // the rectangle try { x1 = Double.parseDouble(resourceElement.getAttributeNS(null, "x1")); y1 = Double.parseDouble(resourceElement.getAttributeNS(null, "y1")); x2 = Double.parseDouble(resourceElement.getAttributeNS(null, "x2")); y2 = Double.parseDouble(resourceElement.getAttributeNS(null, "y2")); x1 = x1 / initialWidth * imageSize.width; y1 = y1 / initialHeight * imageSize.height; x2 = x2 / initialWidth * imageSize.width; y2 = y2 / initialHeight * imageSize.height; } catch (NumberFormatException | DOMException ex) { ex.printStackTrace(); } clonedResourceElement.setAttributeNS(null, "x1", format.format(x1)); clonedResourceElement.setAttributeNS(null, "y1", format.format(y1)); clonedResourceElement.setAttributeNS(null, "x2", format.format(x2)); clonedResourceElement.setAttributeNS(null, "y2", format.format(y2)); } } else if (resourceElement.getNodeName().equals("radialGradient")) { if (resourceElement.getAttributeNS(null, "gradientUnits").equals("userSpaceOnUse")) { double cx = 0, cy = 0, r = 0, fx = 0, fy = 0; // normalizing the values for the circle to fit // the rectangle try { cx = Double.parseDouble(resourceElement.getAttributeNS(null, "cx")); cy = Double.parseDouble(resourceElement.getAttributeNS(null, "cy")); r = Double.parseDouble(resourceElement.getAttributeNS(null, "r")); fx = Double.parseDouble(resourceElement.getAttributeNS(null, "fx")); fy = Double.parseDouble(resourceElement.getAttributeNS(null, "fy")); cx = cx / initialWidth * imageSize.width; cy = cy / initialHeight * imageSize.height; r = r / (Math.abs( Math.sqrt(Math.pow(initialWidth, 2) + Math.pow(initialHeight, 2)))) * Math.abs( Math.sqrt( Math.pow(imageSize.width, 2) + Math.pow(imageSize.width, 2))); fx = fx / initialWidth * imageSize.width; fy = fy / initialHeight * imageSize.height; } catch (NumberFormatException | DOMException ex) { ex.printStackTrace(); } clonedResourceElement.setAttributeNS(null, "cx", format.format(cx)); clonedResourceElement.setAttributeNS(null, "cy", format.format(cy)); clonedResourceElement.setAttributeNS(null, "r", format.format(r)); clonedResourceElement.setAttributeNS(null, "fx", format.format(fx)); clonedResourceElement.setAttributeNS(null, "fy", format.format(fy)); } } else if (resourceElement.getNodeName().equals("pattern")) { if (resourceElement.getAttributeNS(null, "patternUnits").equals("userSpaceOnUse")) { double x = 0, y = 0, w = 0, h = 0; // normalizing the values for the vector to fit // the rectangle try { String xString = resourceElement.getAttributeNS(null, "x"); if (!xString.equals("")) { x = Double.parseDouble(xString); } String yString = resourceElement.getAttributeNS(null, "y"); if (!yString.equals("")) { y = Double.parseDouble(yString); } String wString = resourceElement.getAttributeNS(null, "w"); if (!wString.equals("")) { w = Double.parseDouble(wString); } String hString = resourceElement.getAttributeNS(null, "h"); if (!hString.equals("")) { h = Double.parseDouble(hString); } x = x / initialWidth * imageSize.width; y = y / initialHeight * imageSize.height; w = w / initialWidth * imageSize.width; h = h / initialHeight * imageSize.height; } catch (NumberFormatException | DOMException ex) { ex.printStackTrace(); } clonedResourceElement.setAttributeNS(null, "x", format.format(x)); clonedResourceElement.setAttributeNS(null, "y", format.format(y)); clonedResourceElement.setAttributeNS(null, "width", format.format(w)); clonedResourceElement.setAttributeNS(null, "height", format.format(h)); } } } } else if (resourceElement.getNodeName().equals("marker")) { // the line that will be drawn final Element line = doc.createElementNS(svgNS, "line"); line.setAttributeNS(null, "x1", (((double) imageSize.width) / 2) + ""); line.setAttributeNS(null, "y1", (((double) imageSize.height) / 2) + ""); line.setAttributeNS(null, "x2", ((double) imageSize.width / 2) + ""); line.setAttributeNS(null, "y2", imageSize.height + ""); elementToAdd = line; // setting that the line uses the resource String id = resourceElement.getAttribute("id"); if (id == null) id = ""; line.setAttributeNS( null, "style", "stroke:none;fill:none;marker-start:url(#" + id + ");"); } root.appendChild(elementToAdd); // adding a rendering listener to the canvas GVTTreeRendererAdapter gVTTreeRendererAdapter = new GVTTreeRendererAdapter() { @Override public void gvtRenderingCompleted(GVTTreeRendererEvent evt) { Image bufferedImage = canvas.getOffScreen(); if (bufferedImage != null) { Graphics g = bufferedImage.getGraphics(); Color borderColor = MetalLookAndFeel.getSeparatorForeground(); g.setColor(borderColor); g.drawRect(0, 0, imageSize.width - 1, imageSize.height - 1); } setImage(fhandle, fresourceId, bufferedImage); // refreshing the panels that have been created when no // image was available for them Image image = null; for (ResourceRepresentation resourceRepresentation : new LinkedList<ResourceRepresentation>(resourceRepresentationList)) { if (resourceRepresentation != null) { resourceRepresentation.refreshRepresentation(); image = resourceRepresentation.getImage(); if (image != null) { resourceRepresentationList.remove(resourceRepresentation); } } } canvas.removeGVTTreeRendererListener(this); canvas.stopProcessing(); canvas.dispose(); } }; canvas.addGVTTreeRendererListener(gVTTreeRendererAdapter); // setting the document for the canvas canvas.setSVGDocument(doc); canvas.setBackground(Color.white); canvas.setBounds(1, 1, imageSize.width, imageSize.height); } } }