I implemented a signature pad using https://github.com/ramsatt/Angular9SignaturePad/tree/master/src/app/_componets/signature-pad and it works fine on smaller devices but on iPad or bigger devices like 7" upwards, it doesn't work properly.
When drawing on the screen, the resulting line has an offset from where the user touched (Signature drawn doesn't appear directly under the pen as user draws).
please how can I fix this.
So I fixed it by adding the below code and calling it in ngOnInit
resizeCanvas() {
var width = this.signaturePadElement.nativeElement.width;
var height = this.signaturePadElement.nativeElement.height;
var ratio = Math.max(window.devicePixelRatio || 1, 1);
if (ratio <= 2) {
this.signaturePadElement.nativeElement.width = width * ratio;
this.signaturePadElement.nativeElement.height = height * ratio;
this.signaturePadElement.nativeElement
.getContext("2d")
.scale(ratio, ratio);
}
then do
ngOnInit(){
this.resizeCanvas()
}
this.signaturePadElement is your Element gotten using ViewChild()
Related
I've ran into a small issue developing a picture taker for a VR project. I need to take a screenshot of a specific zone, which is a rectangle with variable width and height. To do that, I have a transform anchored to the top right corner of the bounding box that represents where the picture is going to be taken, and one anchored to the lower right corner.
Here's what it should look like. I've added little red circles to show the transforms's position.
Here's what a screencap using the left eye looks like. It's the same result if I use "both eyes" as a target in the Camera settings.
Here's what a screencap using the right eye looks like. So not only is it too far left or right, it's also a tad too high.
Here's the code that creates the Rect, and here's the code that reads the pixels.
When the Main Camera targets the left eye, there's almost half of the Rect's with as an offset to the left, when it targets the right eye, there's that same offset to the right, when it targets both, there's a softer offset to the left, and all of these have a slight vertical offset upwards.
Any help is appreciated. I'll keep this thread updated if I find anything!
public void SubmitPicture()
{
Vector2 upperLeftPosition = mainCamera.WorldToScreenPoint(upperLeftTransform.position);
Vector2 lowerRightPosition = mainCamera.WorldToScreenPoint(lowerRightTransform.position);
pictureBoxRect.x = upperLeftPosition.x;
pictureBoxRect.y = mainCamera.scaledPixelHeight - upperLeftPosition.y;
pictureBoxRect.width = lowerRightPosition.x - upperLeftPosition.x;
pictureBoxRect.height = lowerRightPosition.y - upperLeftPosition.y;
pictureSnapper.OnInput(AbsoluteRect(pictureBoxRect));
}
public void OnInput(Rect pictureBox)
{
if ((int)pictureBox.width > 0 && (int)pictureBox.height > 0)
{
videoPlayer.Stop();
Texture2D videoTexture = new Texture2D((int)pictureBox.width, (int)pictureBox.height);
videoTexture.ReadPixels(pictureBox, 0, 0);
videoTexture.Apply();
byte[] imageData = videoTexture.GetRawTextureData();
if (debug)
{
byte[] imagePng = videoTexture.EncodeToPNG();
File.WriteAllBytes(Application.dataPath + "/" + savename + ".png", imagePng);
}
}
}
private Rect AbsoluteRect(Rect rect)
{
if (rect.width < 0)
{
rect.x -= rect.width;
rect.width = Mathf.Abs(rect.width);
}
if (rect.height < 0)
{
rect.y += rect.height / 2;
rect.height = Mathf.Abs(rect.height);
}
return rect;
}
Updated to add the picture references.
I created a PWA with Phaser 2, following this tutorial (this one is made with Phaser 3).
I face a problem with how the game scales on mobile. In my game I use these Phaser 2 methods for scaling:
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
When I click the localhost link in my mobile, the game appears way too big, I have to scroll down to see it. When I 'download' it to act like an app, it gets shaky at first, scaling up and down until it settles to the correct size. The game dimensions are 1280x720 and looked very nice before I converted it to a PWA, both on web and on mobile.
I did an audit for a PWA in Chrome's dev tools and it showed this notification:
The viewport size is 1280px, whereas the window size is 412px.
I tried solutions from here and here but that did not help. It must be something else.
Do you have any idea what could be causing this?
This is something I usually do for Phaser 3, but even though you're using Phaser 2 you could try resizing the canvas outside of Phaser 2's functionality.
From Emanuele Feronato's How to scale your HTML5 games if your framework does not feature a scale manager – or if you do not use any framework:
/**
* From https://www.emanueleferonato.com/2018/02/16/how-to-scale-your-html5-games-if-your-framework-does-not-feature-a-scale-manager-or-if-you-do-not-use-any-framework/
*/
function resize() {
const canvas = document.querySelector("canvas");
const width = window.innerWidth;
const height = window.innerHeight;
const wratio = width / height;
const ratio = Number(gameConfig.width) / Number(gameConfig.height);
if (wratio < ratio) {
canvas.style.width = width + "px";
canvas.style.height = (width / ratio) + "px";
} else {
canvas.style.width = (height * ratio) + "px";
canvas.style.height = height + "px";
}
}
window.onload = function(){
// setup your game here
resize();
window.addEventListener("resize", resize, false);
}
I have a very simple script that updates my orthographic camera on a given resolution so that it accurately scales the view to be pixel perfect.
Here is some relevant code:
OrthographicSetting get_override(int size)
{
return Overrides.FirstOrDefault(x => x.OrthographicSize == size);
}
void update_ortho()
{
m_last_size = Screen.height;
float ref_size = (OrthographicSize / PixelsPerUnit) * 0.5f;
OrthographicSetting or = get_override(m_last_size);
float ppu = or != null ? or.PixelsPerUnit : PixelsPerUnit;
float ortho_size = (m_last_size / ppu) * 0.5f;
float multiplier = Mathf.Max(1, Mathf.Round(ortho_size / ref_size));
ortho_size /= multiplier;
this.GetComponent<Camera>().orthographicSize = ortho_size;
Debug.Log(m_last_size + " " + ortho_size + " " + multiplier + " " + ppu);
}
[System.Serializable]
public class OrthographicSetting
{
public int OrthographicSize;
public float PixelsPerUnit;
}
OrthographicSetting get_override(int size)
{
return Overrides.FirstOrDefault(x => x.OrthographicSize == size);
}
With this, i can specify a set of overrides for every resolution.
My current setup is using 100 pixels per unity unit. All of my sprites use point filtering with no compression. Yet i still get strange results. 90% of the sprites render fine, but some seem to be rendering incorrectly.
Here's a screenshot to illustrate:
I may have solved the problem. I was using a sprite shader with pixel snap turned on. if i turn off pixel snap the problem seems to more or less go away. I still get the occasional problem with game objects that aren't in "nice" positions, i dunno how to avoid that problem though...
I'm getting errors however I try to get the mediabox of a PDF Page in Swift.:
if let pdf = CGPDFDocument(pdfURL) {
let numberOfPages = pdf.numberOfPages
for index in 0...numberOfPages {
let pdfPage = pdf.page(at: index)
print(CGPDFPageGetBoxRect(pdfPage!, kCGPDFMediaBox))
}
I've also tried:
print(pdfPage.getBoxRect(kCGPDFMediaBox))
as well as using PDFDisplayBox.mediaBox, mediaBox and pretty much every other variant. It works fine in python.
I can also get the info fine using PDFPage (as opposed to CGPDFPage), but I need to use CGPDFPage for other things that PDFPage can't do.)
The second part is: from what I can tell, the mediaBox result does not factor in the rotation. So a landscape page might have a portrait mediabox with a rotation of 90. Is there any easy way to get the "actual" display dimensions, or do I have to do the transformation myself?
PDF pages are numbered starting at 1, not at zero. And getBoxRect()
takes a enum CGPDFBox argument in Swift 3. So this should work:
for pageNo in 1...pdf.numberOfPages {
if let pdfPage = pdf.page(at: pageNo) {
let mediaBox = pdfPage.getBoxRect(.mediaBox)
print(mediaBox)
}
}
The PDF bounding boxes do not take the page rotation into account.
The following might work to compute the rotated box (untested):
// Get rotation angle and convert from degrees to radians:
let angle = CGFloat(pdfPage.rotationAngle) * CGFloat.pi / 180
// Apply rotation transform to media box:
let rotatedBox = mediaBox.applying(CGAffineTransform(rotationAngle: angle))
I have some code that controls a serious of images to produce and 360 spin when dragging mouseX axis. This all worked fine with the code I have used.
I have since had to design for different platform and enlarge the size of the stage i did this by scale to stage check box in the document settings.
While the mouse down is in action the spin works fine dragging through the images as intended but when you you release and start to drag again it doesn't remember the last frame and jumps to another frame before dragging fine again? Why is it jumping like this when all I have done is change the scale of everything?
please see code use to
//ROTATION OF CONTROL BODY X
spinX_mc.stop();
var spinX_mc:MovieClip;
var offsetFrame:int = spinX_mc.currentFrame;
var offsetX:Number = 0;
var percent:Number = 0;
//Listeners
spinX_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
spinX_mc.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function startDragging(e:MouseEvent):void
{
// start listening for mouse movement
spinX_mc.addEventListener(MouseEvent.MOUSE_MOVE,drag);
offsetX = stage.mouseX;
}
function stopDragging(e:MouseEvent):void
{
("stopDrag")
// STOP listening for mouse movement
spinX_mc.removeEventListener(MouseEvent.MOUSE_MOVE,drag);
// save the current frame number;
offsetFrame = spinX_mc.currentFrame;
removeEventListener(MouseEvent.MOUSE_DOWN, startDragging);
}
// this function is called continuously while the mouse is being dragged
function drag(e:MouseEvent):void
{
trace ("Drag")
// work out how far the mouse has been dragged, relative to the width of the spinX_mc
// value between -1 and +1
percent = (mouseX - offsetX) / spinX_mc.width;
// trace(percent);
// work out which frame to go to. offsetFrame is the frame we started from
var frame:int = Math.round(percent * spinX_mc.totalFrames) + offsetFrame;
// reset when hitting the END of the spinX_mc timeline
while (frame > spinX_mc.totalFrames)
{
frame -= spinX_mc.totalFrames;
}
// reset when hitting the START of the spinX_mc timeline
while (frame <= 0)
{
frame += spinX_mc.totalFrames;
}
// go to the correct frame
spinX_mc.gotoAndStop(frame);
}
By changing
spinX_mc.addEventListener(MouseEvent.MOUSE_MOVE,drag);
offsetX = stage.mouseX;
to
spinX_mc.addEventListener(MouseEvent.MOUSE_MOVE,drag);
offsetX = mouseX;
I seem to of solved the problem and everything runs smoothly again.