I am adding GIF image to SCNNode like below:
let plane = SCNPlane(width: 2, height: 2)
let bundleURL = Bundle.main.url(forResource: "engine", withExtension: "gif")
let animation : CAKeyframeAnimation = createGIFAnimation(url: bundleURL!)!
let layer = CALayer()
layer.bounds = CGRect(x: 0, y: 0, width: 900, height: 900)
layer.add(animation, forKey: "contents")
let tempView = UIView.init(frame: CGRect(x: 0, y: 0, width: 900, height: 900))
tempView.layer.bounds = CGRect(x: -450,
y: -450,
width: tempView.frame.size.width,
height: tempView.frame.size.height)
tempView.layer.addSublayer(layer)
let newMaterial = SCNMaterial()
newMaterial.isDoubleSided = true
newMaterial.diffuse.contents = tempView
plane.materials = [newMaterial]
let node = SCNNode(geometry: plane)
node.name = "engineGif"
let gifImagePosition = SCNVector3Make((self.virtualObjectInteraction.selectedObject?.childNodes[0].position.x)! + 2,
(self.virtualObjectInteraction.selectedObject?.childNodes[0].position.y)! + 4,
(self.virtualObjectInteraction.selectedObject?.childNodes[0].position.z)! - 2))
node.position = gifImagePosition
self.virtualObjectInteraction.selectedObject?.childNodes[0].addChildNode(node)
Everthing looks fine and I am able to view the GIF image with animation. But when I try to move to previous view controller using PopViewController method, I am able to navigate to previous screen but the screen freezes there and none of the button click works.
If I put the app in background and come again, everything works as intended.
I tried removing the GIF image before pop but still have same issue. If I don't add the GIF image, everything is working fine. So the issue is only with adding GIF and I couldn't figure out why?
I found the solution. If i set tempView.layer as contents, it is working fine instead of tempView like below,
let newMaterial = SCNMaterial()
newMaterial.isDoubleSided = true
newMaterial.diffuse.contents = tempView.layer
plane.materials = [newMaterial]
Do not know why it is but this worked for me.
Related
I've recently started working with D3 and I am moving all my existing charts over from Chartjs and so far my attempts have been successful. There is this one chart however that I am unable to produce exactly the same way in D3.
So with Chartjs, there's properties built in to the library that we can use to set the colors for values above and below a certain point on a Line chart. Here's what I had used to get the intended chart with Chartjs:
...config,
fill: {
above: '#4E4AFF20',
below: '#FF515114',
target: 'origin'
},
...config
And this is what the chart in Chartjs ended up looking like:
But D3 doesn't seem to have such a thing as far as I can tell. There's only gradients. So here's what I was able to build in D3:
As you can see, this looks way different from what I had earlier with Chartjs. Also notice how the gradient exists in both the line and the colored area underneath. I know it's there because I added it but that's not what I want and everywhere I look, that's the only way people are doing it. I have done countless attempts to fix this to no avail hence now I'm here asking for your help. Here's the D3 code I have right now:
import * as d3 from 'd3';
import { useEffect, useRef } from 'react';
interface Data {
x: number;
y: number;
}
const width = 350;
const height = 117;
const zeroPoint = 0;
const data: Data[] = [
{ x: 0, y: -20 },
{ x: 10, y: -20 },
{ x: 20, y: -20 },
{ x: 40, y: -20 },
{ x: 50, y: -20 },
{ x: 60, y: -20 },
{ x: 70, y: -20 },
{ x: 80, y: 0 },
{ x: 90, y: 20 },
{ x: 100, y: 20 },
{ x: 110, y: 20 },
{ x: 120, y: 20 },
{ x: 130, y: 20 },
{ x: 140, y: 20 },
{ x: 150, y: 20 }
];
export const Chart: React.FC = () => {
const ref = useRef<SVGSVGElement>(null);
const generateLinePath = (
element: d3.Selection<SVGSVGElement, unknown, null, undefined>,
data: Data[],
xScale: d3.ScaleLinear<number, number>,
yScale: d3.ScaleLinear<number, number>
) => {
const lineGenerator = d3
.line<Data>()
.x(d => xScale(d.x))
.y(d => yScale(d.y));
element.append('path').attr('d', lineGenerator(data));
};
const drawZeroLine = (element: d3.Selection<SVGSVGElement, unknown, null, undefined>, yScale: d3.ScaleLinear<number, number>) => {
element
.append('line')
.attr('x1', '0')
.attr('y1', yScale(zeroPoint))
.attr('x2', width)
.attr('y2', yScale(zeroPoint))
.attr('stroke', '#c4c4c4');
};
const createChart = (data: Data[]) => {
const svg = d3.select(ref.current!).attr('viewBox', `0 0 ${width} ${height}`);
svg.selectAll('*').remove();
const [minX, maxX] = d3.extent(data, d => d.x);
const [minY, maxY] = d3.extent(data, d => d.y);
const xScale = d3.scaleLinear().domain([minX!, maxX!]).range([0, width]);
const yScale = d3
.scaleLinear()
.domain([minY!, maxY!])
.range([height, 0]);
svg
.append('linearGradient')
.attr('id', 'line-gradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('x1', 0)
.attr('x2', width)
.selectAll('stop')
.data(data)
.join('stop')
.attr('offset', d => xScale(d.x) / width)
.attr('stop-color', d => (d.y < zeroPoint ? '#FF5151' : '#4E4AFF'));
svg
.append('linearGradient')
.attr('id', 'area-gradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('x1', xScale(data[0].x))
.attr('x2', xScale(data[data.length - 1].x))
.selectAll('stop')
.data([
{ color: '#FF515110', offset: '0%' },
{ color: '#4E4AFF20', offset: '100%' }
])
.enter()
.append('stop')
.attr('offset', function (d) {
return d.offset;
})
.attr('stop-color', function (d) {
return d.color;
});
svg.attr('stroke', 'url(#line-gradient)').attr('fill', 'url(#area-gradient)');
generateLinePath(svg, data, xScale, yScale);
drawZeroLine(svg, yScale);
};
useEffect(() => {
createChart(data);
}, []);
return <svg ref={ref} />;
};
So there's two problems I am looking to get solved with your help. The more important one is to give different colors to areas under and above the zero line in D3 the way I was able to do with Chartjs and the other one is moving away from gradients and get solid colors without any smooth transitions on both the line and the colored areas underneath.
Alright I managed to recreate the same chart in D3 using a workaround.
So it's not as straightforward as it's in Chartjs but it works pretty well. The idea is to create polygons under and over the line using the same data used to generate the line.
So my chart works like this. The grey line is a straight zero line and the values below zero go under that line with a red color and the ones above are purple. And here's what the Chart data looks like:
data = [
{ x: 0, y: 0 },
{ x: 1, y: 1 },
...
]
Anyways, here's the steps
Generate the scales
const [minX, maxX] = d3.extent(data, d => d.x);
const [minY, maxY] = d3.extent(data, d => d.y);
const xScale = d3.scaleLinear().domain([minX, maxX]).range([0, width]);
const yScale = d3.scaleLinear().domain([minY, maxY]).range([height, 0]);
Generate the line chart using D3's line() function. And don't give any stroke to the generated line.
const lineGenerator = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y));
element.append('path').attr('d', lineGenerator(data));
Add a red SVG polygon that starts from the left side at zero line, then goes to the left bottom, then to where the value starts becoming negative and then finally to where the line reaches the zero line again.
svg.append('polygon').attr(
'points',
`
${xScale(minX - 1)},${yScale(0)} // top left point
${xScale(minX - 1)},${yScale(minY)} // bottom left point
${xScale(data[indexWhereRedPointStartsBecomingPositive].x)},${yScale(data[indexWhereRedPointStartsBecomingPositive].y)} // bottom right point
${xScale(data[indexWhereXReachesZeroLine].x)},${yScale(0)} // top right point
`
)
.attr('fill', 'lightRed')
.attr('stroke', 'darkRed');
Notice how we gave the red stroke to the polygon? That's the reason why we got rid of the stroke from the line and gave it here instead. This is because we need two separate colors (red for below and purple for above) for the chart. The reason why we do minX - 1 is because the stroke is applied to all four sides of the polygon and we want to hide it from the left side so we subtract 1px from the left.
Add another purple SVG polygon that starts from the left side at zero line (where the purple area starts somewhere in the middle), then goes all the way to the right end of the chart and then goes up to the top.
svg.append('polygon').attr(
'points',
`
${xScale(data[indexWhereValueStartsGoingPositive].x)},${yScale(0)}
${width + 1},${yScale(data[data.length - 1].y)}
${width + 1},${yScale(0)}
`
)
.attr('fill', 'lightPurple')
.attr('stroke', 'darkPurple');
Here we do width + 1 to hide the stroke of this purple polygon on the right side the same way we did minX - 1 with the left side of the red box.
So in conclusion, instead of giving stroke to the line generated using d3.line(), give strokes to the two polygons created using the same data that was used to generate the line chart and create the polygons 1px larger than the chart data so the strokes don't appear on the left and right side of the charts.
That's quite a lot I know but I couldn't think of any other way to get the chart to look like this. Anyways, I hope this helps anyone else experiencing a similar problem.
I am using the following code:
function measureText(text, font) {
const span = document.createElement('span');
span.appendChild(document.createTextNode(text));
Object.assign(span.style, {
font: font,
margin: '0',
padding: '0',
border: '0',
whiteSpace: 'nowrap'
});
document.body.appendChild(span);
const {width, height} = span.getBoundingClientRect();
span.remove();
return {width, height};
}
function drawTextBG(ctx, txt, font, x, y) {
ctx.save();
ctx.font = font;
ctx.textAlign = "center";
ctx.textBaseline = 'center';
ctx.fillStyle = '#FFFFFF';
var dimen = measureText(txt, font)
var height = dimen['height']
var width = dimen['width']
ctx.fillRect(x - width/2, y-height/2, width, parseInt(font, 10));
ctx.fillStyle = '#000000';
ctx.fillText(txt, x, y);
ctx.restore();
}
I get the following image where the white back ground is not perfectly capturing the text. How do I modify my code to get the text within the white background aligned perfectly.
I want to dynamically create the height of the background box also.
A working sandbox code is here
I think setting padding:"5%" could do the job, I just test it[here] (https://codesandbox.io/s/fervent-sanderson-bwl8h?fontsize=14) and looks nice.
I want to draw a rectangle over a background image on canvas using angular.js. I can draw it by placing the rectangle code inside the image.onload function.But I want them to be separated.How can I do it?
$scope.printStars = function() {
var c = document.getElementById("myCanvas");
c.width=1920;
c.height=1080;
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 800, 800);
ctx.scale(c.width/1920,c.height/1080);
ctx.translate(1920-500,0);
var imagePaper = new Image();
imagePaper.onload = function(){
ctx.drawImage(imagePaper,100, 20, 500,500);
};
ctx.fillRect(20, 20, 200, 200);
imagePaper.src = "Img/Back1.jpg";
}
My code works if I do this
imagePaper.onload = function(){
ctx.drawImage(imagePaper,100, 20, 500,500);
ctx.fillRect(20, 20, 200, 200);
};
But I want the drawrectangle code outside of image function.
You can assign the ctx to a variable on the $scope and access it in other places now. For example:
$scope.drawRectangle = function() {
$scope.ctx.fillRect(20, 20, 200, 200);
}
<button ng-click=drawRectangle()>Draw rectangle</button>
Is there a way to make a Fabric.js canvas resize with the browser to enable the same result on any device? I'm talking about responsive design.
Has anyone a code example?
This jsFiddle is a working solution. It is inspired by this github issue.
These are the required things:
A div that surrounds the canvas that is controlled by fabric.
<div class="fabric-canvas-wrapper">
<canvas id="theCanvas"></canvas>
</div>
And a window resize handler that triggers the calculation and setting of the new canvas dimension and the zoom.
window.onresize = resizeCanvas() {
const outerCanvasContainer = document.getElementById('fabric-canvas-wrapper');
const ratio = canvas.getWidth() / canvas.getHeight();
const containerWidth = outerCanvasContainer.clientWidth;
const scale = containerWidth / canvas.getWidth();
const zoom = canvas.getZoom() * scale;
canvas.setDimensions({width: containerWidth, height: containerWidth / ratio});
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}
That's all. It seems to work perfectly. Please let me know if any issues come up with this solution.
I have used fabric.js in version 3.6.2.
Basically you need to get the device screen's width and height. Afterwards just resize the canvas accordingly in your Javascript. Example:
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;
You might have screens with varying resolution ratios though, what I usually do in this case is calculate your original width's and the device's width ratio and then adjust both width and height accordingly with that value. Example:
var originalWidth = 960; //Example value
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var widthRatio = originalWidth / width;
canvas.width *= widthRatio;
canvas.height *= widthRatio;
This usually works fine for me on any device, hope this helps.
I know it's been a while but i found an easier way to do it using the zoom feature.
This code is triggered when the window resize is completed. It allows me to determine based on the new dimension, the zoom factor needed to resize everything in the canvas.
function rescale_canvas_if_needed()
{
var optimal_dimensions = get_optimal_canvas_dimensions();
var scaleFactor=optimal_dimensions[0]/wpd.canvas_w;
if(scaleFactor != 1) {
wpd_editor.canvas.setWidth(optimal_dimensions[0]);
wpd_editor.canvas.setHeight(optimal_dimensions[1]);
wpd_editor.canvas.setZoom(scaleFactor);
wpd_editor.canvas.calcOffset();
wpd_editor.canvas.renderAll();
}
}
$( window ).resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(handle_resize, 500);
});
function handle_resize()
{
$(".canvas-container").hide();
rescale_canvas_if_needed();
$(".canvas-container").show();
}
i thought this one was the answer I needed https://stackoverflow.com/a/29445765/1815624
it seemed so close but after some adjustments I got what I wanted it down scales when needed and maxes out at a scale of 1.
The canvas size you desire should be set as width/height var optimal_dimensions = [1000,1000];
this needs some more changes to handle height as well so when a user rotates there phone to landscape it may become to big to see it all on the screen
the new edited code will be at 1000 pixels in width and height for this demo
update: added detection for height and width to scale to window...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0/fabric.min.js"></script>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).set({
borderColor: 'gray',
cornerColor: 'black',
cornerSize: 12,
transparentCorners: true
});
canvas.setActiveObject(canvas.item(0));
canvas.renderAll();
function rescale_canvas_if_needed(){
var optimal_dimensions = [400,400];
var scaleFactorX=window.innerWidth/optimal_dimensions[0];
var scaleFactorY=window.innerHeight/optimal_dimensions[1];
if(scaleFactorX < scaleFactorY && scaleFactorX < 1) {
canvas.setWidth(optimal_dimensions[0] *scaleFactorX);
canvas.setHeight(optimal_dimensions[1] *scaleFactorX);
canvas.setZoom(scaleFactorX);
} else if(scaleFactorX > scaleFactorY && scaleFactorY < 1){
canvas.setWidth(optimal_dimensions[0] *scaleFactorY);
canvas.setHeight(optimal_dimensions[1] *scaleFactorY);
canvas.setZoom(scaleFactorY);
}else {
canvas.setWidth(optimal_dimensions[0] );
canvas.setHeight(optimal_dimensions[1] );
canvas.setZoom(1);
}
canvas.calcOffset();
canvas.renderAll();
}
function handle_resize(){
$(".canvas-container").hide();
rescale_canvas_if_needed();
$(".canvas-container").show();
}
var resizeId = null;
$(function() {
$(window).resize(function() {
if(resizeId != null)
clearTimeout(resizeId);
resizeId = setTimeout(handle_resize, 500);
});
console.log( "ready!" );
/* auto size it right away... */
resizeId = setTimeout(handle_resize, 500);
});
</script>
hope this helps someone...good day.
Resize the canvas depending on the size of an element with jQuery.
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.setHeight(jQuery('#image').height());
canvas.setWidth(jQuery('#image').width());
canvas.renderAll();
}
resizeCanvas();
Maybe this is a newbie question, how to set grid layout to full screen ?
My current code is :
var container = new qx.ui.container.Composite().set({
decorator: "main",
backgroundColor: "yellow",
allowGrowX: false,
allowGrowY: false
});
var layout = new qx.ui.layout.Grid(2,2);
layout.setSpacing(5);
container.setLayout(layout);
var w1 = new qx.ui.core.Widget();
var w2 = new qx.ui.core.Widget();
var w3 = new qx.ui.core.Widget();
var w4 = new qx.ui.core.Widget();
container.add(w1, {row: 0, column: 0});
container.add(w2, {row: 0, column: 1});
container.add(w3, {row: 1, column: 0});
container.add(w4, {row: 1, column: 1});
container.set({backgroundColor : "white"});
this.getRoot().add(container, {edge: 0});
What did I miss ? It occupies only small part of the browser .
p.s. I am working on qx.Desktop.
To make the Grid layout occupy full screen, I have to add :
layout.setRowFlex(1, 1);
layout.setColumnFlex(1, 1);
after var layout = new qx.ui.layout.Grid(2,2); .
The code is to set the width & height of the grid at (1,1) of the Grid Layour flexible. For function setRowFlex() or setColumnFlex() , the 1st parameter is the index of the grid, while second parameter sets whether the grid has flexible width / height ( 1 = Flexible , 0 = Fixed )
What about
...
allowGrowX: true,
allowGrowY: true
...
?! (Just think of the names).