理解svg中画箭头代码[viewbox,refX,refY]

2014年7月09日 20:52

常见示例
最常见的在线条上画箭头代码
<svg>
    <!-- 预定义marker-->
    <defs>
        <marker id="arrow" refX="0" refY="3" markerWidth="20" markerHeight="20" orient="auto">
            <path d="M0 0 L0 6 L10 3" style="fill: #ffff;"></path>
        </marker>
    </marker>
    </defs>
    <!-- 引用预定义的marker -->
    <line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
先预定义了一个箭头形状的marker,然后画了一条线,并且将预定义的marker标到线条末端.
 
画出的图形
 
实现方法是用path画一个三角形并填充到marker中,形成三角marker,之所以用marker是因为,只有marker才能标到其它图形上. 但是marker是怎样被标记线条末端的?在marker中有refX、refY作用就是用来指定线条末点连接到marker上的位置. 连接上后,箭头指向哪边?orient属性则指定marker的方向.
 
 
如何为marker中坐标取值
首先marker与包含的path共用一个坐标系,如果坐标值不对则会显示不全.
比如上面marker的显示范围是(0,0)到(20, 20), path的范围是(0,0)到(10,6),可知道path完全处在marker的显示区域内,因此path可以全部显示.
 
如果需改path值,path显示范围为(0,-3)到(10,3),有一半内容在marker显示区域外,我们看到的就是半个三角形。设置坐标时要知道marker与path是共用同一个坐标系,path坐标不是相对于marker,注意path要在marker的可视范围内
<svg>
    <!-- 预定义marker-->
    <defs>
        <marker id="arrow" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
            <path d="M0 -3 L0 3 L10 0" style="fill: #ffff;"></path>
        </marker>
    </marker>
    </defs>
    <!-- 引用预定义的marker -->
    <line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
如下
 
理解marker的viewBox属性
用法viewBox(xmin, ymin, width, height)
查看文档可知道viewBox作用是拉伸图形。它是如何控制拉伸的?要想拉伸的话,指定长宽比例就可以了,怎么会用到xmin, ymin, width, height这些值,它们是和拉伸有什么关系?怎么理解?
实际上拉伸只是它的一个功能,换一种叫法就很好理解: 取景框. 它使用xmin,ymin,width,height这些参数确定取景范围,然后将取到的景象,放到marker中,并且充满整个marker. 如果取到的景象比marker可视范围小,则景象会被放大再充满marker;如果取到的景象比marker可视范围大,怎取景会被缩小再充满marker. 所以viewbox有两个功能:一是填充功能;二是拉伸.
 
比如上面只显示半个三角形,可以通过设置viewbox让它,在marker中完整显示.
<svg>
    <!-- 预定义marker-->
    <defs>
        <marker id="arrow" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto" viewBox="0, -3, 10, 6" >
            <path d="M0 -3 L0 3 L10 0" style="fill: #ffff;"></path>
        </marker>
    </marker>
    </defs>
    <!-- 引用预定义的marker -->
    <line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
上面viewBox控制了取景范围,正好将整个三角形取出来,再放入长20宽20的marker中,因为viewbox取到的景象长为10宽为6,小于marker大小,要想让三角形充满,则要放大景象,放大的比例长为20/10,宽为20/6.
显示结果
 
 
 

Tags: SVG
评论(9) 阅读(10931)

web前端开发包管理器bower[笔记]

2014年6月25日 05:13

    Bower是用于web前端开发的包管理器。对于前端包管理方面的问题,它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型,这样更利于使用更合适的构建工具。Bower没有系统级的依赖,在不同app之间也不互相依赖,依赖树是扁平的。
    Bower运行在Git之上,它将所有包都视作一个黑盒子。任何类型的资源文件都可以打包为一个模块,并且可以使用任何规范(例如:AMD、CommonJS等)。
 

安装

#安装bower
npm install -g bower

基本用法

#安装包
bower install jqeury
#指定版本
bower install jquery#1.10.3
#查找包
bower search jquery
#卸载包
bower install jqeury

使用包

<script src="/bower_components/jquery/index.js"></script>

配置

配置文件.bowerrc
{
  "directory" : "components", #指定安装路径
  "json"      : "bower.json",
  "endpoint"  : "https://Bower.herokuapp.com",
  "searchpath"  : "",
  "shorthand_resolver" : ""
}

来源:http://bower.jsbin.cn/

Tags: bower
评论(8) 阅读(2803)

cnpm包管理工具

2014年3月26日 14:33

通常的包管理工具是npm,npm使用的镜像源在国外,经常被gfw屏蔽掉.

发现另一个包管理工具cnpm,可以正常使用.

  • 安装cnpm

npm install -g cnpm --registry=http://r.cnpmjs.org

  • 使用

cnpm install package

用法与npm一样

Tags: npm nodejs
评论(0) 阅读(1479)

npm无反应

2014年3月25日 15:42

通过npm安装node包时,发现卡住了,没有反应

查找原因

加上参数-verbose,查看详细信息
发现卡在下面这个地方
npm http GET https://registry.npmjs.org/express
npm info retry will retry, error on last attempt: Error: connect ETIMEDOUT
通过提示知道应该是出现超时.

解决方法

最后找到,通过修改它的安装源,换成国内的http://registry.cnpmjs.org 即可.
  • config命令
npm config set registry http://registry.cnpmjs.org
npm info underscore
  • 命令行指定
npm --registry http:/registry.cnpmjs.org install express
  • 修改~/.npmrc配置文件,加入以下内容
registry = http://registry.cnpmjs.org

cnpm

更方便的方法是使用cnpm,安装后用法与npm一样
sudo npm install -g cnpm --registry http://r.cnpmjs.org
 

 

Tags: nodejs
评论(0) 阅读(4713)

nodejs理解[笔记]

2014年3月24日 10:47

 
node.js是什么
node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物理机的连接代码。
 
Node 旨在解决什么问题?
当前服务瓶颈:服务器能够处理的并发连接的最大数量。
 
Node 解决这个问题的方法:更改连接到服务器的方式。每个连接发射一个在 Node 引擎的进程中运行的事件,而不是为每个连接生成一个新的 OS 线程(并为其分配一些配套内存)。Node 声称它绝不会死锁,因为它根本不允许使用锁,它不会直接阻塞 I/O 调用。Node 还宣称,运行它的服务器能支持数万个并发连接。
 
 
Node 如何工作?
Node 本身运行 V8 JavaScript。
什么是 V8?V8 JavaScript 引擎是 Google 用于其 Chrome 浏览器的底层 JavaScript 引擎。
 
Node 使用事件驱动编程模型。
 
Node 适用场景?
Node 非常适合以下情况:在响应客户端之前,您预计可能有很高的流量,但所需的服务器端逻辑和处理不一定很多。
 
典型示例:
  • RESTfull API
提供 RESTful API 的 Web 服务接收几个参数,解析它们,组合一个响应,并返回一个响应(通常是较少的文本)给用户。这是适合 Node 的理想情况,因为您可以构建它来处理数万条连接。它仍然不需要大量逻辑;它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本,入站请求也是少量的文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的 API 需求。
  • Twitter队列
想像一下像 Twitter 这样的公司,它必须接收 tweets 并将其写入数据库。实际上,每秒几乎有数千条 tweet 达到,数据库不可能及时处理高峰时段所需的写入数量。Node 成为这个问题的解决方案的重要一环。如您所见,Node 能处理数万条入站 tweet。它能快速而又轻松地将它们写入一个内存排队机制(例如 memcached),另一个单独进程可以从那里将它们写入数据库。Node 在这里的角色是迅速收集 tweet,并将这个信息传递给另一个负责写入的进程。想象一下另一种设计(常规 PHP 服务器会自己尝试处理对数据库本身的写入):每个 tweet 都会在写入数据库时导致一个短暂的延迟,因为数据库调用正在阻塞通道。由于数据库延迟,一台这样设计的机器每秒可能只能处理 2000 条入站 tweet。每秒处理 100 万条 tweet 则需要 500 个服务器。相反,Node 能处理每个连接而不会阻塞通道,从而能够捕获尽可能多的 tweets。一个能处理 50,000 条 tweet 的 Node 机器仅需 20 台服务器即可。
  • 电子游戏统计数据
如果您在线玩过《使命召唤》这款游戏,当您查看游戏统计数据时,就会立即意识到一个问题:要生成那种级别的统计数据,必须跟踪海量信息。这样,如果有数百万玩家同时在线玩游戏,而且他们处于游戏中的不同位置,那么很快就会生成海量信息。Node 是这种场景的一种很好的解决方案,因为它能采集游戏生成的数据,对数据进行最少的合并,然后对数据进行排队,以便将它们写入数据库。使用整个服务器来跟踪玩家在游戏中发射了多少子弹看起来很愚蠢,如果您使用 Apache 这样的服务器,可能会 有一些有用的限制;但相反,如果您专门使用一个服务器来跟踪一个游戏的所有统计数据,就像使用运行 Node 的服务器所做的那样,那看起来似乎是一种明智之举.
 
来源 http://www.ibm.com/developerworks/cn/opensource/os-nodejs/
 
 

Tags: nodejs
评论(4) 阅读(1662)

jquery对象是否相同

2014年2月11日 13:46

通过不同形式得到同一个htnl元素,如何比较它是否相同?
假设得到后,两者变量名是A和B. (A和B是js元素,还是jquery对象,此时不清楚)
 
第一个想到的是方法是$(A) == $(B),结果返回false
再试试$(A)[0] == $(B)[0],结果返回true
 
它比较的是什么?
 
看看下面例子,下面的两个input比较,会相同吗.
<div id="content">
    <input name="user_name"/>
    <input name="user_name"/>
</div>
 
它们不同
$(function(){
    var inputs = $("#content input")
    console.info(inputs[0] == inputs[1]);  //false
    console.info($(inputs[0]) == $(inputs[0])); //false
});
 
其实比较只有两种类型: 值类型和引用类型.
上面就是引用比较. jquery的$会产生新对象,每次的引用都不同,自然就不相等.
所以只能用最初的引用进行比较,而不是jquery转化后的.

评论(143) 阅读(6781)