I am using fabric.JS to draw a line. I can draw a line successfully but the problem is, that whenever I scale that line, the length of the line should only increase and not the width. Any one know any property related to that?
line = new fabric.Line([250, 125, 250, 175], {
left: 170,
top: 150,
strokeWidth: 4,
fill: 'red',
stroke: 'red',
flipX: 'false'
});
line.strokeWidth
is defining your line width, you are doing incorrect scaling.
do this:
var beforeWidth = line.strokeWidth;
//scaling process
line.strokeWidth = beforeWidth;
Related
Can't find info on how to just draw a border around a circle. Simply looking to draw a circle with a black border just like the BorderedRectangle function.
import pyglet
from pyglet import shapes
def display_get_width():
display = pyglet.canvas.get_display()
screen = display.get_default_screen()
return screen.width
def display_get_height():
display = pyglet.canvas.get_display()
screen = display.get_default_screen()
return screen.height
screen_width = display_get_width()
screen_height = display_get_height()
print(screen_width, screen_height)
window = pyglet.window.Window(screen_width//2,screen_height//2)
batch = pyglet.graphics.Batch()
rectangle = shapes.BorderedRectangle(250, 300, 600, 300, border=1, color=(255, 255, 255), border_color=(100, 100, 100), batch=batch)
rectangle2 = shapes.BorderedRectangle(300, 350, 300, 150, border=1, color=(255, 255, 255), border_color=(100, 100, 100), batch=batch)
circle = shapes.Circle(550, 450, 100, color=(50, 225, 30), batch=batch)
#window.event
def on_draw():
window.clear()
batch.draw()
pyglet.app.run()
It's been a year and half, but I had the same question a moment ago. I solved it by drawing shapes.ARC and setting width with a GL function:
pyglet.gl.glLineWidth(5)
arc = shapes.Arc(200, 200, 150, color=(255, 0, 0), batch = batch)
Omitting "angle" parameter while creating an Arc instance assumes angle is 2π - a full circle.
You can make a circle inside another circle:
circle = shapes.Circle(550, 450, 100, color=(50, 225, 30), batch=batch)
insideCircle = shapes.Circle(550, 450, 80, color=(30, 205, 10), batch=batch)
I am trying to draw a rectangle on top of an image using below code to have nothing filled in the rectangle. That is transparent and only outline of rectangle. But I am not able to do it. Is there a way to achieve that? Thanks.
var gm = require('gm').subClass({imageMagick: true});
var picGm = gm(inputFile)
picGm.drawRectangle(589, 424, 620, 463)
I tried below but it made the rectangle disappear.
picGm.fill("none").drawRectangle(589, 424, 620, 463)
Found a solution
picGm.stroke("#FFFFFF", 0).fill("rgba( 255, 255, 255 , 0 )").drawRectangle(589, 424, 620, 463)
pic.stroke("Red", 0).fill("None")
in this example I am drawing some line elements 30px away from the origin in the Y coordinate while moving along he X coordinate. This is drawn on a recording surface because in my real code I don't know the extend before I start. After drawing is done I repeat the drawing on the PDFSurface but since I want my PDF and PNG to end flush with my drawn elements I set the boundaries of the PDFSurface to the height and width of the ink_extents of the RecordingSurface. Next because I was drawing 30px lower with only empty space above I translate my drawing in set_source_surface -30px. Now when writing the PNG all works fine but the PDF is empty. If I extend the height to 100px manually the PDF is drawn correctly with the correct origin. If I start drawing at Y 0px instead of Y 30px it also works. Do I miss anything or is it a bug?
Thanks for your help. Here is a test code:
import cairocffi as cairo
rs = cairo.RecordingSurface(cairo.CONTENT_COLOR_ALPHA, None)
ctxRS = cairo.Context(rs)
items = ([0], [28, 29], [39], [42], [64], [67], [70, 71, 72], [76, 77], [79, 80], [86], [90], [104, 105],
[131], [134, 135, 136, 137, 138, 139], [145, 146, 147], [150, 151], [156], [174], [188], [191],
[199, 200], [203], [212], [216], [229, 230], [240, 241, 242, 243], [262])
for item in items:
initialPosition = item[0]
numberOfItems = len(item)
offset = initialPosition * 10
lineLength = 10 * numberOfItems
ctxRS.set_source_rgba(1.0, 0.0, 0.0, 1.0)
ctxRS.set_line_width(0)
ctxRS.move_to(offset, 30)
ctxRS.line_to(offset, 40)
ctxRS.line_to(offset + lineLength, 40)
ctxRS.line_to(offset + lineLength, 30)
ctxRS.close_path()
ctxRS.stroke_preserve()
ctxRS.set_source_rgba(1.0, 0.0, 0.0, 1.0)
ctxRS.fill()
x, y, width, height = rs.ink_extents()
ps = cairo.PDFSurface("cairoTest.pdf", width, height)
ctxPS = cairo.Context(ps)
ctxPS.set_source_surface(rs, -x, -y)
ctxPS.paint()
ps.write_to_png("cairoTest.png")
ps.finish()
I am trying to position a shape in a chart in Excel through VBA.
I set the parameters of the position. The result is the shape in a slightly different position.
I have searched the Internet but I have not found a satisfying answer as to why this happens.
I use this code
Set shpRect = Chart1.Shapes.AddShape(msoShapeRectangle, 50, 75, 250, 175)
It generates a rectangle not in the 50, 75 position but in the position 60, 80.
What about positioning the Shape to a certain cell, let's say "C3", after it's created:
Set shpRect = Chart1.Shapes.AddShape(msoShapeRectangle, 50, 75, 250, 175)
With shpRect '<-- modify the shape's position
.Top = Range("C3").Top
.Left = Range("C3").Left
End With
I have a series of backwards-'L' shapes drawn in Raphael in SVG path notation -- just a collection of datapoints each represented by a horizontal line then a vertical line, of varying lengths.
<div id="canvas"></div>
<script>
var data = [
[{x: 32, y: 207}, {x: 50, y: 371}],
[{x: 34, y: 209}, {x: 39, y: 34}],
[{x: 32, y: 216}, {x: 58, y: 38}],
[{x: 70, y: 221}, {x: 93, y: 40}],
[{x: 89, y: 223}, {x: 105, y: 41}],
[{x: 113, y: 225}, {x: 150, y: 42}],
[{x: 132, y: 228}, {x: 173, y: 43}],
[{x: 305, y: 230}, {x: 354, y: 45}]
],
paper = Raphael("canvas", 400, 300),
path;
for (var c = 0; c < data.length; c += 1) {
path = "M" + data[c][0].x + "," + data[c][0].y;
path += "H" + data[c][1].x;
path += "V" + data[c][2].y;
paper.path(path).attr({"stroke": "#900", "stroke-width": 2})
}
</script>
jsFiddle
I would like to give these shapes rounded corners of a radius of 5 or so. Do I have to manually draw the horizontal line to 5px short of its destinatation, program a curve up PI/2 radians, then draw the rest of the vertical line?
I'm hoping there's a way to do this with a single SVG curve with a small radius, such that the shape proceeds in a straight line until shortly before its end and then curves upward -- exactly the behavior of a rounded rectangle in Raphael or CSS3.
I have examined the SVG path guidelines but am having difficulty working through the details.
Thank you!
This should do the trick (at least in the example cases):
http://jsfiddle.net/jYGrq/3/
Change this
path += "H" + (data[c][1].x)
to this:
path += "H" + (data[c][1].x-5);
And add these lines after it:
if (data[c][0].y > data[c][1].y) path += "s 5 0 5 -5";
else if (data[c][0].y < data[c][1].y) path += "s 5 0 5 5";
This covers all the cases in example, but if you want to round corners despite of the orientation, make more ifs. Hope this helps a little.
By the way, I assume that shorthand relative cubic (s) is the curve type that is most suitable in your case.