I need your help. I'm currently trying to write a text 2 png library to generate PNGs including inline styling for every single letter. Currently I'm really stuck trying to add a spacing between each letter. At the moment every letter is written like in layers above each one:
Do you have any good ideas how to do this? At the end the letters should be beside each other including the option to pass a letter spacing to modify the spacing later - like line spacing:
let text = '{#ff0000ES}\n{#FF33F0AC}\nR'
fs.writeFileSync('test2.png', text2png(text,
{
color: 'gray',
textAlign: 'center',
lineSpacing: 30,
letterSpacing: 10, // <-- needed
font: '100px sans-serif'
}
));
This is the function I'm working with:
const {registerFont, createCanvas} = require("canvas");
/**
* Convert text to PNG image.
* #param text
* #param [options]
* #param [options.font="30px sans-serif"] css style font
* #param [options.textAlign="left"] text alignment (left, center, right)
* #param [options.color="black"] (or options.textColor) text color
* #param [options.backgroundColor] (or options.bgColor) background color
* #param [options.lineSpacing=0]
* #param [options.letterSpacing=0]
* #param [options.strokeWidth=0]
* #param [options.strokeColor='white']
* #param [options.padding=0] width of the padding area (left, top, right, bottom)
* #param [options.paddingLeft]
* #param [options.paddingTop]
* #param [options.paddingRight]
* #param [options.paddingBottom]
* #param [options.borderWidth=0] width of border (left, top, right, bottom)
* #param [options.borderLeftWidth=0]
* #param [options.borderTopWidth=0]
* #param [options.borderRightWidth=0]
* #param [options.borderBottomWidth=0]
* #param [options.borderColor="black"] border color
* #param [options.localFontPath] path to local font (e.g. fonts/Lobster-Regular.ttf)
* #param [options.localFontName] name of local font (e.g. Lobster)
* #param [options.output="buffer"] 'buffer', 'stream', 'dataURL', 'canvas's
* #returns {string} png image buffer
*/
const text2png = (text, options = {}) => {
// Options
options = parseOptions(options);
// Register a custom font
if (options.localFontPath && options.localFontName) {
registerFont(options.localFontPath, {family: options.localFontName});
}
const canvas = createCanvas(0, 0);
const ctx = canvas.getContext("2d");
const max = {
left: 0,
right: 0,
ascent: 0,
descent: 0
};
let lastDescent;
const lineProps = text.split("\n").map(line => {
ctx.font = options.font;
const metrics = ctx.measureText(line);
const left = -1 * metrics.actualBoundingBoxLeft;
const right = metrics.actualBoundingBoxRight;
const ascent = metrics.actualBoundingBoxAscent;
const descent = metrics.actualBoundingBoxDescent;
max.left = Math.max(max.left, left);
max.right = Math.max(max.right, right);
max.ascent = Math.max(max.ascent, ascent);
max.descent = Math.max(max.descent, descent);
lastDescent = descent;
return {line, left, right, ascent, descent};
});
const lineHeight = max.ascent + max.descent + options.lineSpacing;
const contentWidth = max.left + max.right;
const contentHeight =
lineHeight * lineProps.length -
options.lineSpacing -
(max.descent - lastDescent);
canvas.width =
contentWidth +
options.borderLeftWidth +
options.borderRightWidth +
options.paddingLeft +
options.paddingRight;
canvas.height =
contentHeight +
options.borderTopWidth +
options.borderBottomWidth +
options.paddingTop +
options.paddingBottom;
const hasBorder =
false ||
options.borderLeftWidth ||
options.borderTopWidth ||
options.borderRightWidth ||
options.borderBottomWidth;
if (hasBorder) {
ctx.fillStyle = options.borderColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
if (options.backgroundColor) {
ctx.fillStyle = options.backgroundColor;
ctx.fillRect(
options.borderLeftWidth,
options.borderTopWidth,
canvas.width - (options.borderLeftWidth + options.borderRightWidth),
canvas.height - (options.borderTopWidth + options.borderBottomWidth)
);
} else if (hasBorder) {
ctx.clearRect(
options.borderLeftWidth,
options.borderTopWidth,
canvas.width - (options.borderLeftWidth + options.borderRightWidth),
canvas.height - (options.borderTopWidth + options.borderBottomWidth)
);
}
ctx.font = options.font;
ctx.antialias = "gray";
ctx.textAlign = options.textAlign;
ctx.lineWidth = options.strokeWidth;
ctx.strokeStyle = options.strokeColor;
let offsetY = options.borderTopWidth + options.paddingTop;
lineProps.forEach(lineProp => {
// Calculate Y
let x = 0;
let y = max.ascent + offsetY;
// Calculate X
switch (options.textAlign) {
case "start":
case "left":
x = lineProp.left + options.borderLeftWidth + options.paddingLeft;
break;
case "end":
case "right":
x =
canvas.width -
lineProp.left -
options.borderRightWidth -
options.paddingRight;
break;
case "center":
x = contentWidth / 2 + options.borderLeftWidth + options.paddingLeft;
break;
}
let linePropIterator = 0;
let stylingChars = '{}';
let subtext = '';
let textColor = options.textColor;
while (linePropIterator < lineProp.line.length) {
let wordCharCode = lineProp.line.charCodeAt(linePropIterator);
let word = lineProp.line[linePropIterator];
if (wordCharCode < 256) {
if (stylingChars.indexOf(word) > -1) {
if (word === '{') {
textColor = lineProp.line.substr(linePropIterator + 1, 7);
linePropIterator += 7;
} else if (word === '}') {
textColor = options.textColor;
}
} else {
subtext += word;
}
if (subtext !== '') {
renderText(subtext);
subtext = '';
}
linePropIterator += 1;
}
}
function renderText(text) {
ctx.fillStyle = textColor;
ctx.fillText(text, x + randomInt(20, 50), y); // <-- Random int seems to change the spacing but how to calculate it?
if (options.strokeWidth > 0) {
ctx.strokeText(lineProp.line, x, y);
}
}
offsetY += lineHeight;
});
switch (options.output) {
case "buffer":
return canvas.toBuffer();
case "stream":
return canvas.createPNGStream();
case "dataURL":
return canvas.toDataURL("image/png");
case "canvas":
return canvas;
default:
throw new Error(`output type:${options.output} is not supported.`);
}
};
function parseOptions(options) {
return {
font: or(options.font, "30px sans-serif"),
textAlign: or(options.textAlign, "left"),
textColor: or(options.textColor, options.color, "black"),
backgroundColor: or(options.bgColor, options.backgroundColor, null),
lineSpacing: or(options.lineSpacing, 0),
letterSpacing: or(options.letterSpacing, 0),
strokeWidth: or(options.strokeWidth, 0),
strokeColor: or(options.strokeColor, "white"),
paddingLeft: or(options.paddingLeft, options.padding, 0),
paddingTop: or(options.paddingTop, options.padding, 0),
paddingRight: or(options.paddingRight, options.padding, 0),
paddingBottom: or(options.paddingBottom, options.padding, 0),
borderLeftWidth: or(options.borderLeftWidth, options.borderWidth, 0),
borderTopWidth: or(options.borderTopWidth, options.borderWidth, 0),
borderBottomWidth: or(options.borderBottomWidth, options.borderWidth, 0),
borderRightWidth: or(options.borderRightWidth, options.borderWidth, 0),
borderColor: or(options.borderColor, "black"),
localFontName: or(options.localFontName, null),
localFontPath: or(options.localFontPath, null),
output: or(options.output, "buffer")
};
}
function or() {
for (let arg of arguments) {
if (typeof arg !== "undefined") {
return arg;
}
}
return arguments[arguments.length - 1];
}
function randomInt(e, t) {
return Math.floor(Math.random() * (t - e + 1) + e)
}
module.exports = text2png;
I've tried to change the x value with a random int value which seems to be a part of the solution but how to calculate now the x value by respecting the letterSpacing option?
I couldn't quite get to the end of your code, since the snippet you contributed is rather comprehensive... But I believe what you're looking for is the measureText() Method of the canvas context. It returns the width the given String would have, if it were displayed on the canvas; you can read more about that here.
I guess you could use this method to calculate the offsets needed for the different letters. Since measureText() already considers the font type you won't have to worry about different char widths...
Related
const { createCanvas, loadImage, registerFont } = require('canvas');
const fs = require('fs');
const myfact = "when a person dies, they have 7 minutes of brain activity left."
const settings = {
txtarea: {
x: 540,
y: 0,
width: 864,
height: 1080
},
font: 'Quote',
lineHeight: 1,
minFontSize: 50,
maxFontSize: 70
};
async function generateImage() {
const canvas = createCanvas(1080, 1080);
const context = canvas.getContext('2d');
const bgimage = await loadImage("./background.jpg");
context.drawImage(bgimage, 0, 0, 1080, 1080);
registerFont('./Quote.ttf', { family: 'Quote', Style: 'Regular' });
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = '#fff';
drawMultiLineFact(context, myfact, settings);
const buffer = canvas.toBuffer('image/png');
fs.writeFileSync('./image.png', buffer);
};
function drawMultiLineFact(context, myfact, settings) {
const words = require('words-array')(myfact);
var lines = [];
let y;
let lastFittingLines;
let lastFittingFont;
let lastFittingY;
let lastFittingLineHeight;
for (var fontSize = settings.minFontSize; fontSize <= settings.maxFontSize; fontSize++) {
var lineHeight = fontSize * settings.lineHeight;
context.font = `'` + fontSize + `px "Quote"'`
var x = settings.txtarea.x;
y = lineHeight;
lines = []
var line = ''
for (var word of words) {
var linePlus = line + word + ' '
if (context.measureText(linePlus).width > (settings.txtarea.width)) {
lines.push({ text: line, x: x, y: y });
line = word + ' '
y += lineHeight
} else {
line = linePlus
};
};
lines.push({ text: line, x: x, y: y });
if (y > settings.txtarea.height) break;
lastFittingLines = lines;
lastFittingFont = context.font;
lastFittingY = y;
lastFittingLineHeight = lineHeight;
};
lines = lastFittingLines;
context.font = lastFittingFont;
const offset = settings.txtarea.y - lastFittingLineHeight / 2 + (settings.txtarea.height - lastFittingY) / 2;
for (var line of lines) {
context.fillText(line.text.trim(), line.x, line.y + offset);
};
};
generateImage();
I am using the above code to write text but the font i am using is not applied to the text.
I think there is problem in registering font.
file
index.js
quote.js
both in same root folder.
and idk why they say your code is mostly the code . i written so so so may thing lol egnore this paragraph.
and idk why they say your code is mostly the code . i written so so so may thing lol egnore this paragraph.
and idk why they say your code is mostly the code . i written so so so may thing lol egnore this paragraph.
From the project's Readme:
registerFont()
registerFont(path: string, { family: string, weight?: string, style?: string }) => void
To use a font file that is not installed as a system font, use
registerFont() to register the font with Canvas. This must be done
before the Canvas is created.
(emphasize not mine)
You must call it before you create your canvas.
Then, your font declaration is broken. There are ' single quotes that shouldn't be there.
Change it simply
context.font = fontSize + `px Quote`
I have a problem on my project.
I am developing a perspective mockup creating module for designers. Users upload images and i get them for placing in mockups with making some perspective calculations. Then users can download this image. I made all of this on clientside with js.
But there is a problem for images which are drawn on canvas with perspective calculations like this;
Sample img: http://oi62.tinypic.com/2h49dec.jpg
orginal image size: 6500 x 3592 and you can see spread edges on image...
I tried a few technics like ctx.imageSmoothingEnabled true etc.. But result was always same.
What can i do for solve this problem? What do you think about this?
edit
For more detail;
I get an image (Resolution free) from user then crop it for mockup ratio. For example in my sample image, user image was cropped for imac ratio 16:9 then making calculation with four dot of screen. By the way, my mockup image size is 6500 x 3592. so i made scale, transform etc this cropped image and put it in mockup on canvas. And then use blob to download this image to client...
Thanks.
Solved.
I use perspective.js for calculation on canvas. so I made some revisions on this js source.
If you wanna use or check source;
// Copyright 2010 futomi http://www.html5.jp/
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
// perspective.js v0.0.2
// 2010-08-28
/* -------------------------------------------------------------------
* define objects (name space) for this library.
* ----------------------------------------------------------------- */
if (typeof html5jp == 'undefined') {
html5jp = new Object();
}
(function() {
html5jp.perspective = function(ctxd, image) {
// check the arguments
if (!ctxd || !ctxd.strokeStyle) {
return;
}
if (!image || !image.width || !image.height) {
return;
}
// prepare a <canvas> for the image
var cvso = document.createElement('canvas');
cvso.width = parseInt(image.width) * 2;
cvso.height = parseInt(image.height) * 2;
var ctxo = cvso.getContext('2d');
ctxo.drawImage(image, 0, 0, cvso.width, cvso.height);
// prepare a <canvas> for the transformed image
var cvst = document.createElement('canvas');
cvst.width = ctxd.canvas.width;
cvst.height = ctxd.canvas.height;
var ctxt = cvst.getContext('2d');
ctxt.imageSmoothingEnabled = true;
ctxt.mozImageSmoothingEnabled = true;
ctxt.webkitImageSmoothingEnabled = true;
ctxt.msImageSmoothingEnabled = true;
// parameters
this.p = {
ctxd: ctxd,
cvso: cvso,
ctxo: ctxo,
ctxt: ctxt
}
};
var proto = html5jp.perspective.prototype;
proto.draw = function(points) {
var d0x = points[0][0];
var d0y = points[0][1];
var d1x = points[1][0];
var d1y = points[1][1];
var d2x = points[2][0];
var d2y = points[2][1];
var d3x = points[3][0];
var d3y = points[3][1];
// compute the dimension of each side
var dims = [
Math.sqrt(Math.pow(d0x - d1x, 2) + Math.pow(d0y - d1y, 2)), // top side
Math.sqrt(Math.pow(d1x - d2x, 2) + Math.pow(d1y - d2y, 2)), // right side
Math.sqrt(Math.pow(d2x - d3x, 2) + Math.pow(d2y - d3y, 2)), // bottom side
Math.sqrt(Math.pow(d3x - d0x, 2) + Math.pow(d3y - d0y, 2)) // left side
];
//
var ow = this.p.cvso.width;
var oh = this.p.cvso.height;
// specify the index of which dimension is longest
var base_index = 0;
var max_scale_rate = 0;
var zero_num = 0;
for (var i = 0; i < 4; i++) {
var rate = 0;
if (i % 2) {
rate = dims[i] / ow;
} else {
rate = dims[i] / oh;
}
if (rate > max_scale_rate) {
base_index = i;
max_scale_rate = rate;
}
if (dims[i] == 0) {
zero_num++;
}
}
if (zero_num > 1) {
return;
}
//
var step = 0.10;
var cover_step = step * 250;
//
var ctxo = this.p.ctxo;
var ctxt = this.p.ctxt;
//*** ctxt.clearRect(0, 0, ctxt.canvas.width, ctxt.canvas.height);
if (base_index % 2 == 0) { // top or bottom side
var ctxl = this.create_canvas_context(ow, cover_step);
var cvsl = ctxl.canvas;
for (var y = 0; y < oh; y += step) {
var r = y / oh;
var sx = d0x + (d3x - d0x) * r;
var sy = d0y + (d3y - d0y) * r;
var ex = d1x + (d2x - d1x) * r;
var ey = d1y + (d2y - d1y) * r;
var ag = Math.atan((ey - sy) / (ex - sx));
var sc = Math.sqrt(Math.pow(ex - sx, 2) + Math.pow(ey - sy, 2)) / ow;
ctxl.setTransform(1, 0, 0, 1, 0, -y);
ctxl.drawImage(ctxo.canvas, 0, 0);
//
ctxt.translate(sx, sy);
ctxt.rotate(ag);
ctxt.scale(sc, sc);
ctxt.drawImage(cvsl, 0, 0);
//
ctxt.setTransform(1, 0, 0, 1, 0, 0);
}
} else if (base_index % 2 == 1) { // right or left side
var ctxl = this.create_canvas_context(cover_step, oh);
var cvsl = ctxl.canvas;
for (var x = 0; x < ow; x += step) {
var r = x / ow;
var sx = d0x + (d1x - d0x) * r;
var sy = d0y + (d1y - d0y) * r;
var ex = d3x + (d2x - d3x) * r;
var ey = d3y + (d2y - d3y) * r;
var ag = Math.atan((sx - ex) / (ey - sy));
var sc = Math.sqrt(Math.pow(ex - sx, 2) + Math.pow(ey - sy, 2)) / oh;
ctxl.setTransform(1, 0, 0, 1, -x, 0);
ctxl.drawImage(ctxo.canvas, 0, 0);
//
ctxt.translate(sx, sy);
ctxt.rotate(ag);
ctxt.scale(sc, sc);
ctxt.drawImage(cvsl, 0, 0);
//
ctxt.setTransform(1, 0, 0, 1, 0, 0);
}
}
// set a clipping path and draw the transformed image on the destination canvas.
this.p.ctxd.save();
this.set_clipping_path(this.p.ctxd, [
[d0x, d0y],
[d1x, d1y],
[d2x, d2y],
[d3x, d3y]
]);
this.p.ctxd.drawImage(ctxt.canvas, 0, 0);
this.p.ctxd.restore();
}
proto.create_canvas_context = function(w, h) {
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.mozImageSmoothingEnabled = true;
ctx.webkitImageSmoothingEnabled = true;
ctx.msImageSmoothingEnabled = true;
return ctx;
};
proto.set_clipping_path = function(ctx, points) {
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i][0], points[i][1]);
}
ctx.closePath();
ctx.clip();
};
})();
The problem is (most likely, but no code shows so..) that the image is actually too big.
The canvas typically uses bi-linear interpolation (2x2 samples) rather than bi-cubic (4x4 samples). That means if you scale it down a large percentage in one chunk the algorithm will skip some pixels that otherwise should have been sampled, resulting in a more pixelated look.
The solution do is to resize the image in steps, ie. 50% of itself repeatably until a suitable size is achieved. Then use perspective calculations on it. The exact destination size is something you need to find by trial and error, but a good starting point is to use the largest side of the resulting perspective image.
Here is one way to step-down rescale an image in steps.
I am using FlotChart and Flot Tick Rotor [jquery.flot.tickrotor] plugins.
I tried to tweak the rotor to provide some lines between my x-axis labels by drawing some rectangles.
However, the last bar on my stacked graph is also filled with the color I set to my fills.
Can anyone help me?
Here's the image :
Here's my tweaked code :
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
/*
* flot-tickrotor: flot plugin to display angled X-axis tick labels.
*
* Requires flot 0.7 or higher and a browser supporting <canvas>.
*
* To activate, just set xaxis.rotateTicks to an angle in degrees. Labels
* are rotated clockwise, so if you want the labels to angle up and to the
* right (/) you need to provide an angle > 90. The text will be flipped so
* that it is still right-side-up.
* Angles greater than or equal to 180 are ignored.
*/
(function ($) {
var options = { };
function init(plot) {
// Taken from flot-axislabels.
// This is kind of a hack. There are no hooks in Flot between
// the creation and measuring of the ticks (setTicks, measureTickLabels
// in setupGrid() ) and the drawing of the ticks and plot box
// (insertAxisLabels in setupGrid() ).
//
// Therefore, we use a trick where we run the draw routine twice:
// the first time to get the tick measurements, so that we can change
// them, and then have it draw it again.
var ticks = []; // preserve between draw() calls.
var font;
var secondPass = false;
var rotateTicks, rotateTicksRads, radsAboveHoriz;
plot.hooks.draw.push(function (plot, ctx) {
var xaxis; // for convenience
if (!secondPass) {
var opts = plot.getAxes().xaxis.options;
if (opts.rotateTicks === undefined) {
return;
}
rotateTicks = parseInt(opts.rotateTicks, 10);
if (rotateTicks.toString() != opts.rotateTicks || rotateTicks >= 180) { // || rotateTicks == 0
return;
}
rotateTicksRads = rotateTicks * Math.PI/180;
if (rotateTicks > 90) {
radsAboveHoriz = Math.PI - rotateTicksRads;
} else {
radsAboveHoriz = Math.PI/2 - rotateTicksRads;
}
font = opts.rotateTicksFont;
if (!font) {
font = $('.tickLabel').css('font');
}
if (!font) {
font = 'arial';
}
var elem, maxLabelWidth = 0, maxLabelHeight = 0, minX = 0, maxX = 0;
// We have to clear the ticks option so that flot core
// doesn't draw ticks superimposed with ours, but we preserve
// the tick data as xaxis.rotatedTicks so that external code
// can still get to it.
// FIXME: It would obviously be better to just interrupt
// the drawing of the ticks and preserve the 'ticks'
// property. That probably requires another hook.
xaxis = plot.getAxes().xaxis;
ticks = plot.getAxes().xaxis.ticks;
xaxis.rotatedTicks = ticks;
opts.ticks = []; // we'll make our own
var x;
for (var i = 0; i < ticks.length; i++) {
var raber = ticks[i].label.split(" ");
elem = $('<span style="font-size:11pt; font:' + font + '">' + ticks[i].label + '</span>');
plot.getPlaceholder().append(elem);
ticks[i].height = elem.outerHeight(true);
ticks[i].width = elem.outerWidth(true);
elem.remove();
if (ticks[i].height > maxLabelHeight) {
maxLabelHeight = ticks[i].height;
}
if (ticks[i].width > maxLabelWidth) {
maxLabelWidth = ticks[i].width;
}
var tick = ticks[i];
// See second-draw code below for explanation of offsets.
if (rotateTicks > 90) {
// See if any labels are too long and require increased left
// padding.
x = Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v))
- Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
- Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
if (x < minX) {
minX = x;
}
} else {
// See if any labels are too long and require increased right
// padding.
x = Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v))
+ Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
+ Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
if (x > maxX) {
maxX = x;
}
}
}
// Calculate maximum label height after rotating.
if (rotateTicks > 90) {
var acuteRads = rotateTicksRads - Math.PI/2;
opts.labelHeight = Math.ceil(Math.sin(acuteRads) * maxLabelWidth)
+ Math.ceil(Math.sin(acuteRads) * maxLabelHeight) + 20;
} else {
var acuteRads = Math.PI/2 - rotateTicksRads;
// Center such that the top of the label is at the center of the tick.
opts.labelHeight = Math.ceil(Math.sin(rotateTicksRads) * maxLabelWidth)
+ Math.ceil(Math.sin(acuteRads) * maxLabelHeight) + 20;
}
if (minX < 0) {
plot.getAxes().yaxis.options.labelWidth = -1 * minX;
}
// Doesn't seem to work if there are no values using the
// second y axis.
//if (maxX > xaxis.box.left + xaxis.box.width) {
// plot.getAxes().y2axis.options.labelWidth = maxX - xaxis.box.left - xaxis.box.width;
//}
// re-draw with new label widths and heights
secondPass = true;
plot.setupGrid();
plot.draw();
} else {
if (ticks.length == 0) {
return;
}
xaxis = plot.getAxes().xaxis;
var box = xaxis.box;
var tick, label, xoffset, yoffset;
var showWeek = false;
for (var i = 0; i < ticks.length; i++) {
tick = ticks[i];
if (!tick.label) {
continue;
}
ctx.save();
ctx.font = font;
if (rotateTicks <= 90) {
// Center such that the top of the label is at the center of the tick.
xoffset = -Math.ceil(Math.cos(radsAboveHoriz) * tick.height) - 10;
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height) - 10;
ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v)) + xoffset,
box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
ctx.rotate(rotateTicksRads);
} else {
// We want the text to facing up, so we have to
// rotate counterclockwise, which means the label
// has to *end* at the center of the tick.
xoffset = Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
- Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.width)
+ Math.ceil(Math.sin(radsAboveHoriz) * tick.height);
ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v) + xoffset),
box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
ctx.rotate(-radsAboveHoriz);
}
var ticksMe = tick.label.split(" ");
// draw labels
var absXoffset = Math.abs(xoffset);
var leftPad = 5;
ctx.fillText(ticksMe[0], absXoffset - leftPad, 0);
if(showWeek){
ctx.fillText(ticksMe[1], (xoffset + leftPad) , yoffset * 2);
showWeek = false;
if(i == ticks.length - 1){
var offset = Math.abs(xoffset * 3);
ctx.rect(offset - 2, -10, 2 ,(yoffset * 4));
ctx.fillStyle = "#868686";
ctx.fill();
}
}
else{
showWeek = true;
ctx.rect(absXoffset - (leftPad * 2) + 2, -10, -2,(yoffset * 4));
ctx.fillStyle = "#868686";
ctx.fill();
}
ctx.restore();
}
}
});
}
$.plot.plugins.push({
init: init,
options: options,
name: 'tickRotor',
version: '1.0'
});
})(jQuery);
As I figured out, I just need to put on ctx.beginPath() and my problem got solved. :(
I have an image of a wheel of fortune wheel and I am trying to make so that when it spins it displays the correct amount for what it was spun to.
I have the following code: http://jsfiddle.net/maniator/rR67s/
Many times it is correct, and other time is is wrong.
For example I spun this:
And it alerted 300, which is wrong.
How can I fix my algorithm so that it is correct 99% of the time (or 100% if it is possible)?
HTML:
<div id="game">
<div id="tick">⇩</div>
<img id="wheel" src="http://i.imgur.com/R7JYazp.png" data-rotation="0">
</div>
Javascript:
var Wheel = (function () {
var wheel = document.getElementById('wheel'),
wheelValues = [5000, 600, 500, 300, 500, 800, 550, 400, 300, 900, 500, 300, 900, 0, 600, 400, 300, -2, 800, 350, 450, 700, 300, 600],
spinTimeout = false,
spinModifier = function () {
return Math.random() * 10 + 20;
},
modifier = spinModifier(),
slowdownSpeed = 0.5,
prefix = (function () {
if (document.body.style.MozTransform !== undefined) {
return "MozTransform";
} else if (document.body.style.WebkitTransform !== undefined) {
return "WebkitTransform";
} else if (document.body.style.OTransform !== undefined) {
return "OTransform";
} else {
return "";
}
}()),
degreeToRadian = function (deg) {
return deg / (Math.PI * 180);
};
function Wheel() {};
Wheel.prototype.rotate = function (degrees) {
var val = "rotate(-" + degrees + "deg)";
if (wheel.style[prefix] != undefined) wheel.style[prefix] = val;
var rad = degreeToRadian(degrees % 360),
filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + rad + ", M12=-" + rad + ", M21=" + rad + ", M22=" + rad + ")";
if (wheel.style["filter"] != undefined) wheel.style["filter"] = filter;
wheel.setAttribute("data-rotation", degrees);
};
Wheel.prototype.spin = function (callback, amount) {
var _this = this;
clearTimeout(spinTimeout);
modifier -= slowdownSpeed;
if (amount === undefined) {
amount = parseInt(wheel.getAttribute('data-rotation'));
}
this.rotate(amount);
if (modifier > 0) {
spinTimeout = setTimeout(function () {
_this.spin(callback, amount + modifier);
}, 1000 / 5);
} else {
var dataRotation = parseInt(wheel.getAttribute('data-rotation'));
modifier = spinModifier();
var divider = 360 / wheelValues.length;
var wheelValue = wheelValues[Math.floor(Math.round(dataRotation % 360) / divider)];
switch (wheelValue) {
case 0:
return callback(0);
case -1:
return callback("Free Spin");
case -2:
return callback("Lose a turn");
default:
return callback(wheelValue);
}
}
};
return Wheel;
})();
var wheel = new Wheel;
wheel.spin(function(spinVal){
alert(spinVal)
});
Full game for those who want to try it out: http://jsfiddle.net/maniator/XP9Qv/ (<-- this was updated using accepted answer)
The fun continues here.
I think the problem is that the arrow in the starting position is in the middle of a zone, not at the start of it. So you have a starting offset of (360 / wheelValues.length)/2
var divider = 360 / wheelValues.length;
var offset=divider/2; //half division
var wheelValue = wheelValues[Math.floor(Math.ceil((dataRotation+offset) % 360) / divider)];
This seems to work: when the wheel stops either at the beginning (first half) or at the end (last half) of a zone the showed value is the expected one (just about a dozen tests done)
var wheelValue = wheelValues[Math.floor(Math.ceil(dataRotation % 360) / 15)];
switch (wheelValue) {
I changed this line from round to ceil and got 14 out of 14 correct results..
I am building prototype tool to draw simple diagrams.
I need to draw an arrow between two boxes, the problem is i have to find edges of two boxes so that the arrow line does not intersect with the box.
This is the drawing that visualize my problem:
How to find x1,y1 and x2,y2 ?
-- UPDATE --
After 2 days finding solution, this is example & function that i use:
var box1 = { x:1,y:10,w:30,h:30 };
var box2 = { x:100,y:110,w:30,h:30 };
var edge1 = findBoxEdge(box1,box2,1,0);
var edge2 = findBoxEdge(box1,box2,2,0);
function findBoxEdge(box1,box2,box,distant) {
var c1 = box1.x + box1.w/2;
var d1 = box1.y + box1.h/2;
var c2 = box2.x + box2.w/2;
var d2 = box2.y + box2.h/2;
var w,h,delta_x,delta_y,s,c,e,ox,oy,d;
if (box == 1) {
w = box1.w/2;
h = box1.h/2;
} else {
w = box2.w/2;
h = box2.h/2;
}
if (box == 1) {
delta_x = c2-c1;
delta_y = d2-d1;
} else {
delta_x = c1-c2;
delta_y = d1-d2;
}
w+=5;
h+=5;
//intersection is on the top or bottom
if (w*Math.abs(delta_y) > h * Math.abs(delta_x)) {
if (delta_y > 0) {
s = [h*delta_x/delta_y,h];
c = "top";
}
else {
s = [-1*h*delta_x/delta_y,-1*h];
c = "bottom";
}
}
else {
//intersection is on the left or right
if (delta_x > 0) {
s = [w,w*delta_y/delta_x];
c = "right";
}
else {
s = [-1*w,-1*delta_y/delta_x];
c = "left";
}
}
if (typeof(distant) != "undefined") {
//for 2 paralel distant of 2e
e = distant;
if (delta_y == 0) ox = 0;
else ox = e*Math.sqrt(1+Math.pow(delta_x/delta_y,2))
if (delta_x == 0) oy = 0;
else oy = e*Math.sqrt(1+Math.pow(delta_y/delta_x,2))
if (delta_y != 0 && Math.abs(ox + h * (delta_x/delta_y)) <= w) {
d = [sgn(delta_y)*(ox + h * (delta_x/delta_y)),sgn(delta_y)*h];
}
else if (Math.abs(-1*oy + (w * delta_y/delta_x)) <= h) {
d = [sgn(delta_x)*w,sgn(delta_x)*(-1*oy + w * (delta_y/delta_x))];
}
if (delta_y != 0 && Math.abs(-1*ox+(h * (delta_x/delta_y))) <= w) {
d = [sgn(delta_y)*(-1*ox + h * (delta_x/delta_y)),sgn(delta_y)*h];
}
else if (Math.abs(oy + (w * delta_y/delta_x)) <= h) {
d = [sgn(delta_x)*w,sgn(delta_x)*(oy + w * (delta_y/delta_x))];
}
if (box == 1) {
return [Math.round(c1 +d[0]),Math.round(d1 +d[1]),c];
} else {
return [Math.round(c2 +d[0]),Math.round(d2 +d[1]),c];
}
} else {
if (box == 1) {
return [Math.round(c1 +s[0]),Math.round(d1 +s[1]),c];
} else {
return [Math.round(c2 +s[0]),Math.round(d2 +s[1]),c];
}
}
tl;dr -> Look at the jsbin code-example
It is our goal to draw a line from the edges of two Rectangles A & B that would be drawn through their centers.
Therefore we'll have to determine where the line pierces through the edge of a Rect.
We can assume that our Rect is an object containing x and y as offset from the upper left edge and width and height as dimension offset.
This can be done by the following code. The Method you should look at closely is pointOnEdge.
// starting with Point and Rectangle Types, as they ease calculation
var Point = function(x, y) {
return { x: x, y: y };
};
var Rect = function(x, y, w, h) {
return { x: x, y: y, width: w, height: h };
};
var isLeftOf = function(pt1, pt2) { return pt1.x < pt2.x; };
var isAbove = function(pt1, pt2) { return pt1.y < pt2.y; };
var centerOf = function(rect) {
return Point(
rect.x + rect.width / 2,
rect.y + rect.height / 2
);
};
var gradient = function(pt1, pt2) {
return (pt2.y - pt1.y) / (pt2.x - pt1.x);
};
var aspectRatio = function(rect) { return rect.height / rect.width; };
// now, this is where the fun takes place
var pointOnEdge = function(fromRect, toRect) {
var centerA = centerOf(fromRect),
centerB = centerOf(toRect),
// calculate the gradient from rectA to rectB
gradA2B = gradient(centerA, centerB),
// grab the aspectRatio of rectA
// as we want any dimensions to work with the script
aspectA = aspectRatio(fromRect),
// grab the half values, as they are used for the additional point
h05 = fromRect.width / 2,
w05 = fromRect.height / 2,
// the norm is the normalized gradient honoring the aspect Ratio of rectA
normA2B = Math.abs(gradA2B / aspectA),
// the additional point
add = Point(
// when the rectA is left of rectB we move right, else left
(isLeftOf(centerA, centerB) ? 1 : -1) * h05,
// when the rectA is below
(isAbove(centerA, centerB) ? 1 : -1) * w05
);
// norm values are absolute, thus we can compare whether they are
// greater or less than 1
if (normA2B < 1) {
// when they are less then 1 multiply the y component with the norm
add.y *= normA2B;
} else {
// otherwise divide the x component by the norm
add.x /= normA2B;
}
// this way we will stay on the edge with at least one component of the result
// while the other component is shifted towards the center
return Point(centerA.x + add.x, centerA.y + add.y);
};
I wrote a jsbin, you can use to test with some boxes (lower part, in the ready method):
You might want to take a look at a little Geometry helper I wrote some time ago on top of prototype.js
I really hope, that this helps you with your problem ;)
To draw a line between those boxes, you'd first have to define where you want the line to be.
Apparently you want to draw the lines/arrows from the right edge of Rect A to the left edge of
Rect B, somewhat like this:
Assuming your know the origin (upper left Point as { x, y } of a Rect) and its Size (width and height), you first want to determine the position of the center of the edges:
var rectA, rectB; // I assume you have those data
var rectARightEdgeCenter = {
// x is simply the origin's x plus the width
x: rectA.origin.x + rectA.size.width,
// for y you need to add only half the height to origin.y
y: rectA.origin.y + rectA.size.height / 2.0
}
var rectBLeftEdgeCenter = {
// x will be simply the origin's x
x: rectB.origin.x,
// y is half the height added to the origin's y, just as before
y: rectB.origin.y + rectB.size.height / 2.0
}
The more interesting question would be how to determine, from which edge to which other edge you might want to draw the lines in a more dynamic scenario.
If your boxes just pile up from left to right the given solution will fit,
but you might want to check for minimum distances of the edges, to determine a possible best arrow.