SVG实例之中国地图

2014-05-27 SVG

SVG 做地图具有可以任意比例放大缩小不失真的优点。本例基于d3.js的svg制作。

地图数据用GeoJSON存储。GeoJSON 是基于JSON 的、为Web 应用而编码地理数据的一个标准。实际上,GeoJSON 并不是另一种格式,而只是JSON 非常特定的一种使用方法。

网上有很多免费的GeoJSON下载,本例子中国地图GeoJSon 可以从本例源码 下载

###1.获取d3 在项目中引入即可, <script src="http://d3js.org/d3.v3.min.js"></script>

###2.创建svg var width = 960, height = 500; var svg = d3.select(“body”) .append(“svg”) .attr(“width”, width) .attr(“height”, height); ###3.创建投影(projection) var projection = d3.geo.mercator().translate([width / 2, height / 2]).center([105, 38]).scale(550);

###4.创建path var path = d3.geo.path().projection(projection);

###5. 解析json d3.json(“china.geo.json”, function(json) {

    svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .on('mouseover', function(data) {
                d3.select(this).attr('fill', 'rgba(2,2,139,0.61)');

                //创建显示tooltip用的矩形
                svg.append("rect")
                        .attr("id", "tooltip1")
                        .attr("x", 50)
                        .attr("y",50)
                        .attr("width",140)
                        .attr("height",130)
                        .attr("stroke","black")
                        .attr("fill","none")
                ;

                //创建显示tooltip文本
                svg.append("text")
                        .attr("id", "tooltip2")
                        .attr("x", 100)
                        .attr("y", 100)
                        .attr("text-anchor", "middle")
                        .attr("font-family", "sans-serif")
                        .attr("font-size", "11px")
                        .attr("font-weight", "bold")
                        .attr("fill", "black")
                        .text(data.properties.name);
            })
            .on('mouseout', function(data) {
                d3.select(this).attr('fill', 'rgba(128,124,139,0.61)');
                //Remove the tooltip
                d3.select("#tooltip1").remove();
                d3.select("#tooltip2").remove();
            })
            .attr('fill', 'rgba(128,124,139,0.61)')
            .attr('stroke', 'rgba(255,255,255,1)')
            .attr('stroke-width', 1)
    ;
});

演示效果:

完整源码下载

中国地图GeoJSON

查看例子


WebStorm配置svn共享、检出项目

2014-05-26 Web

##安装svn 1下载SlikSVN

2安装

我的是在D:\Program Files\SlikSvn目录下

3.在WebStorm中配置

file->settings->Version Contorl->subversion->with conmand line client 设置成你的D:\Program Files\SlikSvn\bin\svn.exe

##svn共享项目 1.share Project share Project

2.select target select target

3.验证 验证

4.确认 确认

##svn检出项目 1.选择项目 选择项目1

选择项目2

2.检出 检出1

检出2

##相关问题的解决 如果遇到如下错误 “Cannot load supported formats: Cannot run program ‘svn’: CreateProcess error=2, ” 错误 请回到最上面,进行“安装svn”这步骤


SVG实例之电力开关

2014-05-24 SVG

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="400" height="200" >
<script> 
function lineGClick(evt) {

var lineA = document.getElementById("lineA");
if( lineA.getAttribute("display")=="none"){

lineA.setAttribute("display","#000000");
line2.setAttribute("display","none");

}else{
lineA.setAttribute("display","none");
line2.setAttribute("display","#000000");
}
}
 </script>
<defs>
 <g id="lineG1" >
  <line id="line1" fill="none" stroke="#000000" stroke-width="4" x1="10" y1="10" x2="10" y2="40"/>
  <line id="lineA" fill="none" display="none" stroke="#000000" stroke-width="4" x1="10" y1="40" x2="10" y2="70"/>
  <line id="line2" fill="none" stroke="#000000" stroke-width="4" x1="10" y1="40" x2="35" y2="60"/>
  <line id="lineB" fill="none" stroke="#000000" stroke-width="4" x1="10" y1="70" x2="10" y2="100"/>
 </g>
</defs>
 
<text x="10" y="20" fill="red">一个SVG电力开关的例子。点击开关,进行状态转换</text>
<use x="10" y="30" xlink:href="#lineG1" onclick="lineGClick(evt)"/>
<a xlink:href="http://www.waylau.com" target="_blank">
<text x="10" y="180" fill="red">欢迎访问wwww.waylau.com</text>
  </a>
</svg>

效果:

解释:

defs标签定义了可以重复利用的组件

use引用了defs所定义的组件,其中onclick监听了鼠标点击事件


测试下几个网络相册

2014-05-23 Web

##1.百度相册外链分享

SQLServer.exe 优点:国内站,速度快,可以批量上传

缺点:右下角会有水印,很是不爽

##2.试下Photobucket 免费,无水印

 photo 4E9280547F514E0D5728A80A14E0A5E027684539F56E0_zpsc7c53c1a.jpg 优点:可以批量上传,可以照片分类,文件夹下可以再建文件夹 缺点:国外网站,网速比较慢

##3.POCO貌似也不错 POCO是您的图片生活记录和分享平台,在这里用图片记录您的生活、分享您的一切,在各兴趣社区以图会友、参加各种POCO线上线下活动。 POCO给你提供。。。。 1.跟图片有关的一切服务:发单图微博、发组图博文、发兴趣图片、建立免费可外链相册… 2.视觉图片达人必备的、互联网最创造力的个人空间 3.图片生活分享交流社区(摄影、美食、宠物、达物、旅游、手机拍客、模特….),您的优秀图片分享将有机会登上 POCO网站首页,并获得荣誉勋章 4.获得POCO优质生活体验(美食菜谱、餐厅搜索及优惠、旅游景点大全、相机图片欣赏等)

需要注意的是如果直接复制图片地址,无法正常显示的话,如下: 原地址:

将图片地址进行修改:

<img src="http://image16-c.poco.cn/mypoco/myphoto/20140523/11/17476175320140523113816047.png"/>

-c 去掉即可

<img src="http://image16.poco.cn/mypoco/myphoto/20140523/11/17476175320140523113816047.png"/> 修改地址后的图片 <img src="http://image16.poco.cn/mypoco/myphoto/20140523/11/17476175320140523113726012.png?280x280_130"/>

个人昵称水印

社区水印

缺点:只能单张图片上传

##4.七牛云存储 优点:国内站,稳定,全网加速,图片处理:

缺点:有流程和存储的限制。体验用户:储存空间1GB每月Put请求1万次每月下载流量1GB每月Get请求10万次创建1个空间仅支持富媒体上传. 如果注册为标准用户,还要提供身份,个人照片,貌似有点麻烦

##5.爱唯侦察出的图床http://99btgc01.info/

方便上传电影的封面,听站长说还算稳定。操作也简单,无需管理


SQLServer2008内存飙升 解决

2014-05-15 SQLServer

SQLServer2008在运行一段时间后内存飙升,严重导致系统奔溃 SQLServer.exe

这个是SQLServer内存管理机制决定的,由于他应用了内存池的技术,有效提高数据库的查询速度,但同时会占用大量的内存。详见SQLServer 内存管理体系结构

默认设置,他会占用计算机的所有内存。 SQLServer momery

所以要限制内存池最高内存占用量。

  • 1.登陆数据库管理工具
  • 2.“右键”数据库连接
  • 3.点击“属性”选项
  • 4.选中“内存”
  • 5.设置“最大服务器内存”

限制内存


从iReport到Jaspersoft Studio

2014-05-14 JasperReports

从5.5版本开始,Jaspersoft Studio将取代iReport 成为JasperReports官方设计器。iReport 维护截止日期到2015年底,意味着不会再有新的功能增加进iReport,但会做一些关键bug的修复、更新。所幸的是基于eclipse的Jaspersoft Studio同样开源、免费!Yeah!

Jaspersoft Studio是一个专为JasperReports报表引擎而开发的报表设计器,是iReport设计器的一个完整重构,基于Eclipse平台实现。它能够让你创建包含图表、图片、子报表、交叉表等非常复杂的布局。可以通过JDBC、TableModels、JavaBeans、XML、Hibernate、CSV或自定义数据源来读取数据。可以将报表输出成PDF、RTF、XML、XLS、CSV、HTML、XHTML、text、DOCX或OpenOffice。

##Report Life Cycle(报表生命周期) iReport和JasperSoft Studio中的报表的生命周期是相同的。

当你使用iReport或JasperSoft Studio做报表时,要创建一个JRXML文件,该文件是包含报表布局定义的XML文档。布局是完全可视化,这样你就可以忽略JRXML文件的基础结构。执行报告之前,JRXML必须编译成名为Jasper的二进制文件。Jasper文件就是应用程序生成报表所需要的。

有许多数据源类型。您可以从SQL查询,XML文件,csv文件,HQL(Hibernate查询语言)查询,JavaBeans集合等。如果你没有一个合适的数据源,JasperReports的允许你编写自己的自定义数据源。通过Jasper文件和数据源,JasperReports 就能生成最终用户想要的文档格式。

iReport和JasperSoft Studio允许您配置数据源,并使用它们来测试您的报表。在许多情况下,数据驱动向导可以帮助您快速设计您的报表。iReport包括JasperReports引擎本身,可以让您预览报表输出,测试和优化您的报表。

Report Life Cycle

##User Interface(用户界面) JasperSoft Studio 有两个不同的版本:一个独立的RCP产品,以及Eclipse插件的版本。熟悉Eclipse的人都会对用户界面感到很熟悉,而那些新用户,或者那些只熟悉iReport的设计师,则会觉得显示元素的布局会出现很大的不同。独立和插件的版本也有类似的用户界面。在下面可以看到包括JasperSoft Studio界面的预览:

Report editing area(主编辑区域)中,您直观地通过拖动,定位,对齐和通过Designer palette(设计器调色板)对报表元素调整大小。

JasperSoft Studio有一个多标签编辑器,Design,SourcePreview

  • Design tab:当你打开一个报告文件,它允许您以图形方式创建报表选中
  • Source tab: 包含用于报表的JRXML源代码。
  • Preview tab: 允许在选择数据源和输出格式后,运行报表预览。

很多页面可以查看数据:

  • Repository Explorer view:包含JasperServer生成的连接和可用的数据适配器列表
  • Project Explorer view:包含JasperReports的工程项目清单
  • Outline view:在大纲视图中显示了一个树的形式的方式报告的完整结构。
  • Properties view:通常是任何基于Eclipse的产品/插件的基础之一。它通常被填充与实际所选元素的属性的信息。这就是这样,当你从主设计区域(即:一个文本字段)选择一个报表元素或从大纲,视图显示了它的信息。其中一些属性可以是只读的,但大部分都是可编辑的,对其进行修改,通常会通知更改绘制的元素(如:元素的宽度或高度)。
  • Problems view:显示的问题和错误,例如可以阻断报告的正确的编译。

最后,Report state summary提供了有关在报表编译/填充/执行统计用户有用的信息。错误会显示在这里。

下面是一个简短的比较表,帮助用户看到iReport和JasperSoft Studio的主要内容。

iReport Designer Jaspersoft Studio
JasperServer Repository Repository Explorer
Report Inspector Outline view
Report Designer Report Editing Area
Problems List Problems view
Elements palette Designer Palette
Formatting tools Available via context menu on the element
Property sheet Properties view
Styles library
Project Explorer
iReport Designer Output window Report State summary

参考:http://community.jaspersoft.com/wiki/introduction-jaspersoft-studio http://community.jaspersoft.com/project/ireport-designer


SVG Animation动画

2014-05-09 Svg

#SVG动画示例 下面是一个简单的SVG动画的例子:

<svg width="500" height="100">
     <rect x="10" y="10" height="110" width="110"
         style="stroke:#ff0000; fill: #0000ff">
        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 60 60"
            to="360 60 60"
            repeatCount="indefinite" 
        />
    </rect>
</svg>

注意到,<rect>元素有一个<animateTransform>嵌套在它里面。正是这种元素驱动了矩形。

#动画选项的概述

动画是通过操纵图形随时间变化的属性而进行的。用下面5个SVG动画元素的 一个或多个来完成的:

  • <set>
  • <animate>
  • <animateColor>
  • <animateTransform>
  • <animateMotion>

这些动画元素在整个这段文字的后面要谈到的。

##set

<set>元素是最简单的SVG动画元素。j简单地将一个属性修改成一定值后,特定时间间隔过后就能能效了。因此,该图形是不连续的动画,只是改变属性值一次。

这里是一个<set>元素的例子:

<svg width="500" height="100">
    <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
        <set attributeName="r" attributeType="XML"
                 to="100"
                 begin="5s" />
    </circle>
</svg>

注意<set>嵌套在circle里面。这就是<set>元素的用法。

该<set>元素将时间设置成一个属性的值。设置属性的名称是指定的attributeName。修改成的值为to。开始生效的时间间隔为begin

上面的例子中的属性设置r 5秒后为100。

##attributeType

在前面的例子也有一个attributeType属性在<set>元素里面。该值设置为XML。因为SVG的<circle >元素素是XML元素。

也可以将attributeType属性设置为CSS

Sorry, your browser does not support inline SVG.
<svg width="400" height="400">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
  Sorry, your browser does not support inline SVG.  
</svg>

如果你不提供一个attributeType属性,那么浏览器会尝试猜测是一个XML属性还是CSS属性。

##animate

animate元素被用来驱动SVG图形的属性。下面是一个例子:

<svg width="500" height="75">
    <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
        <animate attributeName="cx" attributeType="XML"
                 from="30"  to="470"
                 begin="0s" dur="5s"
                 fill="remove" repeatCount="indefinite"/>
    </circle>
</svg>

这个例子中的<circle>元素cx的属性从30改成了479。动画从0秒开始,并具有5秒持续时间。

当动画完成,animate的属性被设置回其原始值(fill=”remove”)。如果想要的将动画属保持在to值的位置,则fill设置为“freeze”。动画如果无限重复则设置repeatCount的值。

##animateColor

<svg width="500" height="80">
    <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
        <animateColor attributeName="fill"
                 from="#0000ff"  to="#ff0000"
                 begin="0s" dur="5s"
                 fill="freeze" repeatCount="indefinite"/>
    </circle>
</svg>

这个例子中的动画填写将CSS属性从颜色#0000FF(蓝色)的颜色转为#FF0000(红色)。

: 尽管SVG定义了”animateColor”,但是它已经被弃用了,替代它的是”animate”元素。

##animateTransform

<animateTransform>元素可以驱动图形的transform&的属性。而<animate>元素不能做到这一点。 下面是一个例子:

<svg width="500" height="200">

  <rect x="20" y="20" width="100" height="40"
        style="stroke: #ff00ff; fill: none;" >
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 100 100" to="360 100 100"
                        begin="0s" dur="10s"
                        repeatCount="indefinite"
              />
  </rect>
  <circle cx="100" cy="100" r="2" style="stroke: none; fill: #0000ff;"/>
</svg>

本例中在点(100,100)位置从0至360度进行旋绕。

下面是比例尺放大的示例:

<svg width="500" height="200">

    <rect x="20" y="20" width="40" height="40"
          style="stroke: #ff00ff; fill: none;" >
        <animateTransform attributeName="transform"
                          type="scale"
                          from="1 1" to="2 3"
                          begin="0s" dur="10s"
                          repeatCount="indefinite"
                />
    </rect>
</svg>

##animateMotion

该<animateMotion>元素可以驱动图形沿着一条路径运动。下面是一个例子:

<svg width="500" height="150">
  <path d="M10,50 q60,50 100,0 q60,-50 100,0"
    style="stroke: #000000; fill: none;"
          />
  <rect x="0" y="0" width="30" height="15"
          style="stroke: #ff0000; fill: none;">
      <animateMotion
          path="M10,50 q60,50 100,0 q60,-50 100,0"
          begin="0s" dur="10s" repeatCount="indefinite"
          />
  </rect>
</svg>

为了以配合道路的坡度,设置了rotate=”auto”。下面是一个例子:

<svg width="500" height="150">

    <path d="M10,50 q60,50 100,0 q60,-50 100,0"
          style="stroke: #000000; fill: none;"
            />

    <rect x="0" y="0" width="30" height="15"
          style="stroke: #ff0000; fill: none;">
        <animateMotion
                path="M10,50 q60,50 100,0 q60,-50 100,0"
                begin="0s" dur="10s" repeatCount="indefinite"
                rotate="auto"
                />
    </rect>
</svg>

##Time Units(时间单位)

时间单位经常用在begin,durend的属性值中,“5s”表示”5秒”。

单位 描述
h Hours(时)
min Minutes(分)
s Seconds(秒)
ms Milliseconds(毫秒)

也可以是这种hh:mm:ss这种格式,比如1:30:45表示时间长度为”1小时30分钟45秒”。

##Coordinating Animations(协调动画)

<svg width="500" height="100">
	
	<rect x="0" y="0" width="30" height="15"
	      style="stroke: #ff0000; fill: none;">
	
	    <animate id="one"
	            attributeName="x" attributeType="XML"
	            from="0" to="400"
	            begin="0s" dur="10s" fill="freeze"
	            />
	    <animate
	            attributeName="y" attributeType="XML"
	            from="0" to="80"
	            begin="one.end" dur="10s" fill="freeze"
	            />
	</rect>

</svg> 一个动画的开始时间是另外一个动画的结束时间。

也可以通过设置时间的偏移量 one.begin+10s one.end+5s

另外,你可以在一个动画指​​定一个明确的结束时间end属性。这并不能取代dur属性。它所做的是添加另一种可能结束一个动画,所以以先到为准。下面是一个例子:

<animate
attributeName="y" attributeType="XML"
from="0" to="50"
begin="one.begin+3s" dur="10s" end="one.end"
fill="freeze"
/>

该动画将有10秒的持续时间,或与one动画一起停止结束,以先到那个为准。

##Repeating Animations(重复动画)

重复动画可以用动画元素中的两个属性。

  • 第一个属性是的repeatCount属性。在这个属性,你可以设置一个数值,这是重复动画的次数,或值不确定,将继续运行动画不会停下。
  • 第二属性是repeatDur其中指定该动画将被重复的持续时间。
<svg width="500"  height="100">
   <rect x="10" y="10" width="40" height="20"
         style="stroke: #000000; fill: none;">
        <animate attributeName="x" attributeType="XML"
                 from="10" to="400"
                 begin="0s" dur="10s"
                 repeatCount="indefinite"
                />
        <animate attributeName="y" attributeType="XML"
                 from="10" to="100"
                 begin="0s" dur="10s"
                 fill="freeze"
                 repeatCount="indefinite"
                />
   </rect>
</svg>

##Combining Animations(结合动画)

动画可以组合起来用,这里是一个例子:

<svg width="500"  height="100">
   <rect x="10" y="10" width="40" height="20"
         style="stroke: #000000; fill: none;">
        <animate attributeName="x" attributeType="XML"
                 from="10" to="400"
                 begin="0s" dur="10s"
                 repeatCount="indefinite"
                />
        <animate attributeName="y" attributeType="XML"
                 from="10" to="100"
                 begin="0s" dur="10s"
                 fill="freeze"
                 repeatCount="indefinite"
                />
   </rect>
</svg>

这个例子中有两个动画,每个动画的分别驱动xŸ的属性。

当组合<animateTransform>元素,默认的行为是第二个动画来抵消第一个。但是,您可以通过设置additive属性值为sum的而使两种动画效果累加。

<svg width="500"  height="100">
    <rect x="10" y="10" width="40" height="20"
          style="stroke: #000000; fill: none;">
        <animateTransform attributeName="transform" attributeType="XML"
                 type="scale"
                 from="1" to="3"
                 begin="0s" dur="10s"
                 repeatCount="indefinite"
                 additive="sum"
                />
        <animateTransform attributeName="transform" attributeType="XML"
                 type="rotate"
                 from="0 30 20" to="360 30 20"
                 begin="0s" dur="10s"
                 fill="freeze"
                 repeatCount="indefinite"
                 additive="sum"
                />
    </rect>
</svg>

参考:http://tutorials.jenkov.com/svg/svg-animation.html


SVG Gradients之Radial

2014-05-04 Svg

##SVG <radialGradient> <radialGradient>元素必须嵌套在<defs>中

###示例1 径向渐变,从 white 到 blue

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

代码说明:

  • cx, cy,r 定义的是外层的圆,fx ,fy定义的是内层的圆
  • 渐变可以设置多个颜色,每种颜色都用<stop>指定
  • offset定义了渐变颜色的起止

###示例2

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>