I have run into a problem that I can't figure out. For some reason, my SVG images keep getting cut off. I have been digging through the SVG docs.
Here is the code:
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50).fill('none').stroke({
color: 'black',
width: 1
})
draw.use(Circle).move(50, 200)
draw.use(Circle).move(100, 200)
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
</html>
So it looks like the line is being drawn either using outside or centered so the edge is being cut off. What I did was transform the circle to move it by 1px on the x and y axis. I looked through the docs and didn't see a way to change the line style which would also probably fix this, but I couldn't see anything.
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div>
<div id="drawing"></div>
</div>
</body>
<script>
var draw = SVG().addTo('#drawing').size(52, 52)
var Circle = draw.symbol();
Circle.circle(50).fill('none').stroke({ color: 'black', width: 1 }).transform({
translateX: 1,
translateY: 1
})
draw.use(Circle).move(0, 0)
</script>
</html>
Your example
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
<script>
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50)
.fill('none')
.stroke({ color: 'black', width: 1 })
.transform({translateX: 1, translateY: 1})
draw.use(Circle).move(50, 200)
draw.use(Circle).move(102, 200)
</script>
</html>
Alternative without transform per your comments
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50)
.fill('none')
.stroke({ color: 'black', width: 1 })
draw.use(Circle).move(50, 200)
draw.use(Circle).move(102, 200)
#drawing symbol {
overflow: visible;
}
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
</html>
Related
HTML:
<html>
<head>
<link rel="stylesheet" href="index.css">
<title>sdssd</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="area">
</canvas>
</body>
<footer>
<script type="text/javascript" src="index.js"></script>
</footer>
</html>
CSS:
#area {
width: 600px;
height: 600px;
margin: auto 30%;
background-color: lightgray;
outline: 1px solid black;
}
JS: All of this is pretty bare bones, i simply want to draw a shape (for now) but context.fillRrect doesn't seem to be working... i don't know why tho
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
context.fillStyle("red");
context.fillRect(4, 5, 132, 132);
change
context.fillStyle("red");
to
context.fillStyle = "red";
to make it work: https://jsfiddle.net/t0yqm6jb/
I have to create boxes inside of a div(The div here is box) whenever the user clicks the button. I have done the following so far, but no boxes are created.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
height: 50px;
width: 50px;
border-color: blue;
}
#box {
width: 700px;
height: 700px;
border: solid black;
}
</style>
</head>
<body>
<h1>The onclick Event</h1>
<button id ="theBoxes" >Creating boxes</button>
<div id = "box"></div>
<script>
var x = document.getElementById("theBoxes");
x.addEventListener("click", myFunction)
function myFunction() {
var box = document.createElement('div');
box.classList.add('myDiv');
document.body.appendChild(box);
}
</script>
</body>
</html>
var x = document.getElementById("theBoxes");
x.addEventListener("click", myFunction)
function myFunction() {
var box = document.createElement('div');
box.classList.add('myDiv');
document.body.appendChild(box);
}
.myDiv {
height: 50px;
width: 50px;
border: 1px solid blue;
}
#box {
width: 700px;
height: 700px;
border: solid black;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>The onclick Event</h1>
<button id ="theBoxes" >Creating boxes</button>
<div id = "box"></div>
</body>
</html>
Your code is working, unfortunately border-color: blue in myDiv doesn't work and the box also added outside your div #box.
So I modify a bit your code by adding position: absolute in #box and border: 1px solid blue in .myDiv.
When adding rectangles the canvas height does not scale with it. Changing the canvas height is not an option. I am searching for weeks how to make this possible. My question is when adding multiple rectangles that the canvas height automatically increases with it for example bij 100 pixels so that it shows the complete rectangle and not only a piece of it like now.
Here is how it is now https://jsfiddle.net/5qybcp84/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IIS7</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/NodeList.js"></script>
<script src="click.js"></script>
<script src="date.js"></script>
<script src='jcanvas.min.js'></script>
<script src="canvasscript.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<b>Nodes</b>
<br>
<div class="scrollbar">
<div class="content">
<canvas id="NodeList" width="200" style="border:2px solid black"></canvas>
</div>
</div>
<div class="Display" id="Display">
<canvas id="NodeDisplay" style="border:2px solid black;" ></canvas>
<script>
var ctx = $('#NodeList').get(0).getContext('2d');
var rects = [[20, 20, 150, 100], [20, 140, 150, 100]];
for(var i=0;i<rects.length;i++) {
ctx.fillRect(rects[i][0],
rects[i][1],
rects[i][2],
rects[i][3]);
}
$('#NodeList').click(function(e) {
var x = e.offsetX,
y = e.offsetY;
for(var i=0;i<rects.length;i++) {
if(x > rects[i][0]
&& x < rects[i][0] + rects[i][2]
&& y > rects[i][1]
&& y < rects[i][1] + rects[i][3]) {
alert('Rectangle ' + i + ' clicked');
}
}
});
</script>
</div>
<div id="canvas-wrap">
<canvas width="600" height="600" style="border:2px solid black;"></canvas>
<div id="overlay"></div>
<div class="een" style="border:2px solid black;" >11111 </div>
<div class="twee" style="border:2px solid black;" >22222 </div>
<div class="drie" style="border:2px solid black;" >33333</div>
<div class="vier" style="border:2px solid black;" >44444 </div>
</div>
</div>
</body>
</html>
html, body {
height: 100%;
overflow: hidden;
}
b {
margin-left: 75px;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:center;
}
a img {
border:none;
}
.scrollbar{
width:220px;
height:1050px;
border:1px solid #000;
overflow:scroll;
overflow-x: hidden;
position: fixed;
}
.content{
width:auto;
height:100%;
}
#Display {
margin-left: 580px;
float: left;
}
#NodeDisplay{
float: left;
height: 300px;
width: 600px;
margin-left: -200px;
}
#canvas-wrap {
position:fixed;
margin-left: 380px;
float: left;
position: fixed;
margin-top: 435px;
}
#canvas-wrap canvas {
position:absolute;
top:0;
left:0;
z-index:0
}
.een{
height: auto;
width: 600px;
}
.twee{
height: auto;
width: 600px;
}
.drie {
height: auto;
width: 600px;
}
.vier{
height: auto;
width: 600px;
}
If you want to resize your canvas without stretching your drawings you'll need a draw() method. This draw method will add all object to your canvas. Therefore you'll have to save your object somewhere. You'll need to do this because resizing the canvas clears it. The draw method need to know your current objects and draws them every time you resize the canvas.
You could add some JQuery code:
Everytime you add a rectangle:
$('#NodeList').height("+=100");
draw();
when you delete a rectangle:
$('#NodeList').height("-=100");
draw();
In your example that would be for for-loop right now. But the whole loop.
I have a flash object which is 300x600. I want to place it horizontally with another div. swfObject creates it with style="display: block !important;", so I think that's the problem.
I've tried to use swfobject.createCSS to disable this, but it didn't work-out.
I'd be glad for help.
Here's how you can do it ...
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto;
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="first">
<object width="300" height="315"
data="http://www.youtube.com/v/XGSy3_Czz8k">
</object>
</div>
<div id="second">
<h1>This is some second div</h1>
</div>
</div>
</body>
</html>
I started using jsPlumb and JQuery, I want to connect draggable elements but if I add the
draggable behavior before the connection then the connection does not refresh position.
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.window {
background-color: white;
border: 3px solid #346789;
color: black;
font-family: helvetica;
font-size: 0.8em;
height: 12em;
opacity: 0.8;
padding: 0.5em;
position: absolute;
width: 14em;
z-index: 20;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
</head>
<body>
<div>
<div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
<div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".window").draggable();
var a = $("#a");
var b = $("#b");
jsPlumb.connect({
source:a,
target:b,
connector:["Bezier",68],
endpoints:[
["Dot",{radius:12}],
["Rectangle",{width:20,height:30}]
]
});
});
</script>
</body>
</html>
i wrote jsPlumb.
the reason it doesn't refresh is that it has no way of knowing something is being dragged. instead of calling $(".window").draggable(), you either need to let jsPlumb do that for you when a connection is made, or through this method:
jsPlumb.draggable($(".window"));
the first option will not initialise the dragging for any window that doesn't have a connection. the second one will.
There are few ways to do so - refer to the jsPlumb documentation
,but generally you can use:
Id of the element
Array of elements
Or selector (for example class selector that was mentioned previously: jsPlumb.draggable($(".window"));
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="/include/jquery.jsPlumb-1.3.16-all-min.js"></script>
<style>
.window {
background-color: #EEEEEF;
border: 1px solid #346789;
border-radius: 0.5em;
box-shadow: 2px 2px 19px #AAAAAA;
color: black;
height: 5em;
position: absolute;
width: 5em;
cursor: pointer;
}
</style>
<script>
jsPlumb.ready(function () {
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("container0");
//jsPlumb.draggable(["container0", "container1"]);
jsPlumb.draggable($(".window"));
//perform operation only after DOM is loaded
var e0 = jsPlumb.addEndpoint("container0"),
e1 = jsPlumb.addEndpoint("container1");
jsPlumb.connect({ source: e0, target: e1 });
});
</script>
</head>
<body >
<div class="window" style="left: 20px" id="container0">
</div>
<div class="window" style="left: 200px" id="container1">
</div>
</body>
</html>