Rotate a group with mouse drag move in kineticjs - line

I have this function to rotate a group on mouse dragmove of btnDelete image
function addRotation(group, groupMir, x, y, name) {
var image = group.get('.image')[0];
var imageMir = groupMir.get('.image')[0];
var img = new Image();
img.src = 'web/img/rotation.png';
var poly = group.get('.polygone')[0];
var Rotate = new Kinetic.Image({
x: x,
y: y,
image: img,
name: name,
visible: false,
width:24,
height:24,
offsetX: 12,
offsetY: 12,
draggable: true,
dragOnTop: false
});
if(poly) x=stage.getWidth()-x;
var RotateMir = new Kinetic.Image({
x: x,
y: y,
image: img,
name: name,
visible: false,
width:24,
height:24,
offsetX: 12,
offsetY: 12,
draggable: true,
dragOnTop: false
});
Rotate.on('dragmove', function() {
console.log('group x: '+group.getX());
var pos = stage.getMousePosition();
opp = Math.abs(group.getY() - pos.y);
adj = Math.abs(group.getX() - pos.x);
angle = Math.atan(opp / adj)* (180/Math.PI);
if(pos.x > group.getX() && pos.y < group.getY()){
group.setRotationDeg(90-angle-45);
groupMir.setRotationDeg(90-angle-45);
}else if(pos.x > group.getX() && pos.y > group.getY()){
group.setRotationDeg(90+angle-45);
groupMir.setRotationDeg(90+angle-45);
}else if(pos.x < group.getX() && pos.y > group.getY()){
group.setRotationDeg(270-angle-45);
groupMir.setRotationDeg(270-angle-45);
}else if(pos.x < group.getX() && pos.y < group.getY()){
group.setRotationDeg(270+angle-45);
groupMir.setRotationDeg(270+angle-45);
}
if(image){
this.setX(image.getWidth());this.setY(0);}else if(poly) {this.setX(polygonCorrd[2]);this.setY(polygonCorrd[3]);}
console.log('group après x: '+group.getX());
layer.draw();
});
RotateMir.on('dragmove', function() {
var pos = stage.getMousePosition();
opp = Math.abs(groupMir.getY() - pos.y);
adj = Math.abs(groupMir.getX() - pos.x);
angle = Math.atan(opp / adj)* (180/Math.PI);
if(pos.x > groupMir.getX() && pos.y < groupMir.getY()){
group.setRotationDeg(90-angle-45);
groupMir.setRotationDeg(90-angle-45);
}else if(pos.x > groupMir.getX() && pos.y > groupMir.getY()){
group.setRotationDeg(90+angle-45);
groupMir.setRotationDeg(90+angle-45);
}else if(pos.x < groupMir.getX() && pos.y > groupMir.getY()){
group.setRotationDeg(270-angle-45);
groupMir.setRotationDeg(270-angle-45);
}else if(pos.x < groupMir.getX() && pos.y < groupMir.getY()){
group.setRotationDeg(270+angle-45);
groupMir.setRotationDeg(270+angle-45);
}
this.setX(imageMir.getWidth());
this.setY(0);
layer.draw();
});
and i have two polygons
poly = new Kinetic.Polygon({
x:0,
y:0,
points: [0,0],
fill: Color1,
stroke: 'black',
strokeWidth: 2,
closed: true,
draggable: false,
name: 'polygone',
id:'polygone'
});
//layer.add(poly);
poly2 = new Kinetic.Polygon({
x:0 ,
y:0,
points: [0,0],
fill: Color1,
stroke: 'black',
strokeWidth: 2,
closed: true,
draggable: false,
name: 'polygone',
id:'polygoneMir'
});
polyGroup = new Kinetic.Group({
x: mouse.x,
y: mouse.y,
offsetX: 30,
offsetY: 30,
draggable: true
});
polyGroupMir = new Kinetic.Group({
x: stage.getWidth()-mouse.x,
y: mouse.y,
offsetX: 30,
offsetY: 30,
draggable:true
});
Finally i call the addRotation function
addRotation(polyGroup, polyGroupMir,polygonCorrd[2] ,polygonCorrd[3] , 'btnRotate');
polygonCorrd[2] is the coordinates of the second point in the polygon
polygonCorrd[3] is the coordinates of the third point in the polygon
The rotation works for image, rectangle and not for polygon or line,
Have you any suggestion

Related

SVGPointList length changes using svg.js

Hi I am using the function createPoint to animate a polygon using gsap. I am also using svg.js
If I use vanilla javascript to get the points of the svg with
var polygon = document.querySelector("polygon");
var points = polygon.points;
it returns 3 points which correspond to the number of times the createPoint function is run. This logs out as:
0: SVGPoint {x: 105.30396270751953, y: 143.0928955078125}
1: SVGPoint {x: 348.09027099609375, y: 97.7249984741211}
2: SVGPoint {x: 276.54010009765625, y: 327.56372070}
If I use the svg.js code
const draw = SVG().addTo('body')
var svg = draw.node;
const polygon = draw.polygon().node;
var points = polygon.points;
the same function logs a list of 4 SVGPoints with the first point being {x:0,y:0} even though I am only running the function 3 times. Where is the additional (index 0) svg point coming from? Thanks in advance
0: SVGPoint {x: 0, y: 0}
1: SVGPoint {x: 93.79865264892578, y: 124.19292449951172}
2: SVGPoint {x: 346.3572082519531, y: 97.5942153930664}
3: SVGPoint {x: 227.08517456054688, y: 269.97042846
given the following html
<svg>
<polygon points="">
</svg>
And the code below
TweenLite.defaultEase = Sine.easeInOut;
const draw = SVG().addTo('body')
var svg = draw.node;
const polygon = draw.polygon().node;
var points = polygon.points;
console.log('points',points)
var offset = 75;
createPoint(100, 100);
createPoint(300, 100);
createPoint(300, 300);
// createPoint(100, 300);
function createPoint(x, y) {
var minX = x - offset;
var maxX = x + offset;
var minY = y - offset;
var maxY = y + offset;
var point = points.appendItem(svg.createSVGPoint());
point.x = x;
point.y = y;
moveX();
moveY();
function moveX() {
TweenLite.to(point, random(2, 4), {
x: random(minX, maxX),
delay: random(0.5),
onComplete: moveX
});
}
function moveY() {
TweenLite.to(point, random(2, 4), {
y: random(minY, maxY),
delay: random(0.5),
onComplete: moveY
});
}
}
function random(min, max) {
if (max == null) { max = min; min = 0; }
if (min > max) { var tmp = min; min = max; max = tmp; }
return min + (max - min) * Math.random();
}
Just found out that by adding an empty array to the polygon i.e
const polygon = draw.polygon([]).node
it removes the default {x:0,y:0} object. Dont ask me why :)

I want to display multiple images with rounded corners using HTML Canvas. I want to combine the two programs below

function loads many issues
function loadImages(sources, call) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function()
{
if(++loadedImages >= numImages)
{
call(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = { img1: '1.jpeg', img2: '2.jpeg', img3: '1.jpeg', img4: '2.jpeg', img5: '1.jpeg', img6: '2.jpeg', img7: '1.jpeg' };
loadImages(sources, function(images) {
context.drawImage(images.img1, 0, 0, 140, 120);
context.drawImage(images.img2, 150, 0, 140, 120);
context.drawImage(images.img3, 300, 0, 140, 120);
context.drawImage(images.img4, 450, 0, 140, 120);
context.drawImage(images.img5, 600, 0, 140, 120);
context.drawImage(images.img6, 750, 0, 140, 120);
context.drawImage(images.img7, 900, 0, 140, 120);
});
This function add the rounded corners.
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img1=new Image();
img1.onload=function()
{
ctx.save();
roundedImages ( 10,10,140,120,10);
ctx.clip();
ctx.drawImage ( img1,10,10,140,120);
ctx.restore();
}
function roundedImages(x,y,width,height,radius)
{
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}
img1.src="1.jpeg";
});

Swift 3 and CGContextDrawImage

I want to translate this line to the Swift 3 current syntax code but seems there are some problems:
CGContextDrawImage(context, CGRect(x:0.0,y: 0.0,width: image!.size.width,height: image!.size.height), image!.cgImage)
According to the CoreGraphics.apinotes CGContextDrawImage was converted to CGContext.draw :
Name: CGContextDrawImage
# replaced by draw(_ image: CGImage, in rect: CGRect, byTiling: Bool = false)
SwiftName: CGContext.__draw(self:in:image:)
SwiftPrivate: true
When I try to do :
CGContext.draw(context as! CGImage, in: CGRect(x:0.0, y:0.0, width: image!.size.width, height: image!.size.height), byTiling: false)
Seems there is some simple syntax that disturb the compiler but I cannot see (in fact I receive a typical ambiguous error):
Can anyone help me with this new swift 3 syntax code?
You need to call it as if it's an instance method of CGContext:
context.draw(image!.cgImage!, in: CGRect(x: 0.0,y: 0.0,width: image!.size.width,height: image!.size.height))
Check the latest reference of CGContext.
I have found an another very good solution for this issue which i am using currently. You just need to pass the image as an arugument to this method after capturing image using UIImagePickerController. It works well for all version of iOS and also for both portrait and landscape orientations of Camera. It checks for EXIF property of image using UIImageOrientaiton and accordind to the value of orientation, it transforms & scales the image so you will get the same return image with same orientation as your camera view orientation.
Here i have kept maximum resolutions of 3000 so that the image quality doesn't get spoiled specially while you are using retina devices but you can change its resolution as per your requirement.
func scaleAndRotateImage(image: UIImage, MaxResolution iIntMaxResolution: Int) -> UIImage {
let kMaxResolution = iIntMaxResolution
let imgRef = image.cgImage!
let width: CGFloat = CGFloat(imgRef.width)
let height: CGFloat = CGFloat(imgRef.height)
var transform = CGAffineTransform.identity
var bounds = CGRect.init(x: 0, y: 0, width: width, height: height)
if Int(width) > kMaxResolution || Int(height) > kMaxResolution {
let ratio: CGFloat = width / height
if ratio > 1 {
bounds.size.width = CGFloat(kMaxResolution)
bounds.size.height = bounds.size.width / ratio
}
else {
bounds.size.height = CGFloat(kMaxResolution)
bounds.size.width = bounds.size.height * ratio
}
}
let scaleRatio: CGFloat = bounds.size.width / width
let imageSize = CGSize.init(width: CGFloat(imgRef.width), height: CGFloat(imgRef.height))
var boundHeight: CGFloat
let orient = image.imageOrientation
// The output below is limited by 1 KB.
// Please Sign Up (Free!) to remove this limitation.
switch orient {
case .up:
//EXIF = 1
transform = CGAffineTransform.identity
case .upMirrored:
//EXIF = 2
transform = CGAffineTransform.init(translationX: imageSize.width, y: 0.0)
transform = transform.scaledBy(x: -1.0, y: 1.0)
case .down:
//EXIF = 3
transform = CGAffineTransform.init(translationX: imageSize.width, y: imageSize.height)
transform = transform.rotated(by: CGFloat(Double.pi / 2))
case .downMirrored:
//EXIF = 4
transform = CGAffineTransform.init(translationX: 0.0, y: imageSize.height)
transform = transform.scaledBy(x: 1.0, y: -1.0)
case .leftMirrored:
//EXIF = 5
boundHeight = bounds.size.height
bounds.size.height = bounds.size.width
bounds.size.width = boundHeight
transform = CGAffineTransform.init(translationX: imageSize.height, y: imageSize.width)
transform = transform.scaledBy(x: -1.0, y: 1.0)
transform = transform.rotated(by: CGFloat(Double.pi / 2) / 2.0)
break
default: print("Error in processing image")
}
UIGraphicsBeginImageContext(bounds.size)
let context = UIGraphicsGetCurrentContext()
if orient == .right || orient == .left {
context?.scaleBy(x: -scaleRatio, y: scaleRatio)
context?.translateBy(x: -height, y: 0)
}
else {
context?.scaleBy(x: scaleRatio, y: -scaleRatio)
context?.translateBy(x: 0, y: -height)
}
context?.concatenate(transform)
context?.draw(imgRef, in: CGRect.init(x: 0, y: 0, width: width, height: height))
let imageCopy = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return imageCopy!
}

Plot Array as Graph in ImageView

How can I plot an array to an imageview as a graph?
I've been testing this in Playground and it works, but how can plot this as an imageview in an actual project?
let sineArraySize = 64
let frequency1 = 4.0
let phase1 = 0.0
let amplitude1 = 2.0
let sineWave = (0..<sineArraySize).map {
amplitude1 * sin(2.0 * M_PI / Double(sineArraySize) * Double($0) * frequency1 + phase1)
}
func plotArrayInPlayground<T>(arrayToPlot:Array<T>, title:String) {
for currentValue in arrayToPlot {
XCPCaptureValue(title, currentValue)
}
}
plotArrayInPlayground(sineWave, "Sine wave 1")
One way you could do this:
// this function creates a plot of an array of doubles where it scales to the provided width and the x-axis is on half height
func plotArray(arr: [Double], width: Double, height: Double) -> NSImage {
if arr.isEmpty { return NSImage() }
let xAxisHeight = height / 2
let increment = width / Double(arr.count)
let image = NSImage(size: NSSize(width: width, height: height))
image.lockFocus()
// set background color
NSColor.whiteColor().set()
NSRectFill(NSRect(x: 0, y: 0, width: width, height: height))
let path = NSBezierPath()
// line width of plot
path.lineWidth = 5
path.moveToPoint(NSPoint(x: 0, y: arr[0] * increment + xAxisHeight))
var i = increment
for value in dropFirst(sineWave) {
path.lineToPoint(NSPoint(x: i, y: value * increment + xAxisHeight))
i += increment
}
// set plot color
NSColor.blueColor().set()
path.stroke()
image.unlockFocus()
return image
}
var imageView = NSImageView()
imageView.image = plotArray(sineWave, 500, 200)
// have fun

How to animate Canvas with setInterval

I'm trying to draw arcs using the Canvas library. I get the first blue arc to be drawn, but then nothing is happening inside the setInterval (same behaviour with setTimeout). How can I use the Canvas to build stuff dynamically?
Here is my code:
var canvas = Canvas.createView();
canvas.begin();
canvas.arc(120, 120, 50, 0 * Math.PI, 2 * Math.PI, 0);
canvas.lineWidth(10);
canvas.strokeStyle('blue');
canvas.stroke();
var pointFrom = 1.5;
var interval = setInterval(function() {
var pointTo = pointFrom - 0.5;
console.log('pointFrom : ' + pointFrom);
console.log('pointTo : ' + pointTo);
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1);
canvas.lineWidth(15);
canvas.strokeStyle('red');
canvas.stroke();
pointFrom = pointTo;
if (pointFrom < 0) clearInterval(interval);
}, 2000);
my_view.add(canvas);
Thanks
The
canvas.begin()
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1)
canvas.stroke()
canvas.commit()
must be in the interval function.