-
Notifications
You must be signed in to change notification settings - Fork 197
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
is there a canvas widget? #276
Comments
Hi, can you elaborate a little on you use case? What are you trying to do? If you create a SVG drawing, and SVG widget (SVGPaths) is used under the hood. You can inspect the {
"type": "SVGPaths",
"name": "Path",
"x": 1156,
"y": 1648,
"w": 252,
"h": 136,
"z": 16,
"props": {
"paths": [
{
"id": "p1711190560381",
"name": "Path",
"type": "Path",
"stroke": "#333333",
"strokeWidth": 1,
"fill": "",
"closed": true,
"d": [
{
"t": "M",
"x": 0,
"y": 0
},
{
"t": "L",
"x": 252,
"y": 0
},
{
"t": "L",
"x": 252,
"y": 136
},
{
"t": "L",
"x": 0,
"y": 136
}
]
}
],
"bbox": {
"w": 252,
"h": 136
}
},
"has": {
"onclick": true
},
"actions": {},
"style": {},
"id": "w10047_6495",
"created": 1711190562710
} Through a script you should be able to set the paths in the props. on the qux object use the // get the element...
element.setProp({
'paths': [... your data]
})
` |
well, I am currently investigating quant-ux to see if I could use it for myself and/or for my students. Often, I need a element for custom 2D and 3D graphics - and I just wanted to see what a Canvas widget together with the scripting facility could be good for |
Hi, the scripts are run in a webworker which has no access to the DOM tree. Beside working with the SVG paths you could also try the following. In the script you create SVG string and encode it as a data url (https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) The data url you pass to the data object, e.g. data.image = dataurl You can use the data image and data binding to show the image. This should work, but I have not tested this. |
Hi, tried this script and it works: let svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plant"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 15h10v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2v-4z" /><path d="M12 9a6 6 0 0 0 -6 -6h-3v2a6 6 0 0 0 6 6h3" /><path d="M12 11a6 6 0 0 1 6 -6h3v1a6 6 0 0 1 -6 6h-3" /><path d="M12 15l0 -6" /></svg>
`
var dataUri = "data:image/svg+xml;base64," + btoa(svg);
console.debug(dataUri)
data.image = dataUri You have to use the dev.quant-ux.com instance. |
I also shared the prototype with you. |
sorry for the late response, but I had to meet a submission deadline for another project first... So, I'll have to provide the SVG contents via script - that's ok for me - thanks! |
...which I can use to draw into from a script?
The text was updated successfully, but these errors were encountered: