This question already has an answer here:
Dart svg ImageElement is not showing up
(1 answer)
Closed 9 years ago.
I am trying to show an (interchangeable) image as background to an ellipse or other various things I will manipulate later.
The problem is that I can't find how to load the image properly.
My code:
DivElement div = querySelector("#mainDiv");
svg.SvgElement svgElement = new svg.SvgSvgElement();
div.append(svgElement);
//div.setAttribute("background-color", "yellow");
svg.RectElement rec = new svg.RectElement();
rec.setAttribute("x", "0");
rec.setAttribute("y", "0");
rec.setAttribute("width",div.clientWidth.toString());
rec.setAttribute("height", div.clientHeight.toString());
//svgElement.children.add(rec);
Ellipse ell = new Ellipse() //my class. shows and allow to move it
..cx = 100
..cy= 100
..rx= 50
..ry= 50;
svgElement.children.add(ell.ellipse);
ImageElement image = new ImageElement(src: "2.jpg");
image.onLoad.listen((e) {
svgElement.children.add(image);
});
As you can see there is a Rectangle, which was my first attempt to show the image with various attributes (background-image, background..), then I thought to add the ImageElement directly after onLoad. Both Failed.
My next step should be to try with patterns, but I'm not sure if I can translate in Dart what I've read for javascript.
Edit: It would be nice to be able to load the image as well, so that I can read attributes like dimensions.
Edit2: Since I can't add an answer, here is the code I made by checking the "duplicate" original one.
import 'dart:svg' as svg;
//...
DivElement div = querySelector("#mainDiv");
svg.SvgElement svgElement = new svg.SvgSvgElement();
div.append(svgElement);
Ellipse ell = new Ellipse()
..cx = 100
..cy= 100
..rx= 50
..ry= 50;
svg.ImageElement image = new svg.ImageElement();
svgElement.children.add(image);
image.setAttribute('x', '0');
image.setAttribute('y', '0');
image.setAttribute('width', '100%');
image.setAttribute('height', '100%');
image.getNamespacedAttributes('http://www.w3.org/1999/xlink')['href'] = '2.jpg';
svgElement.children.add(ell.ellipse);
I haven't tried it but I assume that the onLoad event will not fire before the element isn't added to the DOM.
You should add the image just after creating the element.
You could alternatively set display: none and change to display: auto when onLoad fires.
Related
I am using OpenCV.js in Ionic 3 to make a scanner app.
I have a .ts file with rotate function like this:
rotateRight() {
let src = cv.imread('img');
let dst = new cv.Mat();
let dsize = new cv.Size(src.rows, src.cols);
let center = new cv.Point(src.cols / 2, src.rows / 2);
let M = cv.getRotationMatrix2D(center, -90, 1);
cv.warpAffine(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete(); M.delete();
}
And I have code like this in .html file with img source to get and canvas to display new image after processing:
<img id="img" [src]="picture" *ngIf="picture" />
<canvas id="canvasOutput" ></canvas>
My problem is I just want to display only one image in my .html file, I want after processing the new image will display in the img source from the begin instead of having another display like canvas.
Is there any way to do that?
Thanks for helping!
After asking I found the answer by myself.
Firstly, get element canvasOutput and img from HTML, then change image's source to canvasOutput with base64 format:
var canvasOutput = document.getElementById('canvasOutput') as HTMLCanvasElement;
let picture = document.getElementById("img") as HTMLImageElement;
picture.src = canvasOutput.toDataURL();
Lastly set 's style to visibility: hidden to hide canvas tag.
I am trying to generate multiple pdfs into a single pdf, which I have achieved by using itextSharp , but while generating them few thing I came across,which are pointed below:
I am getting visible cell border just under image that i inserted .
Bottom image taking a space which flicks the image into another page, with extra visible border.
Also the paragraph didn't align to center.
Apart from these I also need that the text(in paragraph)comes from view(this code is doing in MVC).
How to solve these errors? Below is my code:
public byte[] GetPDF(string pHTML)
{
byte[] bPDF = null;
MemoryStream ms = new MemoryStream();
TextReader txtReader = new StringReader(pHTML);
//Rectangle pagesize = new Rectangle(864.0f, 1152.0f);
Document doc = new Document(PageSize.NOTE);
string path = Server.MapPath("PDFs");
PdfWriter oPdfWriter = PdfWriter.GetInstance(doc, ms);
HTMLWorker htmlWorker = new HTMLWorker(doc);
doc.Open();
for (int i = 1; i <= 5; i++)
{
doc.NewPage();
PdfPTable table= new PdfPTable(1);
table.TotalWidth = 500f;
table.LockedWidth = true;
table.HorizontalAlignment = 0;
table.DefaultCell.Border = Rectangle.NO_BORDER;
Image imageTopURL = Image.GetInstance("Top.PNG");
PdfPCell imgTopCell = new PdfPCell(imageTopURL);
Paragraph p = new Paragraph("XYZ", new Font(Font.FontFamily.COURIER, 32f, Font.UNDERLINE));
p.Alignment = Element.ALIGN_CENTER;
table.AddCell(imgTopCell);
table.AddCell(p);
Image imageMidURL = Image.GetInstance("Mid.PNG");
PdfPCell imgMidCell = new PdfPCell(imageMidURL);
Paragraph p1 = new Paragraph("ABC", new Font(Font.FontFamily.HELVETICA, 29f, Font.ITALIC));
p1.Alignment = Element.ALIGN_CENTER;
table.AddCell(imgMidCell);
imgMidCell.Border = 0;
table.AddCell(p1);
Image imageBotURL = Image.GetInstance("Bottom.PNG");
PdfPCell imgBotCell = new PdfPCell(imageBotURL);
table.AddCell(imgBotCell);
imageTopURL.ScaleAbsolute(505f, 270f);
imageMidURL.ScaleAbsolute(590f, 100f);
imageBotURL.ScaleAbsolute(505f, 170f);
doc.Open();
doc.Add(table);
htmlWorker.StartDocument();
htmlWorker.Parse(txtReader);
htmlWorker.EndDocument();
}
htmlWorker.Close();
doc.Close();
doc.Close();
bPDF = ms.ToArray();
return bPDF;
}
You are telling the table that default cells shouldn't have a border:
table.DefaultCell.Border = Rectangle.NO_BORDER;
This means that PdfPCell instances that are created implicitly won't get a border. For instance: if you do:
table.AddCell("Implicit cell creation");
Then that cell won't get a border.
However: you are creating a cell explicitly:
PdfPCell imgTopCell = new PdfPCell(imageTopURL);
In this case, the DefaultCell is never used. It is very normal that imgTopCell has a border. If you don't want a border for imgTopCell, you need to define the Border of imgTopCell like this:
imgTopCell.Border = Rectangle.NO_BORDER;
Regarding the alignment: it seems that you didn't read about the difference between text mode and composite mode. Please read the documentation, for instance:
Why does ColumnText ignore the horizontal alignment?
How to right-align text in a PdfPCell?
and many other FAQ entries about text mode and composite mode.
You are making a number of newbie mistakes that can all be fixed by reading the documentation. You have too many questions in one post. Please create new questions if my answer didn't solve every single of your problems. I see at least two more questions in your post (your question should actually be closed with as reason "Too broad").
Update:
In your comment, you added the following code snippet:
table.AddCell(new Paragraph(data.EmpName, new Font(Font.FontFamily.COURIER, 32f, Font.BOLD)));
You want to center this text.
First, let me explain that you are using the AddCell() method with a Paragraph as parameter. This doesn't really make sense as the Paragraph will be treated as a Phrase. You can as well write:
table.DefaultCell.HorizontalAlignment = Element.ALIGN_CENTER ;
table.AddCell(new Phrase(data.EmpName, new Font(Font.FontFamily.COURIER, 32f, Font.BOLD)));
When you are passing a Phrase to the AddCell() method, you are
using text mode (the properties of the cell prevail over the properties of its elements), and
you are asking iTextSharp to create a PdfPCell.
In this case, iTextSharp will look at the DefaultCell and use the properties of that cell to create a new cell. If you want to center the content of that new cell, you need to define this at the level of the DefaultCell. All of this is explained in my answer to the following questions:
Why doesn't getDefaultCell().setBorder(PdfPCell.NO_BORDER) have any effect?
What is the PdfPTable.DefaultCell property used for?
i make a PieChart at run time, and i want to interpolate data change, but i have some difficult.
The Code is here:
//Pie Chart
pieChart.dataProvider = expenses;
var pieSeries:PieSeries = new PieSeries();
pieSeries.nameField = "position";
pieSeries.field = "value";
pieSeries.explodeRadius = 0.08;
pieChart.series = null;
pieChart.series.push(pieSeries);
I found two method, but i don't know how to use that >.<:
pieSeries.beginInterpolation
pieSeries.interpolate
1) First create a SeriesInterpolate class instance and customize it however you want.
2) You can set the showDataEffect style of your pieSeries object to the interpolate object that you just created.
Whalah.. whenever your data changes the interpolator will get triggered.
See the code snippet below..
I've also created an example application with source enabled.
goto: http://befreestudiosllc.com/demos/flex4/charting/seriesInterpolate/ and right-click to view source.
// Create an interpolator and customize its properties
var interpolateDataIn:SeriesInterpolate = new SeriesInterpolate();
interpolateDataIn.duration = 1000;
var pieSeries:PieSeries = new PieSeries();
pieSeries.setStyle("showDataEffect", interpolateDataIn); // apply interpolators to your series through show/hide dataEffects
I'm using aChartEngine's 0.7.0 charting library for Android. I have a working XY chart that changes dynamically about every second when new data is received. However, it draws the line chart from left to right and eventually moves out of view. The only way to see the new data being drawn is to scroll the chart view to the right.
Does anyone know how to make the line draw new data on the left side so that older data eventually scrolls right out of view. Basically, reversing the direction of the chart line?
My code:
private XYMultipleSeriesDataset HRDataset = new XYMultipleSeriesDataset();
private XYMultipleSeriesRenderer HeartRateRenderer = new XYMultipleSeriesRenderer();
private XYSeries HRCurrentSeries;
private GraphicalView HRChartView;
in onResume():
if (HRChartView == null) {
LinearLayout layout = (LinearLayout) findViewById(R.id.HRchart);
HRChartView = ChartFactory.getLineChartView(this, HRDataset, HeartRateRenderer);
layout.addView(HRChartView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
// boolean enabled = HRDataset.getSeriesCount() > 0;
// setSeriesEnabled(enabled);
} else {
HRChartView.repaint();
}
in onCreate():
HeartRateRenderer.setAxisTitleTextSize(16);
HeartRateRenderer.setChartTitleTextSize(20);
HeartRateRenderer.setLabelsTextSize(15);
HeartRateRenderer.setLegendTextSize(15);
HeartRateRenderer.setMargins(new int[] {20, 30, 15, 0});
HeartRateRenderer.setAxesColor(Color.YELLOW);
String seriesTitle = "Heart Rate";
XYSeries series = new XYSeries(seriesTitle);
HRDataset.addSeries(series);
HRCurrentSeries = series;
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.RED);
HeartRateRenderer.addSeriesRenderer(renderer);
I have a service that receives data from a Blue Tooth device. When new data arrives I call this function:
public void setupHRChart(double x, double y)
{
HRCurrentSeries.add(x, y);
if (HRChartView != null) {
HRChartView.repaint();
}
}
in the manifest:
<activity android:name="org.achartengine.GraphicalActivity" />
in my layout:
<LinearLayout android:id="#+id/HRchart" android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="300px" android:layout_weight="1" />
-Hope that helps.
I actually decided to go with the natural flow direction of aChartEngine's dynamic line charts. I was able to lock the graph image so that the line no longer scrolls off the screen out of view. I also remove items from the beginning of the serires to keep a certain time span visible without the graph compressing into a mass of lines. It actually works really well.
Here's a youtube video demonstrating the charts in action: http://www.youtube.com/watch?v=mZMrOc5QaG0
I also remove items from the beginning of the series to keep a certain time span visible
The problem with this solution is that you actually loose data...
How about using the setXAxisMax and setXAxisMin of the renderer as follow:
0) set XAxisMax to a value, say 10 and set the XAxisMin value to 0
1) count the "ticks" in an xTick variable
2) once xTick is > XAxisMax:
2.1) set XAxisMax to xTick
2.2) set XAxisMin to what it was + 1
3) render the graph again
This way we actually shift the "visible part" of the graph (by playing with Xmin and Xmax) but do not loose any data (i.e., we can still scroll to see previous data-points):
renderer.setXAxisMin(0.0);
renderer.setXAxisMax(10);
xTick = 0;
lastMinX = 0;
private void refreshChart(double lastValue) {
/* check if we need to shift the x axis */
if (xTick > getRenderer().getXAxisMax()) {
getRenderer().setXAxisMax(xTick);
getRenderer().setXAxisMin(++lastMinX);
}
series.add(xTick++, lastValue);
mChartView.repaint();
}
I use AS3 in Flex 3 to create new image and seem unable to get the exact size of the original image. percentHeight & percentWidth to 100 can do the job, but limitation in ObjectHandlers require me to set the image scale in pixel.
Any solution?
Note: this is also applicable for displaying Image original dimension without ObjectHandler control, just remove those lines that are not applicable.
After struggle hours for solution, I found my own answer thru in actionscript forum, in fact, only one solution, I surprise there was no such topic elsewhere.
private function init():void {
var image:Image = new Image();
image.source = "http://www.colorjack.com/software/media/circle.png";
image.addEventListener(Event.COMPLETE, imageLoaded);
/* wait for completion as Image control is asynchronous,
* which mean ObjectHandler will attempt to load asap
* and you are not able to get the correct dimension for scaling.
* EventListener fixed that.
*/
this.addChild(image);
//whenever you scale ObjectHandler control, the image is always fit by 100%
image.percentHeight = 100;
image.percentWidth = 100;
}
private function imageLoaded(e:Event):void{
var img:Image = e.target as Image;
trace("Height ", img.contentHeight);
trace("Width ", img.contentWidth);
var oh:ObjectHandles = new ObjectHandles();
oh.x = 200;
oh.y = 200;
oh.height = img.contentHeight;
oh.width = img.contentWidth;
oh.allowRotate = true;
oh.autoBringForward = true;
oh.addChild(img);
genericExamples.addChild(oh);
}