React native : Json.stringify cannot serialize cyclic structure - react-native

The issue happened here while using canvas property.
I tried to create roulette in react native using canvas property. I successfully used canvas, except I cannot use ctx.drawImage methods. When I tried to use them I got an error like
JSON.Stringify cannot serialize cyclic structures
Here is a code snipet
componentDidMount(){
wheelCanvas = this.updateCanvas();
}
// This is in error while rendering :
ctx.drawImage(wheelCanvas, wheelCanvas.width / 2, wheelCanvas.height / 2);
updateCanvas() {
var outsideRadius = 120;
var textRadius = 100;
var insideRadius = 30;
var canvas = this.refs.canvasRoulette;
let ctx = canvas.getContext("2d");
canvas.width = canvas.height = outsideRadius * 2 + 6;
var x = outsideRadius + 3;
var y = outsideRadius + 3;
ctx.font = "bold 18px Helvetica, Arial";
for (var i = 0; i < rouletteSize; i++) {
var angle = i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(x, y, outsideRadius, angle, angle + arc, false);
ctx.arc(x, y, insideRadius, angle + arc, angle, true);
ctx.strokeStyle = "#fff";
ctx.lineWidth = 1;
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "#fff";
ctx.translate(
x + Math.cos(angle + arc / 2) * textRadius,
y + Math.sin(angle + arc / 2) * textRadius
);
ctx.rotate(angle + arc / 2 + Math.PI);
var text = numbers[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 5);
ctx.restore();
}
return canvas;
}

Related

Createjs function

I am trying to convert an old simulation from Flash to createjs with animate cc. The only code you have is to rotate a piece but I can not get it to work. This code not work:
function spinit()
{
var ang = myangle * Math.PI / 180;
this.pin1.x = disk1.x + R * Math.cos(ang);
this.pin1.y = disk1.y + R * Math.sin(ang);
this.yoke1.x = pin1.x;
this.disk1.rotate = myangle;
this.myangle = myangle + 1;
if (myangle > 360)
{
myangle = 0;
}
}
var myangle = 0;
var R = 90;
setInterval(spinit, 5);
Chances are good this is a scope issue. Your spinit method is being called anonymously, so it won't have access to any of your frame content referenced with this. You can get around this by scoping your method, and binding your setInterval call.
this.spinit = function() // 1. scope the function
{
var ang = myangle * Math.PI / 180;
this.pin1.x = disk1.x + R * Math.cos(ang);
// etc
setInterval(spinit.bind(this), 5); // 2. bind this so it calls in the right scope.
}
Make sure to call this.spinit().
Hope that helps!

iText 7 - Add and Remove Watermark on a PDF

I would like to add and remove a watermark to a PDF using iText 7. I was able to add the watermark, but unable to remove it again. I could only find relevant code/examples related to iText 5. Any pointers appreciated, thanks.
This is how I added the Watermark (using Layers):
pdfDoc = new PdfDocument(new PdfReader(sourceFile), new PdfWriter(destinationPath));
var numberOfPages = pdfDoc.GetNumberOfPages();
PageSize ps = pdfDoc.GetDefaultPageSize();
for (var i = 1; i <= numberOfPages; i++)
{
PdfPage page = pdfDoc.GetPage(i);
PdfLayer layer = new PdfLayer("watermark", pdfDoc);
var canvas = new PdfCanvas(page);
var pageSize = page.GetPageSize();
var paragraph = new Paragraph(message.WatermarkText).SetFontSize(60);
paragraph.SetFontColor(Color.BLACK, 0.2f);
Canvas canvasModel;
canvas.BeginLayer(layer);
canvasModel = new Canvas(canvas, pdfDoc, ps);
canvasModel.ShowTextAligned(paragraph, pageSize.GetWidth() / 2, pageSize.GetHeight() / 2, pdfDoc.GetPageNumber(page), TextAlignment.CENTER, VerticalAlignment.MIDDLE, 45);
canvasModel.SetFontColor(Color.GREEN, 0.2f);
canvas.EndLayer();
}
pdfDoc.Close();
This is what I have tried to remove the watermark. I want to remove it completely, not just set the layer to not display.(any sample code appreciated):
pdfDoc = new PdfDocument(new PdfReader(sourceFile), new PdfWriter(destinationPath));
IList<PdfLayer> layers = pdfDoc.GetCatalog().GetOCProperties(true).GetLayers();
for (var i = 0; i <= layers.Count; i++)
{
var t = layers[i].GetPdfObject().Get(PdfName.Name);
if (t.ToString().Equals("watermark"))
{
//Not what I want..need to remove the layer
layers[i].SetOn(false);
//This does not work...
//layers.RemoveAt(i);
}
}
pdfDoc.Close();
With help from the guys at iText I was able to solve this.
If you intend to remove the watermark later, you will need to add it as a 'PDF watermark annotation'.
To add a watermark on every page:
public void WatermarkPDF(string sourceFile, string destinationPath)
{
float watermarkTrimmingRectangleWidth = 300;
float watermarkTrimmingRectangleHeight = 300;
float formWidth = 300;
float formHeight = 300;
float formXOffset = 0;
float formYOffset = 0;
float xTranslation = 50;
float yTranslation = 25;
double rotationInRads = Math.PI / 3;
PdfFont font = PdfFontFactory.CreateFont(FontConstants.TIMES_ROMAN);
float fontSize = 50;
PdfDocument pdfDoc = new PdfDocument(new PdfReader(sourceFile), new PdfWriter(destinationPath));
var numberOfPages = pdfDoc.GetNumberOfPages();
PdfPage page = null;
for (var i = 1; i <= numberOfPages; i++)
{
page = pdfDoc.GetPage(i);
Rectangle ps = page.GetPageSize();
//Center the annotation
float bottomLeftX = ps.GetWidth() / 2 - watermarkTrimmingRectangleWidth / 2;
float bottomLeftY = ps.GetHeight() / 2 - watermarkTrimmingRectangleHeight / 2;
Rectangle watermarkTrimmingRectangle = new Rectangle(bottomLeftX, bottomLeftY, watermarkTrimmingRectangleWidth, watermarkTrimmingRectangleHeight);
PdfWatermarkAnnotation watermark = new PdfWatermarkAnnotation(watermarkTrimmingRectangle);
//Apply linear algebra rotation math
//Create identity matrix
AffineTransform transform = new AffineTransform();//No-args constructor creates the identity transform
//Apply translation
transform.Translate(xTranslation, yTranslation);
//Apply rotation
transform.Rotate(rotationInRads);
PdfFixedPrint fixedPrint = new PdfFixedPrint();
watermark.SetFixedPrint(fixedPrint);
//Create appearance
Rectangle formRectangle = new Rectangle(formXOffset, formYOffset, formWidth, formHeight);
//Observation: font XObject will be resized to fit inside the watermark rectangle
PdfFormXObject form = new PdfFormXObject(formRectangle);
PdfExtGState gs1 = new PdfExtGState().SetFillOpacity(0.6f);
PdfCanvas canvas = new PdfCanvas(form, pdfDoc);
float[] transformValues = new float[6];
transform.GetMatrix(transformValues);
canvas.SaveState()
.BeginText().SetColor(Color.GRAY, true).SetExtGState(gs1)
.SetTextMatrix(transformValues[0], transformValues[1], transformValues[2], transformValues[3], transformValues[4], transformValues[5])
.SetFontAndSize(font, fontSize)
.ShowText("watermark text")
.EndText()
.RestoreState();
canvas.Release();
watermark.SetAppearance(PdfName.N, new PdfAnnotationAppearance(form.GetPdfObject()));
watermark.SetFlags(PdfAnnotation.PRINT);
page.AddAnnotation(watermark);
}
page?.Flush();
pdfDoc.Close();
}
To remove the watermark:
public void RemovetWatermarkPDF(string sourceFile, string destinationPath)
{
PdfDocument pdfDoc = new PdfDocument(new PdfReader(sourceFile), new PdfWriter(destinationPath));
var numberOfPages = pdfDoc.GetNumberOfPages();
for (var i = 1; i <= numberOfPages; i++)
{
// PdfAnnotation
PdfDictionary pageDict = pdfDoc.GetPage(i).GetPdfObject();
PdfArray annots = pageDict.GetAsArray(PdfName.Annots);
for (int j = 0; j < annots.Size(); j++)
{
PdfDictionary annotation = annots.GetAsDictionary(j);
if (PdfName.Watermark.Equals(annotation.GetAsName(PdfName.Subtype)))
{
annotation.Clear();
}
}
}
pdfDoc.Close();
}
What about variable length watermark text? How would you dynamically resize the rectangle to fit the text? This is not inbuilt into iText, you would need to play around with the following dimension parameters:
float watermarkTrimmingRectangleWidth = 600;
float watermarkTrimmingRectangleHeight = 600;
float formWidth = 600;
float formHeight = 600;
float formXOffset = -100;
float fontSize = 30;
For my use-case I checked the length of the watermark text and based on that adjusted the parameters accordingly eg:
if (watermarkText.Length <= 14)
{
watermarkTrimmingRectangleWidth = 200;
watermarkTrimmingRectangleHeight = 200;
formWidth = 200;
formHeight = 200;
formXOffset = 0;
fontSize = 30;
}
else if (watermarkText.Length <= 22)
{
watermarkTrimmingRectangleWidth = 300;
watermarkTrimmingRectangleHeight = 300;
formWidth = 300;
formHeight = 300;
formXOffset = 0;
fontSize = 30;
}
else if (...)
{
...
}
.
.
etc.
.
.
else if (watermarkText.Length <= 62)
{
watermarkTrimmingRectangleWidth = 600;
watermarkTrimmingRectangleHeight = 600;
formWidth = 600;
formHeight = 600;
formXOffset = -100;
fontSize = 20;
}

Titanium appcelerator drag view

I want to drag a view verticaly inside my app, below is my code.
I have a window with id="win" and a square view (100x100).
var window = $.win;
var lastTouchPosition = 0;
$.demo.addEventListener("touchstart", function(e){
var touchPos = {x:e.x, y:e.y};
lastTouchPosition = $.demo.convertPointToView(touchPos, window);
});
$.demo.addEventListener("touchmove", function(e){
var touchPos = {x:e.x, y:e.y};
var newTouchPosition = $.demo.convertPointToView(touchPos, window);
$.demo.top += Number(newTouchPosition.y) - Number(lastTouchPosition.y);
$.demo.left += Number(newTouchPosition.x) - Number(lastTouchPosition.y);
//lastTouchPosition = newTouchPosition;
});
When i start drag the view i get following WARN : [WARN] : Invalid dimension value (nan) requested. Making the dimension undefined instead.
and my view is not moving.
Could you give me an idea please how i can start drag a view and stop to drag it when i reach a specific vertical position value (eg: the bottom of the viewport)
Thank you for your help.
I would add the touch events to the window/container-view instead like this:
var WIDTH = (OS_ANDROID) ? Ti.Platform.displayCaps.platformWidth / dpi : Ti.Platform.displayCaps.platformWidth;
var HEIGHT = (OS_ANDROID) ? Ti.Platform.displayCaps.platformHeight / dpi : Ti.Platform.displayCaps.platformHeight;
var sx = 0;
var sy = 0;
var cx = 0;
var cy = 0;
var xDistance = 0;
function onTouchStart(e) {
// start movement
sx = e.x;
sy = e.y;
cx = e.x;
cy = e.y;
}
function onTouchMove(e) {
xDistance = cx - sx;
var yDistance = cy - sy;
var rotationStrength = Math.min(xDistance / (WIDTH), 1);
var rotationStrengthY = Math.min(yDistance / (HEIGHT), 1);
var rotationAngel = (2 * Math.PI * rotationStrength / 16);
var scaleStrength = 1 - Math.abs(rotationStrength) / 16;
var scaleStrengthY = 1 - Math.abs(rotationStrengthY) / 16;
var scaleMax = Math.min(scaleStrength, scaleStrengthY);
var scale = Math.max(scaleMax, 0.93);
$.view_card_front.rotation = rotationAngel * 20;
$.view_card_front.translationX = xDistance;
$.view_card_front.setTranslationY(yDistance);
$.view_card_front.scaleX = scale;
$.view_card_front.scaleY = scale;
cx = e.x;
cy = e.y;
}
function onTouchEnd(e) {
// check xDistance
}
$.index.addEventListener("touchmove", onTouchMove);
$.index.addEventListener("touchstart", onTouchStart);
$.index.addEventListener("touchend", onTouchEnd);
in the XML there is a <View id="view_card_front"/> with touchEnabled:false
This will give you a nice smooth movent (and a rotation in this example)

createjs Y position inside of movieclip

I have a graphic in an animation playing within a movieclip
What I want to do is get the x and y position of the graphic inside of that movieclip as it animates.
but I'm finding that the x an y don't update, even though at the moment, I'm checking within the tick function, I'm using globalToLocal
function tickHandler(event) {
//get the x and y of this mc using globalToLocal
console.log(exportRoot.game_anim.meterMC.awd.globalToLocal(exportRoot.game_anim.meterMC.awd.x, exportRoot.game_anim.meterMC.awd.y))
stage.update();
}
exportRoot.gotoAndStop("game")
exportRoot.game_anim.meterMC.arrowYou.addEventListener("mousedown",function (evt) {
var _this = evt.target
var mouseRight = 0;
var mouseLeft = 180;
var offset = {x: _this.x - evt.stageX, y: _this.y - evt.stageY};
evt.addEventListener("mousemove" , function(ev){
// )
var pt = exportRoot.game_anim.meterMC.globalToLocal(stage.mouseX, stage.mouseY)
if ( pt.y > mouseLeft){
percent = 100;
} else if (pt.y < mouseRight){
percent = 0;
} else {
percent = Math.round(((pt.y - mouseRight) / (mouseLeft - mouseRight)*100));
_this.y = pt.y;
}
if ( pt.y > mouseLeft){
}
;
})
});
Try using localToGlobal with a static point in your target clip. For example:
var pt = myMC.subMC.localToGlobal(0,0);
console.log(pt.x, pt.y);

How do I add a checkbox column to a DataGrid in Compact Framework 3.5? [duplicate]

how to put checkboxes in datagrid in windows mobile 6 using c#?
dataset dsAgent=table;
DataTable dataTable = dsAgent.Tables[0];
DataGridTableStyle tableStyle = new DataGridTableStyle();
tableStyle.MappingName = dataTable.TableName;
GridColumnStylesCollection columnStyles = tableStyle.GridColumnStyles;
DataGridTextBoxColumn columnStyle = new DataGridTextBoxColumn();
columnStyle.MappingName = "FirstName";
columnStyle.HeaderText = "Name";
columnStyle.Width = 80;
columnStyles.Add(columnStyle);
//columnStyle = new DataGridTextBoxColumn();
//columnStyle.MappingName = "EmailAddress";
//columnStyle.HeaderText = "EmailID";
//columnStyle.Width = 150;
//columnStyles.Add(columnStyle);
columnStyle = new DataGridTextBoxColumn();
columnStyle.MappingName = "WorkPhone";
columnStyle.HeaderText = "PhoneNo";
columnStyle.Width = 150;
columnStyles.Add(columnStyle);
GridTableStylesCollection tableStyles = DataGrid.TableStyles;
tableStyles.Add(tableStyle);
DataGrid.PreferredRowHeight = 16;
DataGrid.RowHeadersVisible = false;
DataGrid.DataSource = dataTable;
Here's some code from and old blog by Eric Hartwell (pulled into SO using the wayback machine):
private void SetupTableStyles()
{
Color alternatingColor = SystemColors.ControlDark;
DataTable vehicle = dataSource.Tables[1];
// ID Column
DataGridCustomTextBoxColumn dataGridCustomColumn0 = new DataGridCustomTextBoxColumn();
dataGridCustomColumn0.Owner = this.dataGrid1;
dataGridCustomColumn0.Format = "0##";
dataGridCustomColumn0.FormatInfo = null;
dataGridCustomColumn0.HeaderText = vehicle.Columns[0].ColumnName;
dataGridCustomColumn0.MappingName = vehicle.Columns[0].ColumnName;
dataGridCustomColumn0.Width = dataGrid1.Width * 10 / 100; // 10% of grid size
dataGridCustomColumn0.AlternatingBackColor = alternatingColor;
dataGridCustomColumn0.ReadOnly = true;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn0);
// Make column
DataGridCustomTextBoxColumn dataGridCustomColumn1 = new DataGridCustomTextBoxColumn();
dataGridCustomColumn1.Owner = this.dataGrid1;
dataGridCustomColumn1.HeaderText = vehicle.Columns[1].ColumnName;
dataGridCustomColumn1.MappingName = vehicle.Columns[1].ColumnName;
dataGridCustomColumn1.NullText = "-Probably Ford-";
dataGridCustomColumn1.Width = dataGrid1.Width * 40 / 100; // 40% of grid size
dataGridCustomColumn1.Alignment = HorizontalAlignment.Right;
dataGridCustomColumn1.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn1);
// Mileage column
DataGridCustomUpDownColumn dataGridCustomColumn2 = new DataGridCustomUpDownColumn();
dataGridCustomColumn2.Owner = this.dataGrid1;
dataGridCustomColumn2.HeaderText = vehicle.Columns[2].ColumnName;
dataGridCustomColumn2.MappingName = vehicle.Columns[2].ColumnName;
dataGridCustomColumn2.NullText = "-Unknown-";
dataGridCustomColumn2.Width = dataGrid1.Width * 20 / 100; // 20% of grid size
dataGridCustomColumn2.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn2.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn2);
// Availability column
DataGridCustomCheckBoxColumn dataGridCustomColumn3 = new DataGridCustomCheckBoxColumn();
dataGridCustomColumn3.Owner = this.dataGrid1;
dataGridCustomColumn3.HeaderText = vehicle.Columns[3].ColumnName;
dataGridCustomColumn3.MappingName = vehicle.Columns[3].ColumnName;
dataGridCustomColumn3.NullText = "-Unknown-";
dataGridCustomColumn3.Width = dataGrid1.Width * 10 / 100; // 10% of grid size
dataGridCustomColumn3.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn3.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn3);
// Fuel Level column
DataGridCustomComboBoxColumn dataGridCustomColumn4 = new DataGridCustomComboBoxColumn();
dataGridCustomColumn4.Owner = this.dataGrid1;
dataGridCustomColumn4.HeaderText = vehicle.Columns[4].ColumnName;
dataGridCustomColumn4.MappingName = vehicle.Columns[4].ColumnName;
dataGridCustomColumn4.NullText = "-Unknown-";
dataGridCustomColumn4.Width = dataGrid1.Width * 30 / 100; // 30% of grid size
dataGridCustomColumn4.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn4.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn4);
// Last Used column
DataGridCustomDateTimePickerColumn dataGridCustomColumn5 = new DataGridCustomDateTimePickerColumn();
dataGridCustomColumn5.Owner = this.dataGrid1;
dataGridCustomColumn5.HeaderText = vehicle.Columns[5].ColumnName;
dataGridCustomColumn5.MappingName = vehicle.Columns[5].ColumnName;
dataGridCustomColumn5.NullText = "-Unknown-";
dataGridCustomColumn5.Width = dataGrid1.Width * 30 / 100; // 30% of grid size
dataGridCustomColumn5.Alignment = HorizontalAlignment.Left;
dataGridCustomColumn5.AlternatingBackColor = alternatingColor;
dataGridTableStyle1.GridColumnStyles.Add(dataGridCustomColumn5);
// Grid, mapping
dataGridTableStyle1.MappingName = vehicle.TableName; // Setup table mapping name
dataGrid1.DataSource = vehicle;
// Setup grid's data source
ComboBox cb = (ComboBox)dataGridCustomColumn4.HostedControl;
DataTable fuel = dataSource.Tables[0]; // Set up data source
cb.DataSource = fuel;
// For combo box column
cb.DisplayMember = fuel.Columns[0].ColumnName;
cb.ValueMember = fuel.Columns[0].ColumnName;
dataGrid1.CurrentRowIndex = 50; // Move to the middle of the table
}
For better checkbox UI look and feel, rather than big cross
private void DrawCheckBox(Graphics g, Rectangle bounds, CheckState state)
{
int size;
int boxTop;
size = bounds.Size.Height < bounds.Size.Width ? bounds.Size.Height : bounds.Size.Width;
size = size > ((int)g.DpiX / 7) ? ((int)g.DpiX / 7) : size;
boxTop = bounds.Y + (bounds.Height - size) / 2;
size = 12; // 13, so I made it 12
boxTop = boxTop - 1;
using (Pen p = new Pen(this.Owner.ForeColor))
{
g.DrawRectangle(p, bounds.X, boxTop, size, size);
}
if (state != CheckState.Unchecked)
{
using (Pen p = new Pen(state == CheckState.Indeterminate ? SystemColors.GrayText : SystemColors.ControlText))
{
p.Width = 2;
int offset = 2;
int edgeOffset = 2;
g.DrawLine(p, bounds.X + offset, boxTop + offset + 2, bounds.X + (size / 2) - edgeOffset, boxTop + (size / 2) + edgeOffset);
g.DrawLine(p, bounds.X + (size / 2) - edgeOffset, boxTop + (size / 2) + edgeOffset, bounds.X + size - offset, boxTop + offset);
}
}
}