I tried using inkscape's mesh gradient but it seems not supported in android, I need something like this:
a 4 stop gradient for android's rectangle(or any other shape, like a circle), basically 4 blends of gradient color. How do I do this in android? Or atleast by something that android supports( is illustrator's svg output taken by android)?
You can approximate it using multiple gradients. This is just a quick attempt to get something close. You may be able to do better with a little extra tweaking.
<svg width="250" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0" y1="1">
<stop offset="0" stop-color="rgb(149,254,149)"/>
<stop offset="1" stop-color="rgb(255,254,149)"/>
</linearGradient>
<radialGradient id="grad2" cx="0" cy="0" r="0.75">
<stop offset="0" stop-color="rgba(254,151,149, 1)"/>
<stop offset="1" stop-color="rgba(254,151,149, 0)"/>
</radialGradient>
<radialGradient id="grad3" cx="1" cy="1" r="0.75">
<stop offset="0" stop-color="rgba(149,150,202, 1)"/>
<stop offset="1" stop-color="rgba(149,150,202, 0)"/>
</radialGradient>
</defs>
<rect width="100" height="100" fill="url(#grad1)"/>
<rect width="100" height="100" fill="url(#grad2)"/>
<rect width="100" height="100" fill="url(#grad3)"/>
</svg>
Related
I included below code in xsl-fo document:
<fo:instream-foreign-object>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<g style="fill:red; stroke:#000000">
<rect x="0" y="0" width="15" height="15"/>
<rect x="5" y="5" width="15" height="15"/>
</g>
</svg>
</fo:instream-foreign-object>
i need to create a pdf ,I am using fop 1.0,batik-all-1.8pre-r1084380.
While running the xsl fo code ,i got the following error.
nested exception is java.lang.NoClassDefFoundError: org/apache/batik/anim/dom/SVGDOMImplementation
Kindly help.
I am currently trying to reference a node in an XML document using the java library org.apache.xmlbeans.XmlCursor with the command XMLCursor.selectPath(“XPath Call goes here”).
I am able to get this command working for finding an element using:
picCur.selectPath("declare namespace p='http://schemas.openxmlformats.org/drawingml/2006/main'; .//p:blip");
However now I wish to select an element with a specific attribute. This would usually be done using the same command with .//p:blip[#embed=”attribute value” however the attribute has a different namespace to the element and I am struggling to find a way to declare both namespaces before executing the Xpath command. This is the command that I have been trying to use:
picCur.selectPath("declare namespace p='http://schemas.openxmlformats.org/drawingml/2006/main' ” +
"declare namespace r='http://schemas.openxmlformats.org/officeDocument/2006/relationships' " +
".//p:blip[#r:embed=' attribute value ']");
Below is the xml code, thank you in advanced for your help.
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<p:sld xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main">
<p:cSld>
<p:spTree>
<p:nvGrpSpPr>
<p:cNvPr id="1" name="" />
<p:cNvGrpSpPr/>
<p:nvPr/></p:nvGrpSpPr>
<p:grpSpPr>
<a:xfrm><a:off x="0" y="0" /><a:ext cx="0" cy="0" /><a:chOff x="0" y="0" /><a:chExt cx="0" cy="0" /></a:xfrm>
</p:grpSpPr>
<p:sp>
<p:nvSpPr>
<p:cNvPr id="2" name="Title 1" />
<p:cNvSpPr><a:spLocks noGrp="1" />
</p:cNvSpPr>
<p:nvPr>
<p:ph type="title" /></p:nvPr>
</p:nvSpPr>
<p:spPr/>
<p:txBody><a:bodyPr/><a:lstStyle/>
<a:p>
<a:r><a:rPr lang="en-GB" dirty="0" smtClean="0" />
<a:t>Worlds Cutest Dragon</a:t>
</a:r><a:endParaRPr lang="en-GB" dirty="0" /></a:p>
</p:txBody>
</p:sp>
<p:pic>
<p:nvPicPr>
<p:cNvPr id="4" name="myDragon" />
<p:cNvPicPr><a:picLocks noGrp="1" noChangeAspect="1" />
</p:cNvPicPr>
<p:nvPr>
<p:ph idx="1" /></p:nvPr>
</p:nvPicPr>
<p:blipFill>
<a:blip r:embed="rId2">
<a:extLst>
<a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}"><a14:useLocalDpi xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" val="0" />
</a:ext>
</a:extLst>
</a:blip>
<a:stretch><a:fillRect/></a:stretch>
</p:blipFill>
<p:spPr>
<a:xfrm><a:off x="3643312" y="2634456" /><a:ext cx="1857375" cy="2457450" /></a:xfrm>
</p:spPr>
</p:pic>
</p:spTree>
<p:extLst>
<p:ext uri="{BB962C8B-B14F-4D97-AF65-F5344CB8AC3E}">
<p14:creationId xmlns:p14="http://schemas.microsoft.com/office/powerpoint/2010/main" val="2185825445" />
</p:ext>
</p:extLst>
</p:cSld>
<p:clrMapOvr><a:masterClrMapping/>
</p:clrMapOvr>
</p:sld>
Have you tried to declare the first namespace and then the other?
picCur.selectPath("
declare namespace p='http://schemas.openxmlformats.org/drawingml/2006/main';
declare namespace r='http://schemas.openxmlformats.org/officeDocument/2006/relationships';
.//p:blip[#r:embed='value']
");
Please try it by adding saxonb ,saxon-dom, xbean jars to server..
I am trying to create a hexagon on the screen in my LWJGL game. I am using Nifty GUI. I currently have 2 screens, and I want to switch to a screen where I programmatically draw hexagons.
Here is my xml for the screen
<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">
<useStyles filename="nifty-default-styles.xml" />
<useControls filename="nifty-default-controls.xml" />
<screen id="start" controller="StartScreen">
<layer id="background" childLayout="center">
<image filename="util/img/menuTexture.png" />
</layer>
<layer id="title" childLayout="vertical">
<image align="center" height="20%" width="80%" filename="util/img/title.png" />
<panel id="subactions" childLayout="absolute" marginTop="40%" height="13%">
<image align="left" height="100%" width="30%" x="0px" y="0px" filename="util/img/rules.png">
<interact onClick="showRules()" />
</image>
<image align="right" height="100%" width="30%" x="70%" y="0px" filename="util/img/exit.png">
<interact onClick="exitGame()" />
</image>
</panel>
<image align="center" height="20%" width="80%" filename="util/img/start game.png" marginTop="5%">
<interact onClick="startGame()" />
</image>
</layer>
</screen>
<screen id="rules" controller="StartScreen">
<layer id="background" childLayout="center">
<image filename="util/img/menuTexture.png" />
</layer>
<layer id="transparent" backgroundColor="#D1D1D1A7" childLayout="vertical">
<panel id="rulesPanel" childLayout="center">
<image filename="util/img/game rules.png" width="100%" height="100%" />
</panel>
<panel id="goToStartPanel" childLayout="center" width="100%" height="13%">
<image height="100%" filename="util/img/exit.png">
<interact onClick="goToStartScreen()" />
</image>
</panel>
</layer>
</screen>
How do I switch to such a screen (would I use nifty.gotoScreen() ?) and initialize the render loop?
Any example code would be helpful. Thank you very much.
Yes, you always use nifty.gotoScreen() to switch to a different screen.
But I don't really understand the drawing shapes part ;) Current Nifty, 1.3.x or 1.4.x don't support custom drawing to a screen. But no one prevents you to render other things before or after you call nifty.render() which makes things appear below or above the elements rendered by Nifty.
If you want to have some elements directly on the Nifty screen custom drawn by you your only chance would be to get hold of a texture that Nifty renders and render to that texture on your own (outside and without any help from Nifty). Nifty will just display the texture as an image element for instance but you could have change the content of the texture outside of Nifty.
Does that make sense?
I have a java program installed on my computer that creates Forms and can later print it. I want to do something similar with my program! In the source folders of this program, I found folders for the specific forms. Each folder containes a image for e.g named Payment.png and a xml file is structured like this:
<?xml version="1.0" encoding="windows-1250" standalone="no"?>
<form xmlns:xinclude="http://www.w3.org/2001/XInclude" blankodruck="true" filename="Payment.png" saveAndPrintButtonEnabled="true" scale="1.0" title="Payment" window_height="725" window_width="860" paper="A5" orientation="landscape">
<printscale sx="0.432" sy="0.434"/>
<printoffset x="0" y="13"/>
<model class="de.hans.client.app.form.payment.PaymentModel" />
<printform filename="Payment.png" pngscaleX="1" pngscaleY="1"/>
<offset x="-20" y="15" scaleX="0.72" scaleY="0.7" printOffsetX="4" printOffsetY="3" printScaleX="2.34" printScaleY="2.33">
<xinclude:include href="../Header.xml"/>
</offset>
<checkbox height="33" name="Paydaten_ChB" width="35" x="862" y="74" printOffsetX="0" printOffsetY="0"/>
<checkbox columns="90" height="35" ...
<textfield columns="1" height="36" name="quartal" width="35" x="1235" y="72" printOffsetX="0" printOffsetY="0"/>
<radiobutton group="Gender" height="36" name="User_gender" tooltip="men" width="33" x="1253" y="130" printOffsetX="0" printOffsetY="0"/>
It has even a barcode-field:
<barcode length="886" type="3" px="430" py="180" pages="1">
<invisible name="date"/>
<invisible name="titel"/>
Can somebody guess how this printable swings are created in the program? Thanks
I have an image file (jpg, etc.) and some svg drawings (svg tag copied from the site, as Java String). The svg drawing is of the same resolution as the image file. I want to put svg drawings on top of the image and save it as one file. My approach, of which I'm not proud of, but works, is to:
use Batik's JPEGTranscoder to transcode svg into image with this svg drawings and white background, save this image
put the image with svg drawings on top of my image file by perfoming low level operations on each pixel
I would like to be able to put the svg drawings on top of my image in one step.
Using an SVG pattern would solve your problem.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
<image x="0" y="0" width="200" height="200"
xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
</pattern>
</defs>
<rect width="200" height="200" fill="url(#image)"/>
<circle cx="100" cy="100" r="50"/>
</svg>
Fiddle available here.
I pulled the SVG above through the batik rasterizer, and it was correctly rasterized.
Update
As noted in the comments, you could just as well include the image directly in your SVG, without the use of a pattern.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200">
<image x="0" y="0" width="200" height="200"
xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
<circle cx="100" cy="100" r="50"/>
</svg>
Fiddle available here.