I am using Fabric JS on my Angular7 project. Could you tell me how I can change the shape of the blue-colored hollow-rectangles on the corner of red-rectangle on the image?
Thanks for your attention on this post.
Blue-colored hollow-rectangles in question is here
Thanks.. Found an answer
object.set({
transparentCorners: false,
cornerColor: 'blue',
cornerStrokeColor: 'red',
borderColor: 'red',
cornerSize: 12,
padding: 10,
cornerStyle: 'circle',
borderDashArray: [3, 3]
});
Source: http://fabricjs.com/fabric-intro-part-4#customization
Related
I am trying to set up visual regression testing for react-chartjs-2 components with React Testing library. However, all of the snapshots that are being generated are blank, but the component renders properly in the browser.
This is what I'm currently testing. I basically combined this blog post example with the pie chart example from react-chartjs-2.
import React from 'react';
import {generateImage, debug} from 'jsdom-screenshot';
import {render} from '#testing-library/react';
import {Pie} from "react-chartjs-2";
it('has no visual regressions', async () => {
window.ResizeObserver =
window.ResizeObserver ||
jest.fn().mockImplementation(() => ({
disconnect: jest.fn(),
observe: jest.fn(),
unobserve: jest.fn(),
}));
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
},
],
};
render(<div><Pie data={data}/></div>)
expect(await generateImage()).toMatchImageSnapshot();
});
I am wondering if it's a timing issue. Running debug() before the expect shows a canvas with 0 width and height:
<canvas
height="0"
role="img"
style="display: block; box-sizing: border-box; height: 0px; width: 0px;"
width="0"
/>
The charting library you're using, react-chartjs-2, wraps chart.js, which relies on the canvas element to render charts to the screen. It's important to note that canvas contents are not part of the DOM, but are instead rendered virtually on top of a single DOM canvas element.
Keeping that in mind, take a look at how jsdom-screenshot renders images (from the explanation of method):
We use jsdom to obtain the state of the HTML which we want to take a screenshot of. Consumers can use jsdom to easily get components into the state they want to take a screenshot of. jsdom-screenshot then uses the markup ("the HTML") at that moment (of that state). jsdom-screenshot launches a local webserver and serves the obtained markup as index.html. It further serves assets provided through serve so that local assets are loaded. Then jsdom-screenshot uses puppeteer to take a screenshot take screenshots of that page using headless Google Chrome.
When you call generateImage(), the HTML you posted (just an empty canvas element) is copied into a file, index.html, opened in Puppeteer, then a screenshot is taken. Because canvas elements don't include their contents in their markup, when the HTML is copied into a file the chart is lost.
In short, jsdom-screenshot does not support drawing on canvas elements.
I would recommend checking out jest-puppeteer, which runs your entire test suite inside of Puppeteer. Instead of using a virtualized DOM implementation jsdom, it will use the actual Chromium DOM implementation, which has the added benefit of functioning closer to runtime usage. You can use page.screenshot() to take a screenshot of the chart exactly as it appears in-browser, with full DOM support (canvas included). Check out the jest-puppeteer README to get started.
I have an echart with a serie type:'custom' and I have a rendering issues on the labels.
I return this
return {
type: 'group',
children: [
{
type: 'rect',
ignore: !rectNormal,
shape: rectNormal,
style: { stroke: '#707070' }
},
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
strokeLinejoin: "round",
strokeLinecap: "round",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}
]
And it' rendered like this
As you can see the text stroke have problem in rendering the M letters and the strokeLinejoin and strokeLinecap did not solve the problem.
Do someone know how to fix this?
I solved it this way
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
lineJoin: "bevel",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}
On react-native iOS, "react-native-linear-gradient": "^2.0.0".
After installing correctly this package with npm then using 'react-native link', i see a red border around my text but not any gradient with the example provided.
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
Please check this out
https://alligator.io/react/gradient-border-react-native/
I have solved this problem from this blog.
Code Example :
<LinearGradient
colors={["#FFA500", "#C5121B"]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={{ borderRadius: 5 }}
>
<View style={styles.registerButtonStyle}>
<Text>Register</Text>
</View>
</LinearGradient>
registerButtonStyle: {
paddingLeft: 16,
paddingRight: 16,
paddingBottom: 7,
paddingTop: 7,
margin: 1,
backgroundColor: "white",
borderRadius: 5
},
Solved in my case with RN 0.41.2: run this command in the terminal 'react-native run-ios' for recompiling with xCode (necessary in general after a 'react-native link' command)
I need to change the space between lines in a text in a React Native for both android and iOS.
This is the code in the styles pages:
text: {
color: '#C0C0C0',
fontSize: 18,
textAlign: 'justify',
}
Use lineHeight -
text: {
color: '#C0C0C0',
fontSize: 18,
textAlign: 'justify',
lineHeight: 30,
},
You can use
{'\n'}
inside your Text tag
example :
<Text>{'\n'} Heading : </Text>
I am making an app with a sliding menu on the left (see http://mobile.tutsplus.com/tutorials/appcelerator/titanium-mobile-create-a-sliding-menu-for-ios/). And I'm trying to add a background to the rows, but every time I try that and I start the simulator, the background can only be seen a little bit because there's a white background behind the title of the row for some reason. Here's the code:
var menuTitles = [
{title: 'Home', backgroundImage: "images/row_BG.png", id: 1},
{title: 'Vestigingen', height: 30, font:{fontSize: 14, fontWeight: "bold", fontFamily: "Helvetica"}},
{title: 'Han Fortmann', backgroundImage: "images/row_BG.png", leftImage: 'images/HF_Logo_#2x.png', id: 2, font:{fontSize: 14, fontWeight: "normal", fontFamily: "Helvetica"}},
{title: 'Johannes B.', leftImage: 'images/JB_Logo_#2x.png', id: 3, font:{fontSize: 14, fontWeight: "normal", fontFamily: "Helvetica"}}
];
Maybe you should precise the Titanium version you're using to get more accurate answers.
Nevertheless, I think the answer you're looking for is the backgroundColor: 'transparent' property. Try this, and it should work :
{backgroundColor: 'transparent', title: 'Home', backgroundImage: "images/row_BG.png", id: 1}