i'm trying to change svg path's fill which is inside fabricjs canvas.
using this function
function changeColor(material) {
console.log(svgGroup[0].fill)
console.log(material);
if (material == 'base') {
svgGroup[0].fill = '#000000';
console.log(svgGroup[0].fill)
}
texture.needsUpdate = true;
object.children[0].material = textureMaterial;
canvas.renderAll();
}
but it doesn't updated automatically
anyone have any idea why? any thought would be helpful
i found the solution, the problem iwas i didn't set the color correctly. instead of doing this
svgGroup[0].fill = '#000000';
it should've use this
svgGroup._objects.forEach(obj => {
if (obj.id == material) {
obj.set('fill', color);
}
});
that way it is rendered when renderAll() is called
Related
Writing my first Sketch plugin and I'm trying to get the width of a selected layer.
export default function(context) {
const selectedLayers = context.selection;
const selectedCount = selectedLayers.length;
if (selectedCount === 0) {
context.document.showMessage('Please select a circle shape layer');
} else {
selectedLayers.forEach(function (layer) {
log(layer.frame.width);
})
}
}
The log shows:
<MOUndefined: 0x6040000048f0>
The documentation states that the frame of the layer is a Rectangle and that a Rectangle has x, y, width and height properties. So I don't understand why I'm getting undefined.
I tried log(layer.frame) and I do get:
<MOMethod: 0x60400263b420 : target=0x7f9dbf5b8ee0<MSShapeGroup: 0x7f9dbf5b8ee0> Oval (691540C6-7B18-4752-9BA6-A3A298754C9A), selector=frame>
So I'm targetting it right.
try with
layer.frame().width()
I have made photo editing web page and have this issue, serious.
I have made undo/redo code as follows.
state = Stack.pop();
canvas.fabric.loadFromJSON(state, function() {
canvas.fabric.renderAll();
});
And clearing the full screen with white color process is shown and that will push away lots of people.
I can remove this making another canvas but if then have to change whole structure of the webpage.
Is there any function in fabric.js to make it easily?
ex) display-previous-while-rendering?
In the latest version fabricjs makes possible to do not make the canvas flash.
If you cannot use latest ( 2.0.0beta5 ) do the following:
fabric.StaticCanvas.prototype.clear = function () {
this._objects.length = 0;
this.backgroundImage = null;
this.overlayImage = null;
this.backgroundColor = '';
this.overlayColor = '';
if (this._hasITextHandlers) {
this.off('mouse:up', this._mouseUpITextHandler);
this._iTextInstances = null;
this._hasITextHandlers = false;
}
this.clearContext(this.contextContainer);
this.fire('canvas:cleared');
this.renderOnAddRemove && this.requestRenderAll();
return this;
};
Having the renderAll under this.renderOnAddRemove bool condition, will not make the canvas flash since the loadFromJson process set that boolean to false.
I am trying to make a simple point and click game with canvas and i'd like to change the cursor to pointer when i hover on a drawn image and change it back to default when i hover off. So i was trying to make an onhover function for each object on my canvas. Is there any easy way to check if i hover over an image ?
My code looks something like this so far :
//heres an object for my canvas
var cupboard = {
x:200,
y:320,
h:300,
w:180,
imgUrl:"data\\cbc.png",
type:2,
status:'c',
onhover: function(e,canvas)
{
if((e.x >= this.x && e.x <= this.x+this.w) &&(e.y >= this.y && e.y <=
this.y+this.h)){
canvas.style.cursor = "pointer";
}
else
{
canvas.style.cursor = "default";
}
}
//i use an array for these objects
room1[cupboard,silverkey];
//heres the event listener
document.getElementById("mainCanvas").addEventListener("mousemove",
function(evt){
var mousepos = getMousePos(document.getElementById("mainCanvas"),evt);
for(i in room1)
{
(function(m){
room1[m].onhover(mousepos,document.getElementById("mainCanvas"));
})(i);
}
});
I had a look online for a solution and cam across this page :
Add onclick and onmouseover to canvas element
markE's answer is very long but could be useful for you, especially the part about '.isPointInside'.
Hope this helps!
I found a gamecode on github [https://github.com/maryrosecook/retro-games] today. I want to edit it and use png images instead of the draw function, is there anyway I can do it?
Thank you.
BodyBlock.prototype = {
draw: function(screen) {
drawRect(screen, this, "black");
}
drawRect() was custom, from scratch function.
var drawRect = function(screen, body, color) {
screen.fillStyle = color;
screen.fillRect();
};
What you are looking for is standard javascript canvas Method.
http://www.w3schools.com/tags/canvas_fillrect.asp
Tutorial : http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
I've a script, which manipulates with canvas. I call it like this:
namespace.module.do(canvas, paramString);
I'd like to move the call to the canvas itself, so it'll somewhat similar to:
<canvas namespace.module.dobehavior=paramString />
Can I do it with JS and if not how close can I get to it?
The canvas is a DOM object, so you could attach functions to it. In your example:
document.getElementsByTagName("canvas")[0].namespace.module.dobehavior = function(paramString) { ... code ... };
(obviously, document.getElementsByTagName("canvas")[0].namespace and document.getElementsByTagName("canvas")[0].namespace.module would need to be an object, so you might need to do
document.getElementsByTagName("canvas")[0].namespace = { module : { dobehavior : function(paramString) { ... } } };
And then if you had the canvas element somewhere (possibly also through var canvas = document.getElementsByTagName("canvas")[0];) you could do
canvas.namespace.module.dobehavior("someString");
Is that what you mean?
In JQuery
$(function() {
$("canvas[ns.mod.colorBehavior]") {
var color = $(this).attr("ns.mod.colorBehavior");
if (color == "red") {
var context = this.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(0,0,width,height);
}
}
}
Where width and heigh are the width and height of your canvas element (or a higher value like 10000).