im use this http://projects.calebevans.me/jcanvas/
and im have simple example
<input type="button" class="bt" value="draw"/><br>
<canvas id="picture" width=1350 height=1350></canvas>
and js
var canvas = document.getElementById("picture");
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "tank_usa.jpg";
img.onload = function(){
ctx.drawImage(img, 0, 0);
}
$(".bt").on("click",function(){
// Draw a resizable image
$('#picture').addLayer({
type: 'image',
draggable: true,
source: 'facesSmall.png',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
x: 180, y: 150,
width: 200, height: 125,
handle: {
type: 'arc',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
radius: 10
}
})
.drawLayer();
})
if im click on button bt,and hover canvas div, my background disappears
how i can do what new image draw over background
Your background gets erased because you are using ctx.drawImage, which does not create a jCanvas layer. jCanvas layers and non-layers cannot exist on the same canvas, because when jCanvas redraws the canvas (manually via drawLayers() or automatically when events are triggered), non-layers will be erased.
To fix this, simply draw "tank_usa.jpg" like you drew 'facesSmall.png': using addLayer with type: 'image' set.
$('#picture').addLayer({
type: 'image',
source: 'tank_usa.jpg',
x: 0, y: 0,
fromCenter: false
});
$(".bt").on("click",function(){
// Draw a resizable image
$('#picture').addLayer({
type: 'image',
draggable: true,
source: 'facesSmall.png',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
x: 180, y: 150,
width: 200, height: 125,
handle: {
type: 'arc',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
radius: 10
}
})
.drawLayer();
});
Related
I'm trying to send a canvas as an image to my server and I want to send as base64.
Fabricjs offers using canvas.toSVG() or canvas.toDataURL({format: 'image/png'}) to convert the canvas to an image however the output on my log appears to be a Klass object (first time seeing that) and upon sending that object to the server and logging what's received on the server I get an empty object or a path i.e:
{ version: '2.0.0-rc.3', objects: [] }
{ version: '2.0.0-rc.3',
objects:
[ { type: 'path',
version: '2.0.0-rc.3',
originX: 'left',
originY: 'top',
left: 156.21249771118164,
top: 221.20000457763672,
width: 132,
height: 53,
fill: null,
stroke: 'Red',
strokeWidth: 10,
strokeDashArray: null,
strokeLineCap: 'round',
strokeLineJoin: 'round',
strokeMiterLimit: 10,
scaleX: 1,
scaleY: 1,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: true,
clipTo: null,
backgroundColor: '',
fillRule: 'nonzero',
paintFirst: 'fill',
globalCompositeOperation: 'source-over',
transformMatrix: null,
skewX: 0,
skewY: 0,
path: [Object] } ] }
Klass object console image:
My code:
var canvas = new fabric.Canvas();
canvas.loadFromJSON(val[i].story); //val has saved canvas
canvas.toSVG(); //or to dataURL()
I tried this and still the same klass object, need to convert the canvas to base64 image (png preferred) and send to the server where I'll be converting to an image file, thanks.
I was missing the id of the canvas when creating the canvas hence
var canvas = new fabric.Canvas('canvasID');
i need an input type range in canvas for some purposes, i need to use that to change my fontsize. I already make the shape and also drag able, but the circle controller go beyond the line.
Just preview the bin to see what i mean. Jsbin
i want to limit the draging area to the line only like the input range works.
This is the documentation of KonvaJs library.
this is working, coded by Lavrton
Source
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var Track = new Konva.Line({
x: 44,
y: 55,
points: [60, 0, 0, 0, 0, 0, 0, 0],
stroke: '#BDC3C7',
strokeWidth: 6,
visible: true,
name: 'TrackLine',
lineCap: 'sqare',
lineJoin: 'sqare'
});
var TrackBall = new Konva.Circle({
x: 44,
y: 55,
stroke: '#D35400',
fill: '#ddd',
strokeWidth: 2,
name: 'TrackControl',
radius: 8,
draggable: true,
dragOnTop: false,
visible: true,
dragBoundFunc: function(pos) {
console.log(pos.x, Math.min(44, pos.x))
return {
x: Math.min(104, Math.max(44, pos.x)),
y: this.getAbsolutePosition().y
};
}
});
layer.add(Track);
layer.add(TrackBall);
stage.add(layer);
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" class="CanCont"></div>
When I remove the onload function, the dragend event is fired but the shape is not draw and if I use onload function, the shape is drawn but dragend function is not fired.
window.onload = function ()
{
var shapeId = "";
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#canvas'),
id: 'myPaper',
model: graph,
gridSize: 1
});
joint.shapes.devs.TooledModel = joint.shapes.devs.Model.extend(_.extend({}, joint.plugins.TooledModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="t"/><g class="inPorts"/><g class="outPorts"/><g class="moveTool"/><g class="resizeTool"/><g class="portsTool"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.TooledModel',
portsTool: false,
moveTool: false,
resizeTool: false,
position: {x: 200, y: 100},
size: {width: 71, height: 625},
attrs: {
'text': {'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: '.body', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-weight': 'normal', 'font-family': 'Arial, helvetica, sans-serif'},
rect: {stroke: '#008B8B', fill: '#EEEEEE', 'stroke-width': 2}, '.': {magnet: false},
'.inPorts circle': {type: 'input'},
'.outPorts circle': {type: 'output'},
'.port-body': {r: 3}
}
}, joint.shapes.devs.Model.prototype.defaults)
}
));
joint.shapes.devs.TooledModelView = joint.shapes.devs.ModelView.extend(joint.plugins.TooledViewInterface);
var rect1 = new joint.shapes.devs.TooledModel({
moveTool: true,
position: {x: 100, y: 100},
size: {width: 120, height: 25},
attrs: {
text: {text: 'Skill', fill: 'black', 'font-weight': 'bold'},
rect: {
fill: '#F9F9F9', rx: 7, ry: 15, opacity: .80, 'stroke-width': 0, stroke: '#fff'
}
}
});
graph.addCells([rect1]);
};
var cX, cY, oX, oY;
var x, y;
//This function is not getting called
function createShape(event)
{
var $stageContainer = $("#canvas");
var stageOffset = $stageContainer.offset();
cX = event.clientX;
cY = event.clientY;
oX = stageOffset.left;
oY = stageOffset.top;
x = clientX - offsetX;
y = clientY - offsetY;
console.log(x + " " + y);
}
Html:
<body>
<div id="canvas">
<button class="btn ic_table" draggable="true" ondragend="createShape(event)"></button>
</div>
</body>
Is it a bug? Drag events doesn't work on buttons?
I think the problem might be that joint is overriding the properties of child elements of the <canvas> when it draws your shape there. If you move the <button> element outside of the <canvas>, the ondragend fires:
<body>
<div id="canvas"></div>
<button draggable="true" ondragend="createShape(event)">My Button</button>
</body>
Or did you want the button and the shape to be the same object? In the code above, they're two distinct DOM elements.
Having issues with the Knockout-Kendo radial gauge in my application.
I'm trying to initialize it via the data-bind property, but it does not appear to be resizing itself correctly.
<div id="speedGauge" data-bind="kendoRadialGauge: $parent.speedGaugeOptions"></div>
...
self.speedGaugeOptions = {
renderAs: 'svg',
value: 0,
gaugeArea: {
background: 'transparent'
},
pointer: {
color: 'lightgray',
animation: {
speed: 100
}
},
scale: {
minorUnit: 75,
majorUnit: 150,
startAngle: -40,
endAngle: 220,
max: 300,
min: -300,
labels: {
position: 'inside',
font: '10px Arial,Helvetica,sans-serif'
},
ranges: [
{
from: -300,
to: -200,
color: "darkgray"
},
{
from: 300,
to: 200,
color: "darkgray"
}
],
rangeSize: 5,
rangeDistance: -5,
rangePlaceholderColor: '#f2f2f2'
}
Here comes the fun part;
When the page has activated (using durandal), the gauges are drawn like this:
In order for the gauge to scale correctly and fit inside the gray circle, I have to redraw it like this (either from the browser console, or in the .js file):
$("#speedGauge").data("kendoRadialGauge").redraw()
When doing so, my gauge looks the way it's suppose to;
Now, I've tried creating it using the regular Kendo implementation - and that works just fine resulting in the gauge to be drawn correctly like in the image above;
<div id="speedGauge"></div>
...
self.activate = function () {
createGauge();
}
...
function createGauge() {
$("#speedGauge").kendoRadialGauge({
renderAs: 'svg',
value: 0,
gaugeArea: {
background: 'transparent'
},
pointer: {
color: 'lightgray',
animation: {
speed: 100
}
},
scale: {
minorUnit: 75,
majorUnit: 150,
startAngle: -40,
endAngle: 220,
max: 300,
min: -300,
labels: {
position: 'inside',
font: '10px Arial,Helvetica,sans-serif'
},
ranges: [
{
from: -300,
to: -200,
color: "darkgray"
},
{
from: 300,
to: 200,
color: "darkgray"
}
],
rangeSize: 5,
rangeDistance: -5,
rangePlaceholderColor: '#f2f2f2'
}
});
}
Does anyone have an idea of what might be wrong here?
A colleague suggested to do a forced redraw of the gauges on durandals attached event, which solved the problem for now. The actual resizing of the gauge is not visible with this solution.
self.attached = function(element) {
$(element).find("[data-role='radialgauge']").each(function () { $(this).data("kendoRadialGauge").redraw(); });
};
I've reported the issue here.
I'm trying jigsaw puzzle using kineticJs. I got the irregular shape pieces but source image is not displayed or fill in it. I'm stuck with this part.
fill:{
image:imageObj,
x:pieceWidth,
y:pieceHeight,
},
stroke: "#000000",
strokeWidth: 4,
lineCap: "round",
draggable: true
Looks like you need to use fillPatternImage instead of fill.
var patternPentagon = new Kinetic.RegularPolygon({
x: 220,
y: stage.height()/2,
sides: 5,
radius: 70,
fillPatternImage: images.darthVader,
fillPatternOffset: {x:-220, y:70},
stroke: 'black',
strokeWidth: 4,
draggable: true
});